vscode中怎么定制代碼片段?下面本篇文章給大家介紹一下給vscode中定制屬于自己的代碼片段,讓編碼快到飛起的方法,希望對大家有所幫助!
vscode的用戶片段非常的方便,比如我想規(guī)范注釋、快速生成代碼呀,vscode的用戶片段都可以幫我實(shí)現(xiàn),而且是那種非常定制化去實(shí)現(xiàn)。定義好片段后,你還可以通過腳手架去生成一個(gè)vscode插件,并不復(fù)雜。【推薦學(xué)習(xí):《vscode》】
基本指南
先找到文件的菜單 -> 找到首選項(xiàng) -> 用戶片段 -> 選擇新建 xx 文件夾的代碼片段文件 -> 輸入片段名稱 -> 開始定制。
這個(gè) xx 文件夾就是你當(dāng)前目錄,當(dāng)然你也可以新建全局的或者某一個(gè)文件類型的,都可以的。無非是片段文件存放的目錄不同。
然后你就在當(dāng)前目錄下看到這個(gè)了。
只要把它放到當(dāng)前vscode打開的文件夾的根目錄下面,只要vscode能讀取到這個(gè)文件.vscode即可。
還有一種方式就是你把它放到vscode的用戶全局目錄下也行,vscode會(huì)首先去那里面去找,然后再到當(dāng)前目錄下去找。
至于如何去找vscode的用戶全局目錄,你新建一個(gè)全局的代碼片段,然后從vscode的面包屑導(dǎo)航中就能看到了。
開始定制自己的代碼片段
目前我只先做一個(gè)通用的,可以在js、ts、scss、lesss中能用到的。
{ "單行注釋:start":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix":?"ts", "body":?[ "//?PROJECT?一段自定義描述?start", "$0" ], "description":?"單行注釋:start" }, "單行注釋:end":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix":?"te", "body":?[ "//?PROJECT?一段自定義描述?end", "$0" ], "description":?"單行注釋:end" }, "單行注釋:start&end":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix":?"tse", "body":?[ "//?PROJECT?一段自定義描述?start", ????????????"", "${1:你即將填充的內(nèi)容}", ????????????"", ????????????"//?PROJECT?一段自定義描述?end", ], "description":?"單行注釋:start&end" }, "多行注釋:start":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact", "prefix":?"ms", "body":?[ "/**rn?*?PROJECT?一段自定義描述?start", "?*?$0", "?*?*/", "" ], "description":?"多行注釋:start" }, "多行注釋:end":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact", "prefix":?"me", "body":?[ "/*?PROJECT?一段自定義描述?end?*/", "" ], "description":?"多行注釋:end" } }
上面定制的是js、ts、jsx的注釋代碼塊,不同的人有不同的風(fēng)格,你簡單改改成你自己的了。
使用說明:代碼片段是需要通過 關(guān)鍵字 才能呼喚出來的。比如 如上的普通的單行注釋就是通過 ts呼喚出來的,然后按一下補(bǔ)全的鍵,進(jìn)行常規(guī)補(bǔ)全操作即可,就像windows系統(tǒng)的tab鍵。
代碼片段的關(guān)鍵字就是上述配置文件中的 prefix 屬性里的字符串,而scope就是它這個(gè)代碼片段作用的文件類型了。
而body就是代碼片段,數(shù)組中每一項(xiàng)都會(huì)在生成的代碼中獨(dú)占一行,$0即表示生成代碼片段后光標(biāo)出現(xiàn)的位置。
還會(huì)有$1 2 3 4 5 6等等,表示下一次光標(biāo)出現(xiàn)的位置,也就是你連續(xù)敲擊按tab鍵時(shí)光標(biāo)出現(xiàn)的位置。
還可以使用讓字符串作為占位符,比如單行注釋::start&end 中的${1:xxx},這種就是用字符串當(dāng)作占位符,可以給你很清楚的提示。
關(guān)鍵字說明:
ts:單行注釋:star
te:單行注釋:end
tse:單行注釋:start&end
ms: ?多行注釋:start
me:多行注釋:end
繼續(xù)定制jsx和tsx的代碼片段
這次先做一個(gè)jsx、tsx中能用的吧,jsx、tsx的注釋判斷和js、ts不太一樣,所以要單獨(dú)做一下。
{ "jsx&tsx注釋:start":?{ "scope":?"javascriptreact,typescriptreact", "prefix":?"js", "body":?[ "{/*?PROJECT?一段自定義描述?start?*/}", "$0" ], "description":?"jsx&tsx注釋:start" }, "jsx&tsx注釋:end":?{ "scope":?"javascriptreact,typescriptreact", "prefix":?"je", "body":?[ "{/*?PROJECT?一段自定義描述?end?*/}", "$0" ], "description":?"jsx&tsx注釋:end" }, ????"jsx&tsx注釋:start&end":?{ "scope":?"javascriptreact,typescriptreact", "prefix":?"jse", "body":?[ "{/*?PROJECT?一段自定義描述?start?*/}", ????????????"", "${1:你即將填充的內(nèi)容}", ????????????"", ????????????"{/*?PROJECT?一段自定義描述?end?*/}", ], "description":?"jsx&tsx注釋:start&end" } }
效果如圖:
關(guān)鍵字說明:
js:jsx&tsx注釋:start
je:jsx&tsx注釋:end
jse:jsx&tsx注釋:start&end
再來一個(gè)css的
其實(shí)到了這里,你已經(jīng)對vscode定制代碼片段非常熟悉了,如果我上面寫的片段不符合你的要求,你可以自己改改喲,沒有什么復(fù)雜的操作。
{ ????"css注釋:start":?{ "scope":?"css", "prefix":?"cs", "body":?[ ????????????"/*?PROJECT?一段自定義描述?start?*/", "$0" ], "description":?"css注釋:start" }, "css注釋:end":?{ "scope":?"css", "prefix":?"ce", "body":?[ "/*?PROJECT?一段自定義描述?end?*/", "$0" ], "description":?"css注釋:end" }, ????"css注釋:start&end":?{ "scope":?"css", "prefix":?"cse", "body":?[ "/*?PROJECT?一段自定義描述?start?*/", ????????????"", "${1:你即將填充的內(nèi)容}", ????????????"", ????????????"/*?PROJECT?一段自定義描述?end?*/", ], "description":?"css注釋:start&end" } }
關(guān)鍵字說明:
cs:css注釋:start
ce:css注釋:end
cse:css注釋:start&end
最后做個(gè)todo吧
{ ????"TODO注釋:common":?{ "scope":?"javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix":?"tt", "body":?[ "//?PRJECT-TODO:$0" ], "description":?"TODO注釋:common" }, ????"TODO注釋:jsx":?{ "scope":?"javascriptreact,typescriptreact", "prefix":?"jt", "body":?[ "{/*?PRJECT-TODO:$0?*/}" ], "description":?"TODO注釋:jsx" }, ????"TODO注釋:css":?{ "scope":?"css", "prefix":?"ct", "body":?[ "/*?PRJECT-TODO:$0?*/" ], "description":?"TODO注釋:css" }, }
關(guān)鍵字說明:
tt:TODO注釋:common
jt:TODO注釋:jsx
ct:TODO注釋:css
總結(jié)
有了這些代碼片段之后,其實(shí)還可以做一個(gè)vscode的插件,也比較的簡單,這篇vscode中寫了很詳細(xì)了,照著做基本沒啥問題。
關(guān)鍵字匯總說明
js、ts、less、scss文件中能夠用到的
ts:單行注釋:star
te:單行注釋:end
tse:單行注釋:start&end
ms: ?多行注釋:start
me:多行注釋:end
jsx、tsx文件中能夠用到的
js:jsx&tsx注釋:start
je:jsx&tsx注釋:end
jse:jsx&tsx注釋:start&end
css文件中能夠用到的
cs:css注釋:start
ce:css注釋:end
cse:css注釋:start&end
上述三種文件中都能用到的todo
tt:TODO注釋:common
jt:TODO注釋:jsx
ct:TODO注釋:css
更多關(guān)于VSCode的相關(guān)知識,請?jiān)L問:vscode!!