VSCode中怎么定義代碼片段？下面本篇文章給大家介紹一下給VSCode定義代碼片段的方法，讓coding速度快到飛起，希望對(duì)大家有所幫助！

代碼片段可以理解為模板，當(dāng)我們輸入指定時(shí)，按下【tab】或者【enter】即可出現(xiàn)對(duì)應(yīng)的模板?！就扑]學(xué)習(xí)：《vscode入門教程》】

只要代碼片段寫的好，升職加薪少不了~

代碼片段的好處與壞處

coder對(duì)代碼片段的評(píng)價(jià)褒貶不一，下面這張圖解釋了代碼片段的好處與壞處：

何時(shí)使用代碼片段

關(guān)于什么時(shí)候使用代碼片段，我的建議是：

• 當(dāng)你對(duì)一個(gè)東西足夠熟練，例如console.log()，這個(gè)時(shí)候可以為其設(shè)置代碼片段。
• 有些東西特別繁瑣，每次都需要寫一遍，例如Vue單文件中的初步定義的內(nèi)容。

當(dāng)然，上面的內(nèi)容僅僅是我的建議。

如何設(shè)置代碼片段

首先你準(zhǔn)備一個(gè)VSCode，然后確定你操作系統(tǒng)，然后開始操作：

• Windows系統(tǒng):【 文件】→【首選項(xiàng)】→【用戶片段】
• Mac系統(tǒng): 【Code】→【首選項(xiàng)】→【用戶片段】

然后你就可以看到下面這個(gè)內(nèi)容

然后你就可以對(duì)現(xiàn)有的代碼片段進(jìn)行修改，或者創(chuàng)建一個(gè)新的代碼片段，這里我們創(chuàng)建一個(gè)名為test-snippets的全局代碼片段，來進(jìn)行演示。

代碼片段語法

我們創(chuàng)建完成以后，會(huì)出現(xiàn)一個(gè)類似于JSON的語法，內(nèi)容如下：

{   // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope    // is left empty or omitted, the snippet gets applied to all languages. 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": {   //   "scope": "javascript,typescript",   //   "prefix": "log",   //   "body": [   //     "console.log('$1');",   //     "$2"   //   ],   //   "description": "Log output to console"   // } }

接下來我們對(duì)VSCode中的代碼片段語法進(jìn)行學(xué)習(xí)。

首先中的內(nèi)容是被一個(gè)對(duì)象進(jìn)行包裹，對(duì)象中的每一個(gè)屬性表示一個(gè)代碼片段，屬性名為代碼片段的名稱，在觸發(fā)代碼片段的時(shí)候會(huì)展示匹配到的代碼片段名稱，例子中的屬性名稱為Print to console。

接下來我們學(xué)習(xí)代碼片段內(nèi)每個(gè)屬性是干什么的。

• scope：表示代碼片段作用于哪種語言。 不同語言之間以,隔開。 常用的有javascript, typescript,html,css,vue等。 如果設(shè)置為""就代表所有地方都生效。
• prefix：對(duì)應(yīng)觸發(fā)代碼片段的字符。
• description：代碼片段的描述。
• body：對(duì)象代碼片段的內(nèi)容，通常為一個(gè)數(shù)組，數(shù)組內(nèi)的一行對(duì)應(yīng)生成代碼片段后的一行。

推薦一個(gè)用于生成代碼片段的網(wǎng)站，鏈接如下：https://snippet-generator.app/

$占位符

上面的例子中，我們輸入log按下【tab】鍵即可出現(xiàn)如下代碼：

console.log();

出現(xiàn)這段內(nèi)容后，光標(biāo)在()內(nèi)，然后按下【tab】鍵，光標(biāo)即可調(diào)到下一行，也就是$2的位置，同樣的道理，我們還可以設(shè)置$3、$4 等等

值得注意的是：$0用于設(shè)置最終光標(biāo)的位置。

默認(rèn)與可選項(xiàng)

如果想讓占位符中具有一個(gè)默認(rèn)值，可以通過${1:defalt}的形式來編寫。

如果行提供一些選項(xiàng)，可以通過${1|one,two,three|}的形式來編寫，例如：

{   "import": {     "scope": "javascript,typescript",     "prefix": "import",     "body": [       "import { $2 } from "${1|axios,lodash,day|}"",       "$3"     ],     "description": "導(dǎo)入模塊"   } }

測(cè)試如下：

然后按下【tab】后如下圖

常量

在代碼片段中，VSCode為我們提供了一些常量，使用方式也比較簡(jiǎn)單，例如$TM_FILENAME。

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)前文檔的文件名（不含后綴名) TM_DIRECTORY           當(dāng)前文檔的目錄 TM_FILEPATH            當(dāng)前文檔的完整文件路徑 CLIPBOARD              剪切板里的內(nèi)容 WORKSPACE_NAME         已打開的工作空間或文件夾的名稱  CURRENT_YEAR           當(dāng)前年(四位數(shù)) CURRENT_MONTH          當(dāng)前月 CURRENT_DATE           當(dāng)前日 CURRENT_DAY_NAME_SHORT 當(dāng)天的短名稱（’Mon’） CURRENT_HOUR           當(dāng)前小時(shí) CURRENT_MINUTE         當(dāng)前分鐘 CURRENT_SECOND         當(dāng)前秒  BLOCK_COMMENT_START   塊注釋開始標(biāo)識(shí),如 PHP /* 或 HTML <!-- BLOCK_COMMENT_END     塊注釋結(jié)束標(biāo)識(shí),如 PHP */ 或 HTML --> LINE_COMMENT          行注釋，如： PHP // 或 HTML <!-- -->

為項(xiàng)目創(chuàng)建代碼片段

有些時(shí)候我們需要為具體的項(xiàng)目創(chuàng)建一些代碼片段，其實(shí)也比較簡(jiǎn)單，我們只需要在當(dāng)前項(xiàng)目的根目錄創(chuàng)建一個(gè).vscode文件夾，然后創(chuàng)建以.code-snippets的結(jié)尾的文件即可，寫法與上面一致。

寫在最后

這里我創(chuàng)建了一個(gè)GitHub倉庫，放一些VSCode中的代碼片段，倉庫地址如下：https://github.com/ywanzhou/vscode-snippets

都看到這了，還不點(diǎn)贊支持一下~