VSCode代码片段配置

背景：最近在做页面组件拆分，所以需要新建许多组件代码文件，固定的基础代码部分每次都需要手动敲入，有点点麻烦，所以了解了下VSCode的代码片段配置。

操作步骤：

1.找到【首选项】，windows版可能在【文件】里，选择【用户片段】，根据需求选择要新建的代码片段使用范围。

2.输入文件名并进行编辑

参考示例进行修改

具体应用：

a.前端log打印使用比较频繁，如果没有代码片段配置的话，每次都需要完整敲入console.log，而且还容易敲错，如下图，进行了代码配置，只需要敲入log，编辑器找到我们配置代码片段，选择后便会帮助我们敲入。

b. 当写一些新页面的时候，免不了需要创建许多对应的组件页面，许多基础代码都一致，配置好代码片段后一劳永逸。(web端创建组件代码模板，有需要直接复制使用)

{
  "Vue component": {
    "prefix": "vuec",
    "body": [
      "<template>",
      " <div>",
      "   ",
      " </div>",
      "</template>",
      "<script lang='ts'>",
      "import { Component, Vue } from 'vue-property-decorator';",
      "@Component",
      "export default class Module  extends Vue{",
      " mounted(){",
      "   "
      " }",
      "}",
      "</script>",
      "<style lang='less' scoped>",
      " ",
      "</style>"
      ],
      "description": "Create Vue component"
    }
  }