如何在VScode中添加代码片段

拿 VUE 举例，新建 VUE 文件，输入前缀，出现代码段

文件 --->  首选项 ---> 用户代码片段 

在输入框中输入 vue ，找到 vue.json ，然后在 vue.json 里面配置。

如下是 vue.json 的例子

    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }

 

prefix ： 在 Intellisense 中选择代码片段时将使用的前缀。

 

body：代码片段的内容。使用“$1”和“${1:defaultText}”定义光标位置，使用“$0”定义最终光标位置。使用“${varName}”和“${varName:defaultText}”插入变量值，例如“这是文件：$TM_FILENAME”。

 

description：代码片段描述。

 

我们可以更改为自己想要的内容

"Print to console": {
    "prefix": "vuec",
    "body": [
      "<template>",
      "  <div>",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style lang='stylus' rel='stylesheet/stylus'>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }