VS code 设置代码快捷拓展段

背景

从臃肿的 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 ，设置代码快捷拓展段：

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 了！