本篇文章帶大家了解一下VSCode中的代碼片段，介紹一下代碼塊種類，以及自定義代碼片段的方法，希望對大家有所幫助！

一、前言

較為全的指南：

《VS Code 代碼片段完全入門指南》

https://chinese.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/

一鍵生成代碼塊工具：https://snippet-generator.app/

Windows系統: 文件 > 首選項 > 用戶代碼片段 Mac系統: Code > 首選項 > 用戶片段

二、創建

代碼塊種類

• 全局代碼片段（每種語言環境下都能觸發代碼塊）：新建全局代碼片段會在 snippets 目錄下生成 .code-snippets 為后綴的配置文件；【推薦學習：《vscode入門教程》】

• 針對特定語言類型（只能在對應語言環境下才能觸發）：而新建對應語言的代碼片段會生成 對應語言 + .json 的配置文件；

• 為某一工作區（項目）創建的代碼塊；

新建

輸入 react 自動創建一個 react.code-snippets 文件，全局創建則在本機文檔目錄，項目創建則在項目目錄內；

{   // 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"   // } }

創建了一個 dva 的模版：

{   // 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"   // }    // dva 基礎布局結構   "dva-basic": {     "prefix": "lll_dva_basic",     "body": [       "import { Effect, Reducer, Subscription } from 'umi';",       "",       "export interface ${1:xxxxModelType} {",       "  namespace: '${2:xxxx}';",       "  state: ${3:IxxxxModelState};",       "  effects: {",       "    initDataEffect: Effect;",       "  };",       "  reducers: {",       "    updateState: Reducer<${3:IxxxxModelState}>;",       "  };",       "  subscriptions: { setup: Subscription };",       "}",       "",       "export interface ${3:IxxxxModelState} {",       "  ${4:textData}: any;",       "}",       "",       "const state: ${3:IxxxxModelState} = {",       "  ${4:textData}: null,",       "};",       "",       "const QualificationSetting: ${1:xxxxModelType} = {",       "  namespace: '${2:xxxx}',",       "  state: state,",       "",       "  effects: {",       "    // 初始化數據",       "    *initDataEffect({ payload }, { select, call, put }) {",       "      try {",       "      } catch (error) {}",       "    },",       "  },",       "",       "  reducers: {",       "    updateState(state, { data }) {",       "      return { ...state, ...data };",       "    },",       "  },",       "",       "  subscriptions: {",       "    setup({ dispatch, history }) {",       "      return history.listen(({ pathname }) => {",       "        if (pathname === '/') {",       "          // 初始化數據",       "          dispatch({ type: 'initDataEffect' });",       "        }",       "      });",       "    },",       "  },",       "};",       "",       "export default QualificationSetting;",       ""     ],     "description": "dva-basic"   }? }

字段解釋

• "dva-basic" 是代碼片段的名字。如果沒有 description，它就會出現在智能建議的列表里。

• prefix 屬性定義了代碼片段的觸發文本。它可以是一個字符串或者一個字符串數組（如果你想有多個觸發文本）。前綴的子字符串同樣可以觸發，在我們的例子里，輸入"h1"一樣能匹配到我們的代碼片段。

• body 屬性代表了要插入編輯器的內容。它是一個字符串數組，可能一行或者多行。在插入之前會被合并成一段。

• description 屬性提供了代碼片段的