VS Code 自定义vue代码片段

1:按F1或ctrl+shift+p打开命令窗口

2:输入snippet,选择 “首选项:打开用户代码段”

3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第9步

4:安装插件VueHelper

5:安装插件vetur

6:文件-首选项-用户设置,打开设置文件, 设置:

"files.associations": {
        "*.vue": "vue"

    }

7:重启 VS Code

8:重新启动 VS Code 后,从第1步再来一遍,应该能跳到第9步

9:在已打开的vue.json文件中粘贴

"Print to vue-template": {
"prefix": "vue",
"body": [
"<template>",
"\t<div>\n\t\t$1",
"\t</div>",
"</template>\n",
"<script>",
"\texport default {",
"\t\tdata () => ({\n",
"\t\t}),",
"\t\tcomponents: {\n",
"\t\t}",
"\t}",
"</script>\n",
"<style>\n\t",
"</style>"
],
"description": "vue 模板代码片段"

}

10:保存文件,打开任意vue类型文件,输入“vue”,回车直接显示之前设置的代码片段


猜你喜欢

转载自blog.csdn.net/m0_37649018/article/details/80901576