VS code 設置代碼快捷拓展段

背景

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

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

VS code 中設置代碼快捷拓展段

VS code 輕巧一大緣由就是捨棄了不少配置，丟給開發者的就是如同一張白紙的編譯器：「想讓我給你配置花裏胡哨的功能？你配嗎？」
因此 VS code 內部有大量的 JSON 配置文件讓開發者本身配置，本身動手，豐衣足食！ 那麼，很少 BB ，設置代碼快捷拓展段：

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

   

2. 這時候會出現大量的可設置文件：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 已經將配置的詳解在註釋中解釋了：

把你的javascript代碼片斷放在這裏 每一個代碼段都以代碼段名稱定義，並具備前綴、正文和描述。前綴是用來觸發代碼段的，主體將被展開和插入 可能的變量爲：$1，$2製表位，$0用於最後的光標位置

我本身配置了一個快捷選項：

• "Print to console"：快捷選項的名稱
• "prefix"：前綴，在 JS 文件中輸入前綴 + Tab 鍵就會自動拓展出"body" 中的內容
• "body"：正文，即拓展內容， body 是一個數組，便可以經過一個小小的前綴拓展出一個很大的代碼段
• "description"：描述，當你在 JS 輸入前綴的時候，這時候會出現代碼提示框，這時候框中就會出現"description"的內容
• $0,$1,$2：這些符號不會最終出如今拓展代碼中，你能夠將它們理解爲佔位符
  $0 是最後光標的位置，默認代碼拓展後，光標在語句的尾部，可是在 "body" 中插入 $0 ，會改變光標的位置，在上面的例子中，"console.log($0);"，最後光標會直接出如今小括號中，咱們就能夠直接在其中編輯咱們要打印的語句了
  $1,$2用法其實相似 $0 ，你能夠理解爲 Tab 佔位符， 若是是這樣的正文："$2cons$1ole.log($0);"。那麼代碼拓展後光標會出如今$1 的位置($1 光標占位優先級比 $0，$2 高)，而後你按下 Tab 鍵會跳到 $2 的位置，再按下 Tab 鍵，會跳到 $0 的位置
  就是這麼神奇，其實我以爲通常的拓展會使用 $0 就夠了

拋磚引磚

我剛剛上面簡述了一下設置 JS 的代碼快捷拓展，其實寫 CSS 若是能夠快速拓展代碼，也能省下不少時間： 打開 css.json :

"Print to border": {
    "prefix": "bd",
    "body": [
      "border:1px solid #000;",
    ],
    "description": "快速設置 border"
  }
複製代碼

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