如何在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"
}