自定义 VS Code 代码片段

有一句话说的好：“工欲善其事必先利其器”

每次新建一个 vue 文件都要自己复制一份项目模板过来，太麻烦了。我在网上搜了一下资料，自定义了代码片段。

1. 新建一个文件，如 test.vue
2. 左下角设置中，选择用户代码片段 - vue.json
3. 在 test.vue 中写好你想要的代码片段模板，如下

<template>
  <div></div>
</template>

<script>
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {};
    },
    computed: {},
    watch: {},
    beforeMount() {},
    mounted() {},
    methods: {},
  };
</script>
<style lang="scss" scoped></style>

4. ctrl+f 打开 vscode 的搜索，点击选上 .*，（正则搜索）,输入 (.*)
5. 替换中输入 "$0",
6. 全部替换，复制搜索内容，等会要用。
7. 切换到 vue.json 文件，贴上下面的代码

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div />",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$0',",
      "  components: {},",
      "  props: [],",
      "  data () {",
      "    return {}",
      "  },",
      "  computed: {},",
      "  watch: {},",
      "  beforeMount () {},",
      "  mounted () {},",
      "  methods: {}",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

没错，代码片段在 body 字段里，是个数组，如果你不想一行一行的去加双引号和逗号，用 4-7 步骤可以快速完成。成功偷懒。

8. 在 vue 文件里直接输入 vue，是不是看到自己刚刚写的代码片段了。