背景
从臃肿的 Webstorm 转向更加轻便的微软爸爸的 VS code 也有一段时间了
总的来说，VS code 更加轻巧，可拓展性更强，同时它又是 Typescript 写的，根正苗红，又背靠微软这颗大树，插件生态又很不错，用得还是很舒服的
但是，有一个我用得很不习惯的就是生成代码快捷 VS code 一开始是不支持的，而 Webstorm 是内置很多代码快捷拓展段的，例如：
- JS 文件中：输入
c+ Tab 键会快速生成console.log()- CSS 文件中：输入
bd++ Tab 键会快速生成border:1px solid #000;
...
VS code 中设置代码快捷拓展段
VS code 轻巧一大原因就是舍弃了很多配置，丢给开发者的就是如同一张白纸的编译器：“想让我给你配置花里胡哨的功能？你配吗？”，所以 VS code 内部有大量的 JSON 配置文件让开发者自己配置，自己动手，丰衣足食！
那么，不多 BB ，设置代码快捷拓展段：
-
点击 VS code 左下角的小齿轮，再选择 "User Snippets" (用户代码段) 选项
- 这时候会出现大量的可设置文件：
javascript.json、css.json、html.json...这些都是可以配置的 JSON 文件
- 这里以
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 了！
