詳解VSCode中怎么使用代碼模板（snippets）

vscode中怎么使用代碼模板（snippets）？下面本篇文章給大家介紹一下vscode中snippets的使用方法，用以提升開發效率，希望對大家有所幫助！

有時在使用vscode進行前端編碼時總會有一些代碼段是需要重復編寫的，這時使用一些代碼模板（snippets），通過規定的字符序列觸發snippets，快速地輸入一段預設的代碼模板會使編碼效率提高。【推薦學習：《vscode》】

內置Snippets

VSCode中本身也自帶一些 snippets ，典型的就是JavaScript中的for

如果要查看內置的代碼模板有哪些，可以通過Command Palette查看：

點擊左下角的齒輪圖案，然后找到Command Palette選項（或者使用快捷鍵Ctrl + Shift + P），在VSCode窗口上方出現的搜索框輸入Insert Snippets即可查看到

要通過Insert Snippets命令查看一個語言的 snippets 時，必須滿足當前編輯的語言為snippet對應的語言的條件，才能找到對應語言的 snippets 。比如如果要找到 JavaScript 的 snippets ，當前打開的文件是.html類型的，那么如果當前編輯位置為<script>內部，輸入Insert Snippets就可以找到 JavaScript 的snippet；或者當前編輯的文件是.js，輸入Insert Snippets也可以找到 JavaScript 的 snippets 。這是因為<strong>snippets是有作用范圍的（<strong>snippet scope），snippet的作用范圍要么是某個（些）語言，要么是某個（些）項目，這個不在這里做贅述，詳細信息可見<a href="https://www.php.cn/tool/vscode/" target="_blank">vscode</script>

這些配置文件所在目錄為： esourcesppextensionssnippets

下載Snippets

這里的下載是指下載帶有 snippets 的插件，可以在VSCode的插件市場搜索@category:”snippets”

自定義Snippets

這里以CSS代碼為例：在進行簡單的前端頁面布局前，一般會將標簽元素自帶的內外邊距統一清除，所以以下代碼塊是很經常用到的

*?{ ????margin:?0; ????padding:?0; }

為此我想為它配置一個 snippet ，這里需要找到 CSS snippet 的配置文件：找到VSCode左下角的齒輪圖標，查找菜單中的“User Snippets”選項，選擇 CSS （或者頂部菜單File > Prenferences > User Snippets）

打開了一個css.json文件后，可以看到有一大段注釋，認真讀懂注釋并按照規定輸入就可以配置出自己的代碼模板了，先不說規則細節，先實現一下上述提到的清除內外邊距的CSS樣式

按照注釋提示，添加以下內容并保存

"Clear?all?elements'?margin?and?padding":?{ ????"prefix":?"cmp", ????"body":?[ ????????"*?{", ????????"	margin:?0;", ????????"	padding:?0;$0", ????????"}" ????], ????"description":?"Clear?all?HTML?elements'?default?margin?and?padding" }

prefix表示觸發代碼段的文本，所以需要通過輸入cmp觸發，效果如下

snippets 配置規則

當打開用戶snippets的配置文件時，總能看到一段注釋，根據這段注釋一般就可以寫出自己的 snippet 了，接下來基于這段注釋的內容展示如何寫一個 snippet（更多配置方式可以參考vscode）

//?Place?your?snippets?for?css?here.?Each?snippet?is?defined?under?a?snippet?name?and?has?a?prefix,?body?and? //?description.?The?prefix?is?what?is?used?to?trigger?the?snippet?and?the?body?will?be?expanded?and?inserted.?Possible?variables?are: //?$1,?$2?for?tab?stops,?$0?for?the?final?cursor?position,?and?${1:label},?${2:another}?for?placeholders.?Placeholders?with?the? //?same?ids?are?connected. //?Example: //?"Print?to?console":?{ //?"prefix":?"log", //?"body":?[ //???"console.log('$1');", //???"$2" //?], //?"description":?"Log?output?to?console" //?}

配置文件類型

snippet 的配置文件是 JSON 文件，允許使用C語言風格的注釋，允許定義不限定數量的 snippet

基本結構

單個snippet的配置基本結構如下：

//?尖括號包含內容表示自定義內容 "<snippet>":?{ ????"prefix":?"<triggertext>", ????//?如果模板有多行，應該用字符串數組賦值，一個元素代表一行內容 ????"body":?"<template>", ????"description":?"<description>" }</description></template></triggertext></snippet>

多個配置之間用逗號分隔（不能有多余逗號）

首先一個 snippet 配置要指定該一個名稱，然后給這個項賦值一個對象 對象中包含三個部分：prefix、body、description

• prefix是指定用于觸發snippet的文本，比如上述配置的清除元素內外邊距的 snippet ，使用的prefix是cmp（clear margin and padding）。這個可以根據自己的喜好配置，主要是要好記，畢竟配置snippet就是為了提高編碼效率

• body是指定代碼模板內容，這里可以賦值為單個字符串或者一個字符串數組。當模板只有一行內容或者只有一行代碼時，可以直接把這行代碼作為字符串賦值給body。比如如果想要快速打印console.log(“hello”)這一句，則可以配置：

  "Print?Hello?to?console":?{ ????"prefix":?"hello", ????"body":?"console.log('Hello');",?//?直接賦值語句字符串 ????"description":?"Print?Hello?to?console" }

  如果模板是多行內容，那么則需要用一個字符串數組來賦值（如上述CSS的例子），其中一個元素代表一行內容。其中的空白字符可以使用轉義字符（如上述CSS的例子），并且如果直接應用空白字符，只有空格可以應用（不可以直接應用制表符）

• description是指定描述該snippet的作用或者模板內容的字段，它的內容會出現在相關的提醒中

特殊結構的使用

body部分的內容可以使用一些特殊結構來控制光標位置和插入的文本。以下介紹一下配置文件中默認注釋提到的tabstops和placeholders

tabstops

當輸出一個 snippet 時，如果 snippet 的body定義了tabstops，那么可以通過Tab鍵來使光標位置跳到特定位置，方便修改生成的模板

tabstops用$0, $1, $2, ……標識，數字表示被訪問的順序，而$0標識的是最后到達的光標位置，并且相同數字的tabstops是相關聯的（也就是說會有多個光標同時在多個相關聯的位置）

看下述例子：

//?添加到JavaScript的snippets配置文件中 "Test?tabstops":?{ ????"prefix":?"tts", ????"body":?"$0two($2);one($1);three($3);one($1)", ????"description":?"a?test?for?tabstops" }

以上這個例子剛開始時會有兩個光標分別在兩個one()的括號內；然后按一次Tab后，會有一個光標在two()括號內；第二次按Tab后，光標會在three()括號內；再按一次Tab，光標會跑到這行代碼最前面，因為$0標識光標最后到達的位置（這里如果不設定$0會默認到達body內容的最后的位置，在這里就是生成的那行代碼的末尾）

至此應該就可以理解tabstops這個稱呼的含義了，其實就是“按tab后光標停止的地方” 另外可以按Shift+Tab退回上一個tabstops的位置，但要注意的是如果到達了$0，也就是snippet中光標的最后位置后還進行了其他操作（包括按Tab），就無法回退到上一個tabstops的位置了

placeholders

placeholders就是帶值的tabstops，其中的值會作為默認文本插入代碼并被選中，這樣就可以方便地在需要時修改代碼模板的默認內容了

最典型的例子就是文章開頭內置的那個for循環JS snippet，這里我稍微復現一下來舉個例子

"Test?placeholders":?{ ????"prefix":?"flt", ????"body":?[ ????????"for(let?${1:index}?=?0;?${1:index}?<p>剛開始時，有多個選中的index，此時可以同時修改全部index為想要的內容；接著按一次tab，同時選中所有的array，這時也可以同時修改所有選中內容；按第二次tab就選中了element；按第三次，就到達了const；再按一次就到了最后的位置$0（這里如果不設定$0會默認到達body內容的最后的位置，在這里就是右花括號的后面）</p><p><img src="https://img.php.cn/upload/image/834/664/580/1645701515642998.gif" title="1645701515642998.gif" alt="8.gif"></p><p>snippet語法允許使用的特殊結構不止以上的tabstops和palceholders的配置，還有其他的</p><blockquote>詳情參考這里：https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax</blockquote><p>文章源碼：<a href="https://www.php.cn/tool/vscode/" target="_blank">vscode</a></p><p>更多關于VSCode的相關知識，請訪問：<a href="https://www.php.cn/tool/vscode/" target="_blank">vscode</a>！！</p>