为了开发更高效，可以在vscode上配置常用的代码块

vscode版本

image.png

打开user snippets

image.png

输入自定义代码库或预置代码库

image.png

代码块示例

"vue3-template": {
     // scope字段表示代码块适用的语言
    "scope": "vue",
    // prefix表示用来触发代码块的内容
    "prefix": "vue3Template",
    // body表示代码块的内容
    "body": [
        "<template>\n\t<div>\n\n\t</div>\n</template>",
        "<script lang=\"ts\">\nimport {defineComponent} from 'vue';\n\n",
        "export default defineComponent({\n\tname: 'componentName'$0\n});\n</script>\n\n",
        "<style lang=\"less\" scoped>\n\n</style>\n"
    ],
    // description表示代码块的描述
    "description": "vue3 Typescript less 模板文件结构"
}

使用

在vue文件中即可使用上述定义的代码块

image.png