為了開發(fā)更高效例衍，可以在vscode上配置常用的代碼塊
vscode版本
image.png
打開user snippets
image.png
輸入自定義代碼庫或預置代碼庫
image.png
代碼塊示例
"vue3-template": {
// scope字段表示代碼塊適用的語言
"scope": "vue",
// prefix表示用來觸發(fā)代碼塊的內容
"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
