一、起步

1.如何設(shè)置

Windows系統(tǒng): 文件 > 首選項 > 用戶代碼片段

Mac系統(tǒng): Code > 首選項 > 用戶片段

2. 選擇已有代碼片段或創(chuàng)建代碼片段(可以對現(xiàn)有的進(jìn)行修改，也可以新建代碼片段)

代碼片段分兩種：

全局代碼片段(每種語言環(huán)境下都能觸發(fā)代碼塊)。

對應(yīng)語言的局部代碼片段(只能在對應(yīng)語言環(huán)境下才能觸發(fā))，新建全局代碼片段會在 snippets 目錄下生成 .code-snippets 為后綴的配置文件，而新建對應(yīng)語言的代碼片段會生成 對應(yīng)語言 + .json 的配置文件。

下圖是創(chuàng)建代碼塊的開始界面：

如：我們新建一個叫 my-snippets 的代碼片段文件

新建完之后會出現(xiàn)默認(rèn)的示例，看起來是個類似 json 的配置文件。

接下來我們可以在開心的在新建的 my-snippets.code-snippets 文件中設(shè)置我們的代碼片段了。

😀😀😀

二、Snippet 語法

然而創(chuàng)建后的默認(rèn)示例你可能會懵逼，這，都是些啥？ 😳 😳 😳

接下來就用這個默認(rèn)示例講解一下 VSCode 的 Snippet 語法。

// Example:

"Print to console": {

"scope": "javascript,typescript",

"prefix": "log",

"body": [

"console.log('$1');",

"$2"

],

"description": "Log output to console"

}

復(fù)制代碼

Example 下面的 Print to console 對應(yīng)代碼片段名稱(觸發(fā)代碼片段的時候會展示匹配到的代碼片段名稱)。

prefix 對應(yīng)觸發(fā)代碼片段的字符。

body 對應(yīng)代碼片段內(nèi)容，可以是字符串，也可以為數(shù)組，若為數(shù)組每個元素都做為單獨(dú)的一行插入。body 的內(nèi)容支持js的轉(zhuǎn)義字符，如 \n\r 等，我個人不建議用 \n ，可另起一行給數(shù)組多插入一項，不然一行太多的話不容易觀察代碼塊的格式。

description 對應(yīng)代碼片段描述。

1.占位符 $

log 方法中 $ 后面緊跟數(shù)字可指定代碼片段觸發(fā)落入編輯器之后的光標(biāo)位置，光標(biāo)位置按照從小到大排序。 log 方法中當(dāng)你輸入 log + TAB 之后光標(biāo)會默認(rèn)落到 log() 的括號中($1 的位置)，如果此時沒有手動移動光標(biāo)位置，再次按 TAB 則光標(biāo)會落到 console.log() 的第二行( $2 的位置)，當(dāng)然，你也可以設(shè)置 $3、$4 ... 等等。

需要注意的是：

復(fù)制代碼

$0 用于設(shè)置最終光標(biāo)的位置，設(shè)置了 $0 之后，再往后設(shè)置其他占位符則不會生效， $0 終止了 TAB鍵 的光標(biāo)跳轉(zhuǎn)操作。

2.占位內(nèi)容的可選項

"方法注釋": {

"prefix": "zs-Function",

"body": [

"/**",

" * @description description...",

" * @param { ${1|Boolean,Number,String,Object,Array,*|} } name description...",

" * @return { ${2|Boolean,Number,String,Object,Array,*|} } description...",

" */",

"$0"

],

"description": "添加方法注釋"

}

復(fù)制代碼

上面是一個簡單的方法注釋代碼塊，占位符默認(rèn)不帶可選項，如果要設(shè)置占位內(nèi)容的可選項，寫法為 ${1|a,b,c}，括號中的 1 對應(yīng)的是按 TAB 之后的光標(biāo)落點(diǎn)順序， abc 為可選的項，用逗號隔開。所以上面的代碼在輸入 zs + TAB 后第一個光標(biāo)會落在 param name... {} 的大括號中($1 的位置)，如下圖可以看到設(shè)置的可選項。

選擇了參數(shù)類型之后，再次按 TAB , 光標(biāo)會自動落到返回參數(shù)類型處($2 的位置)并彈出可選項。如下所示：

選擇了第二個選項之后，再次按 TAB ,光標(biāo)自動落到我們配置的 $0 處，也就是 */ 的下一行：

需要注意的是：

復(fù)制代碼

如果可選擇內(nèi)容只有一個值的話可以寫成 ${1:default} 的格式。

占位內(nèi)容支持嵌套，比如 ${1:another ${2:placeholder}}。

3.變量

使用 $name 或者 ${name:default} 可以插入變量的值。如果未設(shè)置變量，則會插入其默認(rèn)值或空字符串。當(dāng)變量未知(未定義其名稱)時，會將插入的變量名稱轉(zhuǎn)換為占位符。

VSCode 中可以使用以下變量：

1)文檔相關(guān)：

變量變量含義TM_SELECTED_TEXT當(dāng)前選定的文本或空字符串

TM_CURRENT_LINE當(dāng)前行的內(nèi)容

TM_CURRENT_WORD光標(biāo)下的單詞內(nèi)容或空字符串

TM_LINE_INDEX基于零索引的行號

TM_LINE_NUMBER基于單索引的行號

TM_FILENAME當(dāng)前文檔的文件名

TM_FILENAME_BASE當(dāng)前文檔沒有擴(kuò)展名的文件名

TM_DIRECTORY當(dāng)前文檔的目錄

TM_FILEPATH當(dāng)前文檔的完整文件路徑

CLIPBOARD剪貼板的內(nèi)容

WORKSPACE_NAME已打開的工作空間或文件夾的名稱

2)當(dāng)前日期和時間：

變量變量含義CURRENT_YEAR當(dāng)前年份

CURRENT_YEAR_SHORT當(dāng)前年份的最后兩位數(shù)

CURRENT_MONTH月份為兩位數(shù)(例如'02')

CURRENT_MONTH_NAME月份的全名(例如'June')(中文語言對應(yīng)六月)

CURRENT_MONTH_NAME_SHORT月份的簡稱(例如'Jun')(中文語言對應(yīng)是6月)

CURRENT_DATE這個月的哪一天

CURRENT_DAY_NAME當(dāng)天是星期幾(例如'星期一')

CURRENT_DAY_NAME_SHORT當(dāng)天是星期幾的簡稱(例如'Mon')(中文對應(yīng)周一)

CURRENT_HOUR24小時時鐘格式的當(dāng)前小時

CURRENT_MINUTE當(dāng)前分

CURRENT_SECOND當(dāng)前秒

3)要插入行或塊注釋，請遵循當(dāng)前語言：

變量變量含義BLOCK_COMMENT_START輸出：PHP /*或HTML格式

LINE_COMMENT輸出：PHP //或HTML格式

舉個栗子：

下面的代碼塊是常用的文件頂部添加作者和時間的塊注釋，其中用到了年(CURRENT_YEAR)月(CURRENT_MONTH)日($CURRENT_DATE)的系統(tǒng)變量。

"作者和時間注釋": {

"prefix": "zs-Author & Time",

"body": [

"/**",

" * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",

" */",

"$0"

],

"description": "添加作者和時間注釋"

}

復(fù)制代碼

再舉個栗子：

下面的代碼塊是新建 .Vue 文件的模板代碼塊，其中用到了當(dāng)前文檔沒有擴(kuò)展名的文件名(TM_FILENAME_BASE)，默認(rèn)把文件名填入 name 和 class 中。

"Vue模板": {

"prefix": "vue-template",

"body": [

"",

" ",

" $1",

" ",

"\n",

"

"export default {",

" name: '$TM_FILENAME_BASE',",

" data() {",

" return {\n",

" }",

" },",

" components: {},",

" watch: {},",

" mounted() {},",

" methods: {}",

"}",

"\n",

"

"",

"$0"

],

"description": "Vue模板"

}

復(fù)制代碼

三、結(jié)語

通過占位符和變量組合，各位童鞋可以充分發(fā)揮自己的想象力去設(shè)置自己喜歡的、常用的代碼片段，提高開發(fā)效率和開發(fā)體驗，希望這篇文章能給大家?guī)韼椭?#xff0c;如有錯誤可在評論者提出。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的snippets vscode 配置_VSCode 利用 Snippets 设置超实用的代码块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。