瞭解VSCode中的snippets，看看怎麼提高開發效率！

如何把vscode snippets用在專案中提高開發效率？下面本篇文章帶大家瞭解一下中的snippets，介紹一下使用它提高專案開發效率的方法，希望對大家有所幫助！

code snippets 是程式碼片段的意思，是 vscode 提供的根據某字串快速補全一段程式碼的功能，可以提高寫程式碼的效率。【推薦學習：《》】

vscode 的 snippets 是可以隨專案共用的，多人開發一個專案的時候，可以維護專案級別的 snippets 並且通過 git 共用，來提高專案開發效率。

下面我們來詳細瞭解下 snippets。

snippets 的功能

snippets 設定的格式如下：

{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

prefix 是觸發 snippets 的字首，可以通過陣列指定多個
body 是填入到編輯器的內容
description 是 snippets 的描述

其中 body 部分可以通過 ${} 的方式指定遊標位置、順序、佔位字串、可用的值等，有 5 種語法，我們分別來看一下：

遊標跳轉： $1$ 1 2

可以通過 $1、$ 2 指定遊標位置，當填入 snippets 的內容之後，遊標會設定到 $1 的位置來編輯，當編輯完，可以通過 tab 來跳到$ 2。

比如這段設定：

{
 "測試": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "$1  xxxx",
   "yyyy $2",
  ],
  "description": "遊標跳轉"
 }
}

效果為：

還有當有多個 $1、$ 2 等，編輯一處其他內容也會同步修改，也就是 vscode 的多遊標編輯。

比如：

{
 "測試": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "$1  xxxx $1",
  ],
  "description": "多遊標"
 }
}

效果為：

通過這種功能可以快速編輯 snippets 中的可編輯內容。

預留位置：${1: placeholder}

只是遊標跳轉雖然可以快速編輯內容，但是不知道編輯的部分是什麼，所以 snippets 支援了設定 placeholder 的值，預設會選中該段文字，輸入內容即可覆蓋。

比如：

{
 "測試": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "${1:aaa}  xxxx",
   "yyyy ${2:bbb}",
  ],
  "description": "遊標跳轉"
 }
}

效果為：

可選值：${1|text1,text2,text3|}

預留位置的方式就像 input 標籤加了個 placeholder 屬性，還是要手動輸入，當可編輯區域是有幾個可選的值的話，就要換成下拉選擇，在 snippets 裡就是通過 ${1|text1,text2,text3|} 的方式支援，在 | 和 | 之間填入通過 , 分割的多個選項。

比如：

{
 "測試": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
  "${1|神說要有光,卡頌|}"
  ],
  "description": "可選值"
 }
}

效果為：

變數：$變數名

在模版可編輯位置填入內容的時候，有的時候需要用到選中的值、剪貼簿的值、檔名、日期等，這些資訊通過 snippets 中支援的變數來取。

比如：

TM_FILENAME: 檔名
TM_CURRENT_LINE: 當前行的內容
CLIPBOARD: 剪貼簿內容
WORKSPACE_NAME：workspace 的名字
WORKSPACE_PATH：workspace 的路徑
CURRENT_YEAR：當前年
CURRENT_MONTH：當前月
CURRENT_DATE：當前日
RANDOM: 亂數
RANDOM_HEX: 6 位隨機 16 進位制數
UUID: 唯一 id

可以取這些變數的值來填入到遊標位置，方式就是使用 $TM\_FILENAME、$ CURRENT_YEAR 的方式。

比如：

{
 "測試": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
  "當前檔案： $TM_FILENAME",
  "當前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
  ],
  "description": "變數"
 }
}

效果為：

變數轉換：${變數名/匹配的正則/替換到的字串/匹配模式}

支援了變數的填入還不行，因為有的變數的內容不合適，需要做一些字串替換，所以 snippets 支援了 transform 的功能。

比如 abc-123.js 的檔案，

我們通過 $TM_FILENAME 取到檔名，然後把字尾去掉轉成大寫填入

${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}複製程式碼

對檔名 TM_FILENAME 做正則匹配 (.*).[a-z]+，把分組一變成大寫之後返回，匹配模式為忽略大小寫（ignore）。

{
    "填入檔名": {
            "scope": "javascript,typescript",
            "prefix": "filename",
            "body": [
                    "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
            ],
            "description": "檔名"
    }
}

我們實驗下效果：

可以看到，正確的取到了檔名，並且去掉字尾轉成大寫填入了。

知道了 snippets 的功能，那麼怎麼設定 snippets 呢？snippets 在什麼範圍內生效呢？

snippets 的範圍

command + shift + p 開啟命令面板，輸入 snippet，選擇 configure user snippets：

可以選擇建立全域性的、專案範圍的、語言範圍的 snippets：

分別會開啟不同位置的檔案來新增 snippets。

語言級別的 snippets 是對於特定語言才生效，這個還可以封裝成外掛。在外掛的 package.json 中設定下即可：

{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets.json"
      }
    ]
  }
}

專案範圍的 snippets 是在專案根目錄的 .vscode/xxx.code-snippets 下面新增的，vscode 啟動的時候會讀取這些檔案，然後使之在專案範圍內生效。

當有一些專案級別的程式碼片段可以共用的時候，完全把這個檔案提交到遠端 git 倉庫，然後專案成員都可以共用這些 snippets 設定。對於一些模版程式碼比較多的專案，還是比較有意義的。

總結

snippets 是 vscode 提供的用於提高開發效率的一些快速輸入程式碼片段的功能，支援遊標位置的跳轉、多遊標同時編輯、預留位置、可選值、變數、變數轉換等功能，靈活運用這些功能，可以作出易用的提高開發效率的 snippets。

snippets 有 global、language、project 3 種生效範圍：global 是全域性的設定；language 是語言級別的設定，可以進一步封裝成外掛共用；project 則是專案範圍內的，在 .vscode 下的 xx.code-snippets 中，完全可以提交到 git 倉庫，和其他成員共用。

靈活運用 snippets 功能，是可以提高開發效率的，而且這個也是可以專案級別共用的。希望這篇文章能夠幫大家瞭解 snippets。

原文地址：https://juejin.cn/post/7005878164517814280
作者：zxg_神說要有光

更多程式設計相關知識，請存取：！！

以上就是了解VSCode中的snippets，看看怎麼提高開發效率！的詳細內容，更多請關注TW511.COM其它相關文章！