一、打开vscode，点击左下角设置图标。

下载vscode传送门

二、点击用户代码片段

三、点击新建全局代码片段文件

四、输入自定义代码片段配置文件名，例如:vue.json

五、进行代码片段配置示例如下

{
  "Print to vue temaplate": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"wrapper\">$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "  methods: {},",
      "  mounted () {}",
      "}",
      "</script>",
      "<style lang=\"less\" scoped>",
      "</style>\r"
    ],
    "description": "A vue2 file template"
  }
}

---

配置项详解

配置项目	作用
$0	为默认鼠标光标位置
“prefix”: “vue”	设置快捷指令为vue
“body”: [ ]	内部为自定义代码片段内容
“description”: “A vue2 file template”	设置提示信息

---

至此自定义代码段配置完毕，以本文为例输入vue按Tab补全就会出现自定义的代码。

附自定义注释配置(动态时间)

{
  "Print to js method": {
    "prefix": "zhushi",
    "body": [
      "/*",
      " *@Author: 作者名",
      " *@Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@Description: $0",
      "*/"
    ],
    "description": "A function comment"
  }
}