【VSC】Snippets不完全指南

大搜車無線開發中心發表於2019-04-08

原文網址 : https://juejin.im/post/5caab98af265da24e238d9d2

更多文章，參見大搜車技術部落格：blog.souche.com/

大搜車無線開發中心持續招聘中，前端，Nodejs，android 均有 HC，簡歷直接發到：sunxinyu@souche.com

前言

大家都是出來寫程式碼的，少不了要寫上千萬來行程式碼，其中重複性的程式碼佔比又會很大。那麼如何避免一次又一次寫重複性的程式碼這無聊的事情呢？除了程式碼自身的優雅、可複用，Jetbrains系如Intellij IDEA的Live Templates或Visual Studio Code的Snippet等內建工具都能很大程度上幫我們少寫很多重複性的程式碼。下面就vsc的Snippet，結合demo，講講它的用法。

建立Snippet

快捷鍵Cmd + Shift + P或F1開啟命令視窗，輸入snippet，選中配置使用者程式碼片段，這時候會彈出

可以在現有的程式碼片段檔案上新增snippet，也可以自己新建程式碼片段檔案。

Snippets片段以JSON格式定義，官方提供的例子如下

{
    "For_Loop": {
        "prefix": "for",
        
        /**
         * 在全域性程式碼片段檔案新增snippet時，
         * 通過該項來指定該snippet使用範圍，
         * 如下所示，在檔案以`.js`或者`.ts`結尾時可使用該snippet
         */
        "scope": "javascript,typescript",   
        
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}
複製程式碼

For_Loop is the snippet name(後續在指定快捷鍵繫結的時候會用到).
prefix defines how this snippet is selected from IntelliSense and tab completion. In this case for.(字首支援N:1，比如prefix值為["for","fof"],則for和fof對應同一條程式碼片段)
body is the content and either a single string or an array of strings of which each element will be inserted as separate line.
description is the description used in the IntelliSense drop down(非必填).

上述英文解釋引自官方，怕翻譯不到位影響讀者理解，就不作翻譯了。

下面用一張圖展示在使用中各個屬性對應的位置

上圖左側框中的為prefix,右側圈中的為description,description下方的為body部分內容

Snippet語法

Snippet的語法集中在body上。

Tabstops: 即$1、$2。使用$1、$2等表示按下鍵盤tab後游標將要指向的位置。根據數字大小表示先後順序。$0表示游標最後指向的位置。可以存在多個相同的Tabstops，並會同步更新。

以如下snippet為例

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,typescript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\tconst item = $1[$2];$0",
          "}"
        ],
        "description": "For Loop"
    }
}
複製程式碼

以下是使用上述snippet的過程

Placeholders：佔位符。使用者直接跳過Tabstops不輸入新值時，會使用佔位符。它還能內嵌。

以如下snippet為例

{
    "placeholder": {
    "prefix": "ph",
        "body": "${1:hello ${2:world}}$0"
    }
}
複製程式碼

以下是使用上述snippet的過程

Choice: 可選的佔位符

以如下snippet為例

{
    "choice": {
        "prefix": "ch",
        "body": "${1|hello,hi,how are you|}"
    }
}
複製程式碼

輸入ch按下tab鍵後，就會顯示

Variables: 官方定義的變數

    TM_SELECTED_TEXT：當前選定的文字或空字串； 
    TM_CURRENT_LINE：當前行的內容；
    TM_CURRENT_WORD：游標所處單詞或空字串 
    TM_LINE_INDEX：行號（從零開始）；
    TM_LINE_NUMBER：行號（從一開始）；
    TM_FILENAME：當前文件的檔名；
    TM_FILENAME_BASE：當前文件的檔名（不含字尾名）；
    TM_DIRECTORY：當前文件所在目錄；
    TM_FILEPATH：當前文件的完整檔案路徑；
    CLIPBOARD：當前剪貼簿中內容。
    時間相關
    CURRENT_YEAR: 當前年份；
    CURRENT_YEAR_SHORT: 當前年份的後兩位；
    CURRENT_MONTH: 格式化為兩位數字的當前月份，如 02；
    CURRENT_MONTH_NAME: 當前月份的全稱，如 July；
    CURRENT_MONTH_NAME_SHORT: 當前月份的簡稱，如 Jul；
    CURRENT_DATE: 當天月份第幾天；
    CURRENT_DAY_NAME: 當天周幾，如 Monday；
    CURRENT_DAY_NAME_SHORT: 當天周幾的簡稱，如 Mon；
    CURRENT_HOUR: 當前小時（24 小時制）；
    CURRENT_MINUTE: 當前分鐘；
    CURRENT_SECOND: 當前秒數。
    註釋相關
    BLOCK_COMMENT_START: 在PHP中輸出 /* ,在HTML中輸出 <!--
    BLOCK_COMMENT_END: 在PHP中輸出 */ ,在HTML中輸出 -->
    LINE_COMMENT: 在PHP中輸出 // ,在HTML中輸出 <!-- -->
複製程式碼

Variable transforms 變數轉換可將變數的值格式化處理後插入預定的位置。它包括三個部分：

正規表示式
格式字串
正規表示式匹配選項

正規表示式和正規表示式匹配選項不作解釋。

格式字串在官方文件的Grammar中如下

format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
複製程式碼

假設某整體片段為${variable/regexp/(format|text)/options},再結合上述語法，整體片段可變為

${var_name/regular_expression/$1/options}
${var_name/regular_expression/${1}/options}
${var_name/regular_expression/${1:/upcase}/options} // /downcase和/capitalize使用方式同/upcase
${var_name/regular_expression/${1:+if}/options}
${var_name/regular_expression/${1:?if:else}/options}
${var_name/regular_expression/${1:-else}/options}
${var_name/regular_expression/${1:else}/options}
${var_name/regular_expression/text/options}

上述format中$後的數字1表示分組捕獲組（正規表示式中()匹配到的陣列）的第1項，同理$2表示分組捕獲想第2項。

現有檔名global-js.json，以demo說明上述含義。為了精簡，輸出值直接以body末尾註釋表示，另外多個body直接放在一個snippet（實際操作不規範，僅僅為了精簡）

其中1、2相同

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global).*/$1/}"    // 輸出: global
}
複製程式碼

3表示對匹配到項轉化成大寫，或小寫，或首字母大寫

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global).*/${1:/upcase}/}"  // 輸出: GLOBAL
}
複製程式碼

4表示匹配成功時，將if所述語句完全替換正規表示式匹配項。

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global)/${1:+if}/}",   //輸出: if-js
    "body": "${TM_FILENAME_BASE/(global).*/${1:+if}/}"   //輸出: if
}
複製程式碼

5表示匹配成功，且分組捕獲成功時，將if所述語句完全替換正規表示式匹配項；

匹配成功，且分組捕獲失敗時，將else所述語句完全替換正規表示式匹配項；

匹配失敗時，else所述語句即為處理後的變數

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global)/${1:?if:else}/}",   //輸出: if-js
    "body": "${TM_FILENAME_BASE/global/${1:?if:else}/}",   //輸出: else-js
    "body": "${TM_FILENAME_BASE/(globald)/${1:?if:else}/}",   //輸出: else
}
複製程式碼

6同7,表示匹配成功，且分組捕獲（正規表示式中()匹配到的項）成功時，不變；

匹配成功，且分組捕獲失敗時，將else所述語句完全替換正規表示式匹配項；

匹配失敗時，else所述語句即為處理後的變數

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global)/${1:else}/}",   //輸出: global-js
    "body": "${TM_FILENAME_BASE/global/${1:else}/}",   //輸出: else-js
}
複製程式碼

8表示匹配成功時，將text完全替換正規表示式匹配項；匹配失敗時，不變

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "${TM_FILENAME_BASE/(global)/text/}",   //輸出: text-js
}
複製程式碼

Placeholder Transform 本質與Variable Transform的第8條一致，只是正規表示式變為佔位符常量

程式碼片段
"transform": {
    "prefix": "tr",
    "body": "$1 -> ${1/placeholder/text/}",   //輸入: placeholder 輸出: placeholder -> text
}
複製程式碼

快捷鍵匯入snippet

首先開啟keybindings.json

然後可以新增如下

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)$0"
  }
}
複製程式碼

亦或者匯入已有的snippet

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp", // 語言包，如javascript，typescript
    "name": "myFavSnippet"  // 對應最開始提過的name，如下面使用場景的`import snippet`
  }
}
複製程式碼

使用場景

用snippet寫snippet

 "import snipppet": {
    "prefix": "sni",
    "body": ["\"$1\": {", "\t\"prefix\": \"$2\",", "\t\"body\": [\"$3\"]", "}"]
  },
複製程式碼

加個可選的description

"snipppet": {
    "prefix": "sni",
    "body": [
      "\"$1\": {",
      "\t\"prefix\": \"$2\",",
      "\t\"body\": [\"$3\"]${4:,\n\t\"description\":\"${5}\"}",
      "}"
    ]
  }
複製程式碼

某些固定格式的陣列物件

如某個陣列長度較大的物件{title:'input',dataIndex:'input'}，該陣列中物件的每個title或dataIndex不盡相同，則可以寫個臨時snippet，直接生成該結構。

"templates": {
    "prefix": "tem",
    "body": [",{dataIndex:$1,", "title:$2}"],
    "description": ""
}
複製程式碼

某些固定內容的檔案或者某些常用的import組合

"muji store file": {
    "prefix": "store",
    "body": [
      "import { createStore } from '@souche-f2e/muji'",
      "",
      "type IState = {",
      "",
      "}",
      "const state: IState = {",
      "",
      "}",
      "const store = createStore({",
      "  state,",
      "  reducers: {",
      "   ",
      "  },",
      "  effects: {",
      "   ",
      "  },",
      "})",
      "export default store"
    ]
  },
複製程式碼

muji react 下的pages檔案

"index.tsx under pages": {
    "prefix": "ind",
    "scope": "typescriptreact",
    "body": [
      "import React, { Component } from 'react'",
      "import { dispatch, IRootState } from '@@/store'",
      "import { connect } from '@souche-f2e/muji'",
      "const mapStateToProps = (state: IRootState) => state.${1/(.*)/${1:/downcase}/}",
      "",
      "interface I$1Props extends ReturnType<typeof mapStateToProps> {",
      "  ",
      "}",
      "interface I${1}State {",
      "",
      "}",
      "class $1 extends Component<I${1}Props, I${1}State> {",
      "  render() {",
      "    return ${3:null}",
      "  }",
      "}",

      "export default connect(mapStateToProps)($1)"
    ]
  }
複製程式碼

只需要輸入元件名，就可以一次性生成必備的格式。

tree-shaking不完全指南
2019-03-03
MySQL 不完全入門指南
2021-08-18
MySql
遊戲音訊不完全指南
2020-03-12
遊戲音訊
前端優秀實踐不完全指南
2021-02-24
前端
snippets for c code
2020-11-30
Mate X時代的不完全生活指南
2019-02-25
狀態管理框架開發不完全指南
2019-04-28
框架
重複程式碼的剋星，高效工具 VSCode snippets 的使用指南
2021-03-01
VSCode
阿里巴巴實習生招聘不完全指南
2019-11-05
阿里
新時代創意佈局不完全指南
2021-05-27
Sublime 的 Snippets 快捷片段
2019-01-10
微信硬體JS-Api開發不完全指南
2019-02-16
JSAPI
vsc練習問題記錄
2024-03-17
Chrome開發者工具不完全指南（四、效能進階篇）
2024-10-17
Chrome
flutter不完全指南系列--（一）flutter特點及學習建議
2019-10-21
Flutter
人體調優不完全指南「GitHub 熱點速覽 v.22.22」
2022-05-30
Github
vsc 如何除錯遠端python程式碼
2024-03-05
除錯Python
精讀《react-snippets - Router 原始碼》
2022-05-23
React原始碼
1 Port GbE Cu PHY with SyncE, (R/G/RG)MII[VSC8541XMV-02][VSC8541XMV-05]乙太網
2024-02-01
flutter不完全指南系列--（二）dart詳解（前端角度的兩萬字解析）
2019-10-22
FlutterDart前端
Vue專案從webpack3.x升級webpack4不完全指南
2019-04-28
VueWeb
VSCode JavaScript snippets for Dynamics 365/CRM 2011/2013/2015/2016
2018-12-19
VSCodeJavaScript
Trick 不完全整理
2024-11-29
個人安裝的 Cypress 在 VSC 下外掛列表
2020-06-20
在Java中反轉字串的10種方法[Snippets]
2018-11-22
Java字串
oracle sqldeveloper下自定義Snippets檔案的替換
2018-08-08
OracleSQLDeveloper
跨域不完全探究
2018-12-02
跨域
Oracle 不完全恢復
2021-02-03
Oracle
乙太網晶片的配置：VSC8601和YT8531
2024-03-27
晶片
Performance API不完全使用指北
2023-02-06
ORMAPI
webpack效能優化不完全指北
2018-09-09
Web優化
spring全家桶註解(不完全)
2024-04-30
Spring
[20191213]不完全恢復疑問.txt
2019-12-13
msf stagers開發不完全指北(二)
2020-06-28
Service Worker （Web）推送不完全實踐
2022-11-27
Web
Sqlalchemy非同步操作不完全指北
2022-04-10
SQL非同步
Go 1.16 新功能特性不完全前瞻
2020-12-12
Go
git log提交歷史顯示不完全
2018-06-13
Git

【VSC】Snippets不完全指南

前言

建立Snippet

Snippet語法

快捷鍵匯入snippet

使用場景

相關文章