一、起步

1.如何設(shè)置

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

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

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

代碼片段分兩種：

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

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

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

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

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

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

😀😀😀

二、Snippet 語法

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

接下來就用這個(gè)默認(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 對(duì)應(yīng)代碼片段名稱(觸發(fā)代碼片段的時(shí)候會(huì)展示匹配到的代碼片段名稱)。

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

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

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

1.占位符 $

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

需要注意的是：

復(fù)制代碼

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

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

"方法注釋": {

"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ù)制代碼

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

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

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

需要注意的是：

復(fù)制代碼

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

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

3.變量

使用 $name 或者 ${name:default} 可以插入變量的值。如果未設(shè)置變量，則會(huì)插入其默認(rèn)值或空字符串。當(dāng)變量未知(未定義其名稱)時(shí)，會(huì)將插入的變量名稱轉(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基于零索引的行號(hào)

TM_LINE_NUMBER基于單索引的行號(hào)

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)前日期和時(shí)間：

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

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

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

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

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

CURRENT_DATE這個(gè)月的哪一天

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

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

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

CURRENT_MINUTE當(dāng)前分

CURRENT_SECOND當(dāng)前秒

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

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

LINE_COMMENT輸出：PHP //或HTML格式

舉個(gè)栗子：

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

"作者和時(shí)間注釋": {

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

"body": [

"/**",

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

" */",

"$0"

],

"description": "添加作者和時(shí)間注釋"

}

復(fù)制代碼

再舉個(gè)栗子：

下面的代碼塊是新建 .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ā)體驗(yàn)，希望這篇文章能給大家?guī)韼椭?#xff0c;如有錯(cuò)誤可在評(píng)論者提出。

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

總結(jié)

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

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