在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说明
代码语言：javascript复制注：vue-cli3默认不会在根目录创建.eslintrc.js文件，因为vue-cli3除了这种方法配置eslint以外还可以在package.json中通过eslintConfig属性去配置，但是这种方式需要严格遵守json语法规则，我们建议如果您的eslint配置较为复杂，还是在根目录自己创建一个.eslintrc.js文件，这样就可以按照js语法规则去写配置项，也方便注释
module.exports = {
// ...其他配置项
plugins: [
'vue'
]
// ...其他配置项
}第三步：使用eslint-plugin-vue中预置的eslint规则让其支持.vue文件的基本结构和通用语法规则
代码语言：javascript复制增加一个文件检测说明配置extends: [
module.exports = {
root: true,
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: [
'plugin:vue/base'
],
}这里我们使用的是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中
代码语言：javascript复制module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
}
// ...其他配置项
}第五步：vscode中添加对vue文件支持的设置让vscode可以高亮vue文件中的js代码eslint问题代码
代码语言：javascript复制"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
] 附完整的.eslintrc.js文件
代码语言：javascript复制// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: [
'plugin:vue/base'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'indent': [2, 2], // 两个空格的缩进
'quotes': [2, 'single'], // js必须使用单引号
'linebreak-style': [2, 'unix'], // 换行风格 unix/windows
'semi': [2, 'always'], // 语句强制分号结尾
'no-console': [1], // 不允许console语句
'no-unused-vars': [1], // 声明了变量但是没有使用检测
'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元运算符的前/后要不要加空格
'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括号风格
'comma-spacing': [2, { 'before': false, 'after': true }], // 逗号后有空格，前没有空格
'comma-style': [2, 'last'], // 逗号跟在结尾
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象字面量中冒号的前后空格
'lines-around-comment': [ // 行前/行后备注
2, {
'beforeBlockComment': false, // 段注释的前后
'beforeLineComment': false, // 行注释的前面
'afterBlockComment': false, // 块注释的后面
'afterLineComment': false, // 行注释的后面
'allowBlockStart': true,
'allowObjectStart': true,
'allowArrayStart': true
}],
'max-depth': [2, 4], // 代码最多允许4层嵌套
'max-len': [1, 160, 2],
'max-nested-callbacks': [2, 3], // 回调嵌套深度
'max-params': [2, 5], // 函数最多只能有5个参数
'max-statements': [1, 80], // 单个函数最多80条语句
'no-array-constructor': [2], // 禁止使用数组构造器
'no-lonely-if': 2, // // 禁止else语句内只有if语句
'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超过2行
'no-nested-ternary': 2, // 不使用嵌套的三元表达式
'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
'no-trailing-spaces': 2, // 一行结束后面不要有空格
'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;简单的判断用三元表达式代替
'object-curly-spacing': [2, 'always', { // 大括号内是否允许不必要的空格 always始终允许；never始终不允许
'objectsInObjects': false,
'arraysInObjects': false
}],
'arrow-spacing': 2, // =>的前/后括号
'block-scoped-var': 2, // 块语句中使用var
'no-dupe-class-members': 2,
// 'no-var': 1, // 禁用var，用let和const代替
'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法
'array-bracket-spacing': [2, 'never'], // 是否允许非空数组里面有多余的空格
'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首
'semi-spacing': [2, { 'before': false, 'after': true }], // 分号前后空格
'keyword-spacing': ['error'],
'space-before-blocks': 2, // 不以新行开始的块{前面要不要有空格
'block-spacing': [2, 'always'],
'space-before-function-paren': [2, 'never'], // 函数定义时括号前面要不要有空格
'space-in-parens': [2, 'never'], // 小括号里面要不要有空格
'spaced-comment': [1, 'always',
{ 'exceptions': ['-', '*', ' ']
}], // 注释风格要不要有空格什么的
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
},
globals: {
'$': false,
'jquery': false,
'ActiveXObject': false,
'arbor': true,
'layer': false
}
};
