eslint-plugin-vue@8.7.1为什么和 eslint-config-standard@6.1.0不匹配的原因和解决

一、不匹配的通俗解释

嘿，让我来给你解释一下为啥它们可能不匹配吧！

想象一下，eslint-plugin-vue@8.7.1 和 eslint-config-standard@6.1.0 就像两个不同的检查老师呢。

eslint-plugin-vue@8.7.1 这个老师是专门检查 Vue 项目的，它知道 Vue 组件的各种细节，像 Vue 组件里的模板怎么写、指令怎么用、属性怎么定义等等，它有自己的一套检查 Vue 代码的方法哦。

而 eslint-config-standard@6.1.0 这个老师呢，是检查普通的 JavaScript 代码的，它关心的是像变量怎么声明、函数怎么写、代码风格怎么样这些更通用的 JavaScript 代码问题呢。

问题就出在它们俩的关注点不一样啦！

当你在一个 Vue 项目中同时让它们俩来检查代码的时候，它们可能会互相 “吵架” 哦。比如说，eslint-plugin-vue@8.7.1 觉得 Vue 组件的某个地方应该这样写，而 eslint-config-standard@6.1.0 可能有不同的看法呢。

二、可能出现的冲突情况

代码风格方面：
- eslint-config-standard@6.1.0 可能会要求代码的缩进是几个空格，而 eslint-plugin-vue@8.7.1 对于 Vue 组件里的代码可能有自己的缩进想法，这样就会产生冲突啦。
代码规则方面：
- eslint-plugin-vue@8.7.1 可能要求 Vue 组件里的 props 要怎么定义和使用，但是 eslint-config-standard@6.1.0 可能不懂这些 Vue 组件的特殊要求，它们的要求可能就会打架呢。
检查范围不同：
- eslint-plugin-vue@8.7.1 主要检查 Vue 组件的 <template> 和 <script> 部分，而且会深入检查 Vue 特有的东西，像 Vue 的生命周期函数、指令之类的。而 eslint-config-standard@6.1.0 更关心普通的 JavaScript 代码，可能就会忽略 Vue 组件的一些特殊情况，这样它们在检查的时候就会有分歧啦。

三、怎么解决这个问题呢

1. 调整检查规则：

收起

json

{
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "rules": {
    "indent": ["error", 2],
    "vue/indent": ["error", 2]
  }
}

2. 更新它们的版本：

你可以试着把 eslint-plugin-vue 或者 eslint-config-standard 的版本更新一下哦。不过要小心，更新了之后它们的检查规则可能会有变化，可能会带来新的问题呢。你可以这样更新：

收起

bash

npm update eslint-plugin-vue

或者

收起

bash

npm update eslint-config-standard

四、总结

简单说，就是这两个检查工具的检查重点和标准不一样，所以会产生冲突哦。你可以调整规则或者更新它们的版本来解决这个问题呢。