配置过期 eslint-plugin-vue 规则导致 eslint 失效原因定位

今天使用 Vue CLI 创建 Vue 应用，然后从之前的项目中拷贝 ESLint rules，但是 vscode 并没有识别，格式化配置中也没有 ESLint 选项。

一般这种情况应该是 ESLint 配置有问题，可能是插件、解析器或者规则。

一个一个注释后重载 vscode 查看效果，最终定位到 eslint-plugin-vue 下的 vue/max-attributes-per-line 规则：

// 强制每行的最大属性数
'vue/max-attributes-per-line': [2, {
  // 单行时可以接收最大数量
  singleline: 10,
  // 多行时可以接收最大数量
  multiline: {
    max: 1,
    // 允许属性和标记名在同一行
    allowFirstLine: false
  }
}],

该规则中使用了 allowFirstLine 来规范属性名和 tag 名是否可以在同一行，将其注释后 ESLint 可以正常工作。

于是去官网查看，发现文档中并没有这个选项，猜测可能在某个版本删除了。

于是对比了当前项目和拷贝 eslint 的项目的安装依赖，果然不一样：

// 当前项目
"eslint-plugin-vue": "^8.0.3",
// 拷贝项目
"eslint-plugin-vue": "^6.2.2",

然后去 github 的中 发布日志 搜索，在 v8.0.0 版本的介绍中找到：

#1587 Removed the allowFirstLine option of the vue/max-attributes-per-line rule.

原来从这个版本开始，官方移除了 vue/max-attributes-per-line 规则的 allowFirstLine 选项，并且新增了一个 vue/first-attribute-linebreak 规则，用来指定属性和 tag 名位置的规范：官方文档

于是使用新的规则，ESLint 正常生效：

// 强制第一个属性的位置(属性换行)
'vue/first-attribute-linebreak': [2, {
  // 单行时，第一属性前不允许使用换行符
  singleline: 'beside',
  // 多行时，第一属性前必须使用换行符
  multiline: 'below',
}],
// 强制每行的最大属性数
'vue/max-attributes-per-line': [2, {
  // 单行时可以接收最大数量
  singleline: 10,
  // 多行时可以接收最大数量
  multiline: {
    max: 1,
  },
}],

总结

ESLint 不生效的原因有很多：

• 配置文件未找到
  • 工作区定位问题，也就是打开的目录可能并不是项目根目录
  • 可以修改 ESLint 插件配置 eslint.workingDirectories
• 配置内容有问题
  • 可以通过注释定位问题