在vscode中如何配置快捷生成vue模板的代码片段 和删除新增的代码片段

1，在设置中找到 【配置用户代码片段】

2，点击【新建全局代码片段文件】

然后取一个名字 我这里用的是 vue 然后点击enter键

3，然后把下列代码粘贴进去即可

{
  "vue-template": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"$1\">$2</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$3',",
      "  mixins: [],",
      "  components: {},",
      "  props: {},",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "  computed: {},",
      "  watch: {},",
      "  created () {},",
      "  mounted () {},",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped lang=\"scss\"></style>",
      ""
    ],
    "description": "my vue template"
  }
}

4，开始使用
在新的vue文件中 直接输入新增代码片段的名称，然后会提示此快捷片段，点击enter键自动生成成功

生成如下代码：

<template>
  <div class=""></div>
</template>

<script>
export default {
  name: '',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="scss"></style>

5，介绍删除新增的代码片段
还是从设置里面点击【新建全局代码片段文件】，然后再点击不想要的这个代码片段 会自动打开此code-snippets文件

然后右键点击 【再文件资源管理器中显示】找到这个文件 删除即可。