.jpg)
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！！
.png)
