该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，

装好后 点击文件->首选项->设置 ->打开设置 界面，在设置界面右侧添加配置。

它是一款智能错误检测插件

ESLint 不是安装后就可以用的，还需要一些环境和配置：

1.首先，需要全局的 ESLint , 如果没有安装可以使用CMD 输入npm install -g eslint来安装；

2.其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，

需要eslint-plugin-html这个插件。可以使用CMD输入： npm install -g eslint-plugin-html 来安装；

当上述两个都装好后，还需要在 vscode 中配置下 ESLint：在同vetur插件一样的地方进行配置

映射vscode上的断点到chrome上，方便调试

代码格式化插件

在终端输入：npm install，先下载对应的依赖。

但是报错了！！ 原因：此类原因是虽然在全局下安装了，但是可能vscode的终端模式是powershell模式，点击右面的+号，选择Command Prompt 模式， 我们就可以看到powershell转化为cmd执行

VSCode使用管理员身份打开！！！就可以了

然后输入：npm start，或者npm run dev运行项目：

1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样

2、Auto Close Tag 自动闭合HTML标签

3、Vscode-icons 让 vscode 资源目录加上图标

4、Vue 2 Snippets vue必备vue代码提示

5、Path Intellisense 自动路径补全、默认不带这个功能

6、Vue-color vue 语法高亮主题

{ “explorer.confirmDelete”: false, //eslint插件配置 “eslint.validate”: [ “javascript”, “gavesciptreact”, “html”, “vue” ], “eslint.options”: { “plugins”:[“html”] }, //vetur配置 “emmet.syntaxProfiles”: { “vue-html”: “html”, “vue”: “html” }, //解决.vue文件爆红问题 “files.associations”: { “*.vue”:“html” } }

后来发现官方文档给的是错误的，css文件叫reset.css 改为： import “ant-design-vue/dist/reset.css”;

解决方法:ctrl+shipt+p 然后输入Preferences: Open User Settings或Preferences: Open Workspace Settings。选择找到settings.json文件 找到files.associations 把vue的html改成vue就不报错了