vs code如何创建代码片段

vs code有一个很方便的模板定义功能：User Snippets（中文版称为“用户代码片段”），它允许用户为某个前缀定义一个代码片段。使用时，只要输入这个前缀，点击回车，vs code就会自动插入这个代码片段。

中文版为文件>首选项>用户代码片段。点击后会在顶部出现一个输入框：

假设我们要为vue创建一个模板，可以在这里输入vue，然后回车，vs code会自动新建一个名为vue.json的文件来定义代码片段。该文件内包含被注释的说明文字，指导开发者如何创建一个代码片段。我们直接在里面添加如下内容：

{
    // Place your snippets for vue 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": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>$0",
            "    </div>",
			"</template>\n",
			"<script>",
            "export default {",
            "    name: '${TM_FILENAME_BASE}',",    
            "    data() {",
            "        return {\n",
            "        };",
            "    },",
			"    methods: {\n",
			"    },",
            "};",
            "</script>\n",
            "<style lang=\"scss\" scoped>\n",
            "</style>",
            "$2"
        ],
        "description": "vue template"
    }
}

主键vue template是代码片段的名字，没有太大的意义。prefix是片段前缀，我们只要输入这个前缀，点击回车，即可插入body中定义的模板。description是代码片段的描述。

body中有几个特殊的值，其中$0是光标最终停下的位置（$1也是类似的效果），$2会插入一个制表符，${TM_FILENAME_BASE}引用的是当前文件名（不包含后缀）。

保存该文件后代码片段即可生效。

现在我们新建一个vue文件，输入vue:

然后回车，可以看到，页面自动生成了如下内容：

vs code自动把前缀vue替换成了json中定义的body的内容，可谓是非常方便。

同样的，也可以定义一个HTML文件的代码片段，这样只要在文件中输入html，就可以迅速生成一个HTML页面的基本结构了。

除了这种通用的模板，还可以为其他常写的代码编写片段。比如我们希望输入关键字for即可自动生成一个循环语句，可以这样写：

{
  "for": {
    "prefix": "for",
    "body": [
      "for (let i = 0; i < $0; i++) {",
      "  ",
      "}"
    ] 
  }
}

当然了，用户代码片段可以用于定义任何模板，包括java模板、php模板等，只要你是vs code用户即可。