背景
從臃腫的 Webstorm 轉(zhuǎn)向更加輕便的微軟爸爸的 VS code 也有一段時(shí)間了
總的來(lái)說(shuō)黍图，VS code 更加輕巧曾雕，可拓展性更強(qiáng)，同時(shí)它又是 Typescript 寫的助被，根正苗紅剖张，又背靠微軟這顆大樹，插件生態(tài)又很不錯(cuò)揩环，用得還是很舒服的
但是搔弄，有一個(gè)我用得很不習(xí)慣的就是生成代碼快捷 VS code 一開(kāi)始是不支持的，而 Webstorm 是內(nèi)置很多代碼快捷拓展段的丰滑，例如：
- JS 文件中：輸入
c+ Tab 鍵會(huì)快速生成console.log()- CSS 文件中：輸入
bd++ Tab 鍵會(huì)快速生成border:1px solid #000;
...
VS code 中設(shè)置代碼快捷拓展段
VS code 輕巧一大原因就是舍棄了很多配置顾犹，丟給開(kāi)發(fā)者的就是如同一張白紙的編譯器：“想讓我給你配置花里胡哨的功能？你配嗎褒墨？”炫刷，所以 VS code 內(nèi)部有大量的 JSON 配置文件讓開(kāi)發(fā)者自己配置，自己動(dòng)手郁妈，豐衣足食浑玛！
那么，不多 BB 圃庭，設(shè)置代碼快捷拓展段：
-
點(diǎn)擊 VS code 左下角的小齒輪锄奢，再選擇 "User Snippets" (用戶代碼段) 選項(xiàng)
- 這時(shí)候會(huì)出現(xiàn)大量的可設(shè)置文件：
javascript.json、css.json剧腻、html.json...這些都是可以配置的 JSON 文件
- 這里以
javascript.json為例拘央，點(diǎn)開(kāi)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 快捷鍵"
}
}
其實(shí) VS code 已經(jīng)將配置的詳解在注釋中解釋了：
把你的javascript代碼片段放在這里
每個(gè)代碼段都以代碼段名稱定義，并具有前綴书在、正文和描述灰伟。前綴是用來(lái)觸發(fā)代碼段的，主體將被展開(kāi)和插入
可能的變量為：$1儒旬，$2制表位栏账，$0用于最后的光標(biāo)位置
我自己配置了一個(gè)快捷選項(xiàng)：
"Print to console"：快捷選項(xiàng)的名稱"prefix"：前綴，在 JS 文件中輸入前綴 + Tab 鍵就會(huì)自動(dòng)拓展出"body"中的內(nèi)容"body"：正文栈源，即拓展內(nèi)容挡爵，body是一個(gè)數(shù)組，即可以通過(guò)一個(gè)小小的前綴拓展出一個(gè)很大的代碼段"description"：描述甚垦，當(dāng)你在 JS 輸入前綴的時(shí)候茶鹃，這時(shí)候會(huì)出現(xiàn)代碼提示框涣雕，這時(shí)候框中就會(huì)出現(xiàn)"description"的內(nèi)容$0,$1,$2：這些符號(hào)不會(huì)最終出現(xiàn)在拓展代碼中，你可以將它們理解為占位符
$0是最后光標(biāo)的位置闭翩，默認(rèn)代碼拓展后挣郭，光標(biāo)在語(yǔ)句的尾部，但是在"body"中插入$0疗韵，會(huì)改變光標(biāo)的位置兑障，在上面的例子中，"console.log($0);"蕉汪，最后光標(biāo)會(huì)直接出現(xiàn)在小括號(hào)中流译，我們就可以直接在其中編輯我們要打印的語(yǔ)句了
$1,$2用法其實(shí)類似$0，你可以理解為 Tab 占位符者疤， 如果是這樣的正文："$2cons$1ole.log($0);"先蒋。那么代碼拓展后光標(biāo)會(huì)出現(xiàn)在$1的位置($1光標(biāo)占位優(yōu)先級(jí)比$0，$2高)宛渐，然后你按下 Tab 鍵會(huì)跳到$2的位置竞漾，再按下 Tab 鍵，會(huì)跳到$0的位置
就是這么神奇窥翩，其實(shí)我覺(jué)得一般的拓展會(huì)使用$0就夠了
拋磚引磚
我剛剛上面簡(jiǎn)述了一下設(shè)置 JS 的代碼快捷拓展业岁，其實(shí)寫 CSS 如果可以快速拓展代碼，也能省下很多時(shí)間：
打開(kāi) css.json :
"Print to border": {
"prefix": "bd",
"body": [
"border:1px solid #000;",
],
"description": "快速設(shè)置 border"
}
這樣輸入：bd + Tab 鍵就能快速設(shè)置 border 了寇蚊！
