做网站怎么入账/百度一下你就知道下载安装

在vue-cli中为了能让vscode能提示.vue文件中的js代码，我们引入了eslint-plugin-html这个eslint插件（使用方法参考VSCode环境下配置ESLint 对Vue单文件的检测） 最近开始使用vue-cli3构建项目，主要目的是为了简化项目代码结构和提高编译性能。当我们使用以前的方案去实现vscode对.vue文件的eslint检测时却发现始终无法识别，而且提示以下内容

提示信息很容易理解，eslint没有把当前文件当做vue文件处理，而是当做了普通的js文件处理，当然，js文件的外层代码肯定不能含有html标记。最后，我们找到了eslint-plugin-vue，这个插件能完美处理.vue文件，而且还预置了很多可复用的rules（eslint规则）。使用方法如下：

第一步： npm install --save-dev eslint-plugin-vue 安装eslint vue支持插件

第二步： .eslintrc.js文件中添加plugin说明

注：vue-cli3默认不会在根目录创建.eslintrc.js文件，因为vue-cli3除了这种方法配置eslint以外还可以在package.json中通过eslintConfig属性去配置，但是这种方式需要严格遵守json语法规则，我们建议如果您的eslint配置较为复杂，还是在根目录自己创建一个.eslintrc.js文件，这样就可以按照js语法规则去写配置项，也方便注释

module

第三步：使用eslint-plugin-vue中预置的eslint规则让其支持.vue文件的基本结构和通用语法规则

增加一个文件检测说明配置extends

这里我们使用的是base里面的规则，更多的预置规则可以参考文档(eslint-plugin-vue Available rules)[https://eslint.vuejs.org/rules/]

关于eslint规则复用可以参考文档https://cn.eslint.org/docs/developer-guide/shareable-configs

第四步：如果配置中最外层已经存在解析器说明配置parser: 'babel-eslint'，将其移至parserOptions中

module

第五步：vscode中添加对vue文件支持的设置让vscode可以高亮vue文件中的js代码eslint问题代码

"eslint.validate"

附完整的.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring