這篇文章主要講解了“vscode中如何定制代碼片段”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vscode中如何定制代碼片段”吧！
為吉利等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及吉利網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、吉利網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
先找到文件的菜單 -> 找到首選項 -> 用戶片段 -> 選擇新建 xx 文件夾的代碼片段文件 -> 輸入片段名稱 -> 開始定制。
這個 xx 文件夾就是你當(dāng)前目錄，當(dāng)然你也可以新建全局的或者某一個文件類型的，都可以的。無非是片段文件存放的目錄不同。
然后你就在當(dāng)前目錄下看到這個了。
只要把它放到當(dāng)前vscode打開的文件夾的根目錄下面，只要vscode能讀取到這個文件.vscode即可。
還有一種方式就是你把它放到vscode的用戶全局目錄下也行，vscode會首先去那里面去找，然后再到當(dāng)前目錄下去找。
至于如何去找vscode的用戶全局目錄，你新建一個全局的代碼片段，然后從vscode的面包屑導(dǎo)航中就能看到了。
目前我只先做一個通用的，可以在js、ts、scss、lesss中能用到的。
重慶分公司
重慶分公司
{
"單行注釋:start": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
"prefix": "ts",
"body": [
"http:// PROJECT 一段自定義描述 start",
"$0"
],
"description": "單行注釋:start"
},
"單行注釋:end": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
"prefix": "te",
"body": [
"http:// PROJECT 一段自定義描述 end",
"$0"
],
"description": "單行注釋:end"
},
"單行注釋:start&end": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
"prefix": "tse",
"body": [
"http:// PROJECT 一段自定義描述 start",
"",
"${1:你即將填充的內(nèi)容}",
"",
"http:// PROJECT 一段自定義描述 end",
],
"description": "單行注釋:start&end"
},
"多行注釋:start": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "ms",
"body": [
"/**\r\n * 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呼喚出來的，然后按一下補全的鍵，進行常規(guī)補全操作即可，就像windows系統(tǒng)的tab鍵。
代碼片段的關(guān)鍵字就是上述配置文件中的 prefix 屬性里的字符串，而scope就是它這個代碼片段作用的文件類型了。
而body就是代碼片段，數(shù)組中每一項都會在生成的代碼中獨占一行，$0即表示生成代碼片段后光標(biāo)出現(xiàn)的位置。
還會有$1 2 3 4 5 6等等，表示下一次光標(biāo)出現(xiàn)的位置，也就是你連續(xù)敲擊按tab鍵時光標(biāo)出現(xiàn)的位置。
還可以使用讓字符串作為占位符，比如單行注釋::start&end 中的${1:xxx}，這種就是用字符串當(dāng)作占位符，可以給你很清楚的提示。
關(guān)鍵字說明：
ts：單行注釋:star
te：單行注釋:end
tse：單行注釋:start&end
ms: 多行注釋:start
me：多行注釋:end
這次先做一個jsx、tsx中能用的吧，jsx、tsx的注釋判斷和js、ts不太一樣，所以要單獨做一下。
{
"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
其實到了這里，你已經(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
{
"TODO注釋:common": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
"prefix": "tt",
"body": [
"http:// 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
感謝各位的閱讀，以上就是“vscode中如何定制代碼片段”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vscode中如何定制代碼片段這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
