vscode自定义代码片段-vue3为例

1、打开vscode，点击文件/file->首选项->用户片段，选择vue.json

2、点击进入粘贴下面文本（模板内容可根据自己需求更改）

{
  "vue template": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div>",
      " ",
      "  </div>",
      "</template>",
      "<script lang='ts'>",
      "import { defineComponent } from 'vue'",
      "export default defineComponent({",
      "  name: '$TM_FILENAME_BASE',",
      "})",
      "</script>",
      "<style>",
      " ",
      "</style>",
      ""
    ],
    "description": "vue3 template"
  },
}

prefix :代码片段名字，即输入此名字就可以调用代码片段。

body :这个是代码段的主体.需要编写的代码放在这里。　
　　　
description :代码段描述,输入名字后编辑器显示的提示信息。

3、$TM_FILENAME_BASE动态获取新建文件时创建的文件名，不加后缀名。

4、新建.vue文件，文件中输入模板中prefix的值：vue3，回车即可一键生成