背景

從臃腫的 Webstorm 轉(zhuǎn)向更加輕便的微軟爸爸的 VS code 也有一段時間了
總的來說，VS code 更加輕巧，可拓展性更強，同時它又是 Typescript 寫的，根正苗紅，又背靠微軟這顆大樹，插件生態(tài)又很不錯，用得還是很舒服的
但是，有一個我用得很不習(xí)慣的就是生成代碼快捷 VS code 一開始是不支持的，而 Webstorm 是內(nèi)置很多代碼快捷拓展段的，例如：

• JS 文件中：輸入 c + Tab 鍵會快速生成 console.log()
• CSS 文件中：輸入 bd+ + Tab 鍵會快速生成 border:1px solid #000;
  ...

VS code 中設(shè)置代碼快捷拓展段

VS code 輕巧一大原因就是舍棄了很多配置，丟給開發(fā)者的就是如同一張白紙的編譯器：“想讓我給你配置花里胡哨的功能？你配嗎？”，所以 VS code 內(nèi)部有大量的 JSON 配置文件讓開發(fā)者自己配置，自己動手，豐衣足食！
那么，不多 BB ，設(shè)置代碼快捷拓展段：

1. 點擊 VS code 左下角的小齒輪，再選擇 "User Snippets" (用戶代碼段) 選項

   
   
2. 這時候會出現(xiàn)大量的可設(shè)置文件：javascript.json、css.json、html.json...這些都是可以配置的 JSON 文件
   
3. 這里以 javascript.json 為例，點開 javascript.json：

{
    // Place your snippets for javascript 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": "c",
        "body": [
            "console.log($0);",
        ],
        "description": "Console 快捷鍵"
  }
}

其實 VS code 已經(jīng)將配置的詳解在注釋中解釋了：

把你的javascript代碼片段放在這里
每個代碼段都以代碼段名稱定義，并具有前綴、正文和描述。前綴是用來觸發(fā)代碼段的，主體將被展開和插入
可能的變量為：$1，$2制表位，$0用于最后的光標(biāo)位置

我自己配置了一個快捷選項：

• "Print to console"：快捷選項的名稱
• "prefix"：前綴，在 JS 文件中輸入前綴 + Tab 鍵就會自動拓展出"body" 中的內(nèi)容
• "body"：正文，即拓展內(nèi)容， body 是一個數(shù)組，即可以通過一個小小的前綴拓展出一個很大的代碼段
• "description"：描述，當(dāng)你在 JS 輸入前綴的時候，這時候會出現(xiàn)代碼提示框，這時候框中就會出現(xiàn)"description"的內(nèi)容
• $0,$1,$2：這些符號不會最終出現(xiàn)在拓展代碼中，你可以將它們理解為占位符
  $0 是最后光標(biāo)的位置，默認(rèn)代碼拓展后，光標(biāo)在語句的尾部，但是在 "body" 中插入 $0 ，會改變光標(biāo)的位置，在上面的例子中，"console.log($0);"，最后光標(biāo)會直接出現(xiàn)在小括號中，我們就可以直接在其中編輯我們要打印的語句了
  $1,$2用法其實類似 $0 ，你可以理解為 Tab 占位符， 如果是這樣的正文："$2cons$1ole.log($0);"。那么代碼拓展后光標(biāo)會出現(xiàn)在$1 的位置($1 光標(biāo)占位優(yōu)先級比 $0，$2 高)，然后你按下 Tab 鍵會跳到 $2 的位置，再按下 Tab 鍵，會跳到 $0 的位置
  就是這么神奇，其實我覺得一般的拓展會使用 $0 就夠了

拋磚引磚

我剛剛上面簡述了一下設(shè)置 JS 的代碼快捷拓展，其實寫 CSS 如果可以快速拓展代碼，也能省下很多時間：
打開 css.json :

  "Print to border": {
    "prefix": "bd",
    "body": [
      "border:1px solid #000;",
    ],
    "description": "快速設(shè)置 border"
  }

這樣輸入：bd + Tab 鍵就能快速設(shè)置 border 了！