vscode 配置vue开发环境

1、安装插件

直接搜索vue，按自己需求看，找五星下载量高的安装就行。如：

Vetur
Vue 3 Snippets
Vue VSCode Snippets
JavaScript (ES6) code snippets
ESLint
HTML Snippets
vscode-icons

2、配置自己模板

a、文件 => 首选项 => 用户代码片段 => 输入  vue 然后回车

b、 添加配置，让vscode允许自定义的代码片段提示出来，如：

"Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div id=\"\">\n",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "   data() {",
            "      return {",
            "      }",
            "   },",
            "   method: {",
            "   }",
            "}",
            "</script>",
            "<style>",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }

新建vue后缀文件，输入vue，回车即可自动生成设置的模板

3、在.vue文件中使用html代码补全功能

首先，依次打开“文件 --> 首选项 --> 设置”，就会看到settings.json文件了

然后在settings.json中找到“常用设置”里的files.associations对象，按下面添加项