为了开发更高效，可以在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
