关于vue3 项目中使用 eslint-plugin-vue 报错踩坑记录

前言

最近在整理一个项目，发现该项目有一系列 eslint 规则依赖，但是并没有开启 eslint 的校验。

于是打算重构一下，开启 eslint 校验。剔除其他规则集，只保留 vue 官网提供的 elsint-plugin-vue 依赖。但是刚开始就遇到了棘手的报错，卡了好半天。

网上查到的资料也是千篇一律，未能解决，大部分方案都是在配置文件中关闭掉对应规则。求助过一些掘友大部分同学都说：别太纠结，直接把 eslint 关掉或规则关掉不就好了。

如果直接关掉的话，eslint 就变得没有意义了。本文记录自己踩坑的过程，最终找到问题，解决了问题。希望可以帮助到其他同学。

项目 eslint 相关依赖

eslint 7.32.0
eslint 中文官网文档
eslint-plugin-vue 9.32.0
eslint-plugin-vue 官网规则文档

.eslinrc 配置

js 复制代码

require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
  // ...
  extends: [
    'eslint:recommended', // ESLint 预设的推荐规则集，无需安装
    'plugin:vue/vue3-recommended', // 来自 eslint-plugin-vue 相对严格强化 .vue 的代码规则集
  ],
  plugins: ['vue'],
  rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 二、eslint-plugin-vue 规则
    'vue/multi-word-component-names': 0, // 组件名称必须为多个单词，防止和html标签重复冲突
    'vue/no-v-html': 0, //  关闭 v-html 警告
    'vue/no-parsing-error': 0, // 禁止在 <template> 中出现解析错误
    // 不允许对HTML空元素进行自动关闭（<img/>）
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always', // 对于 void 元素始终要求自闭合
          normal: 'never', // 对于普通元素div span p  从不要求自闭合
          component: 'always', // 对于 Vue 组件始终要求自闭合
        },
        svg: 'always', // 对于 SVG 元素始终要求自闭合
        math: 'always', // 对于 MathML 元素始终要求自闭合
      },
    ],
  },
}

报错问题

项目启动后，好几个文件报错，我打算一一解决，其中一个文件报错如下：

js 复制代码

  7:1  warning  Expected indentation of 2 spaces but found 1 space                                  vue/html-indent
  8:1  warning  Expected indentation of 2 spaces but found 1 space                                  vue/html-indent
  8:3  warning  Expected 1 line break before closing tag (`</template>`), but no line breaks found  vue/multiline-html-element-content-newline

查看终端报错的信息提示，可以看到这里有 3 个错误，其中在指定文件的7、8行都报警告如下：

warning Expected indentation of 2 spaces but found 1 space vue/html-indent

翻译：预期缩进2个空格，但找到1个空格缩进

warning Expected 1 line break before closing tag (``), but no line breaks found vue/multiline-html-element-content-newline

翻译：关闭标记（</template>）前应有1个换行符，但没有找到换行符

报错规则来自：vue/html-indent 规则；因为项目使用了 eslint-plugin-vue 依赖，所以这里的 eslint 错误是 eslint-plugin-vue 规则集拦截到的。

开始踩坑

为什么终端有报错，而编辑器代码没有黄色、红色的提示？

先开始我在想是不是 vscode 有缓存导致的问题，导致 eslint 监测不到错误了，于是反复卸载安装编辑器 eslint 插件、修改编辑器 eslint 相关配置，浪费了不少时间。最后发现如果有明显错误的代码就会有红色波浪线，而就这里三个警告错误代码上没有任何提示！

终端提示 7、8 行有问题，但是对应文件代码行数没问题？

反复确认报错的文件，查看是否找错了文件。查资料为什么报错代码行数和文件代码行数对不上问题

怀疑依赖版本问题

开始怀疑依赖版本问题，尝试安装不同版本依赖进行测试

发现问题

在经过上面一系列踩坑、折磨后，无论是重启项目、重启编辑器、重新安装依赖都无法解决! 到这里，可以排除不是缓存的问题。

然后尝试在配置文件禁用该规则后就不报错了。但是这个方法肯定不行，禁用后就没意义了！！！

于是用最笨的方法删除文件测试，果然删除了报错文件后，终端之前的报错就消失了，到这一步证明还是这个文件的代码有问题！

由于这个文件代码不少，于是仔细排查，发现都没啥问题，最终在 124-134 行代码发现了问题

发现这里注释的代码包含了 template 标签，我的报错就是提示这个标签有问题，而我们 html 部分的根标签 template 是不报错的。

再仔细一看 125-134 行缩进就是 1 格！

修改后

修改缩进为 2 格，</template> 结尾标签前加入换行后，组件 eslint 报错消失！问题解决！

其他文件错误（userList 文件）

1、要求Vue.js自定义组件（<Tree>）自动关闭 [vue/html-closing-bracket-spacing]

这里应该改为： <Tree/>

2、结尾标签 > 括号需要换行 (vue/html-closing-bracket-newline)

应该回车换行，而不是跟在当前行后面。

如果整个项目就 1 个文件有错误，我们可以一个一个的去修改对应问题，但是如果问题多的话就让 eslint 自动修复。

vscode设置报错自动修复

设置当保存时根据项目的 eslintrc.js 配置文件规则，来自动修复可以修复的问题

js 复制代码

"editor.codeActionsOnSave": {
    // explicit 显示的格式化
    "source.fixAll.eslint": "explicit", // 修复所有 ESLint 问题。
    "source.fixAll.tslint": "explicit", // 修复所有 TSLint 问题。
},

配置完，直接在报错文件进行保存后：

可以看到大部分有红色错误、黄色警告都波浪线都消失了，代码已经按照我们项目 eslint-plugin-vue 预设的规则进行修复了。不用一行一行的去修改了，美滋滋。

但是此时，查看终端这个文件还是有报错：

这个错误还是同上面序号 2 一样，说结尾标签需求换行。提示 152 行，但是对应该文件 152 行如下：

排查

仔细查看文件代码，又发现了一处注释代码：

发现结尾标签没有换行，于是换行如下：

此时，在查看终端发现 userList 文件已经没有任何报错和警告了，剩下了其他文件有错误：

全局修复效果

配置好自己的 eslint 规则后，添加修复脚本:

js 复制代码

 "scripts": {
    "lint": "eslint . --ext .js,.vue",
    "lint:fix": "eslint . --ext .js,.vue --fix",
  },

npm run lint 查看项目有多少错误

发现按照这个规则集整个项目有很多的错误

npm run lint:fix 修复所有错误

可以看到大部分问题直接修复，只剩下一些 eslint 不能自动修复的问题了，我们手动打开文件一一修复即可。

总结

本文收获如下：

eslint相关的报错行数和文件代码不一定是对应的
eslint 规则集校验范围是包含注释代码的，尤其是注释代码中有标签内容
eslint 件自动格式化修复只能格式大部分错误，不能自动格式化的内容还是需要手动修改格式