ESLint Vue 插件显示 vue/comment-directive 的误报答案

【问题标题】：ESLint Vue plugin showing false positives for vue/comment-directiveESLint Vue 插件显示 vue/comment-directive 的误报
【发布时间】：2021-02-08 05:41:29
【问题描述】：

从 VueCLI 迁移到 Vite 后，据我所知，我必须“手动”进行 linting；如果我错了纠正我。由于我只想对 .ts 和 .html 文件进行 lint（我什至为组件将它们分开），所以我的包 json 中有这个脚本：

"lint": "eslint --ext .ts --ext .html src/"

它发现了一些问题，例如在循环中缺少 :key，但它也向我显示了每个模板的此错误：

错误清除 vue/comment-directive

这始终是我的 template.html 中任何根元素的结束标记如果只有一个根元素，我会收到一个文件警告，如果有多个根元素，我会收到每个结束标签的警告。

我不明白这条规则在抱怨什么，根据它的documentation，它用于 eslint-disable cmets，我的模板中没有。

【问题讨论】：

何@Thomas，您在哪里可以解决这个问题？添加纱线插件后，我现在得到了这个。我试图删除插件并重新安装项目，但错误仍然存在。我发现这方面的问题令人惊讶地很少。谢谢！

标签： eslint vuejs3 vite

【解决方案1】：

我刚刚更新了我的 npm 依赖项，但我遇到了同样的错误。

我正在阅读 eslint 文档，最后我意识到如果你在 .eslintrc.js 配置文件中设置规则，你可以删除 false error。

这是我的.eslintrc.js 配置文件：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
    "vue/comment-directive": 0
  }
}

添加规则"vue/comment-directive": 0即！，错误信息被删除！。

可能的值是：

0 表示disabled
1 表示warning
2 表示error

尝试在 IDE 中将其更改为工作方式

（在我的情况下，每次更改此配置文件中的值时，我都必须停止服务器并重新运行它。）

【讨论】：

但是为什么会这样呢？你刚刚抑制了这个错误。
为什么？ eslintrc 以这种方式工作。你可以在 eslint 文档中看到它...
Linter 让我发疯。我做了同样的事情并禁用了错误以便能够继续工作，但就像@AlexanderKim 一样，我很想了解这个错误，因为它以前不存在。
这是一种临时修复。因为我真的不想禁用vue/comment-directive。我在我的模板中使用 eslint-disable cmets...

【解决方案2】：

我也遇到了同样的问题，但是在使用 eslint 的 nuxt 中，我只需要更新 eslint-config 和 eslint-module：

"@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.1",

来源：https://github.com/nuxt/eslint-plugin-nuxt/issues/121

【讨论】：

记得升级 eslint 到 ^7.22.0 否则你可能会遇到错误

【解决方案3】：

在 .eslintrc.js 上设置这个 sn-p

"vue/comment-directive": ["error", {
  "reportUnusedDisableDirectives": false
  }]

解决我的问题，我想知道为什么。来自documentation的解决方案

节点 v12.20.0

【讨论】：

【解决方案4】：

我有同样的错误。我被教导如何解决这个错误。 https://qiita.com/tashinoso/items/a72741ca8e2fd928ca77#comment-3e6cd674353056ecbb3a

module.exports = {
  ...
  overrides: [
    {
      files: ["*.vue"],
      processor: "vue/.vue"
    }
  ]
}

【讨论】：

正在使用 nuxt 和 typescript。这行得通。

【解决方案5】：

这是一种对我有用的临时修复，我认为它也对你有用。

vue/评论指令

这个规则包含在所有“plugin:vue/base”、“plugin:vue/essential”、“plugin:vue/vue3-essential”、“plugin:vue/strongly-recommended”、“plugin:vue”中/vue3-strongly-recommended”、“plugin:vue/recommended”和“plugin:vue/vue3-recommended”。

ESLint 不提供任何 API 来增强 eslint-disable 功能，并且 ESLint 规则不会影响其他规则。但是 ESLint 提供了处理器 API。

此规则将所有类似 eslint-disable 的 cmets 作为错误发送到 .vue 文件处理器的后处理，然后后处理删除所有 vue/comment-directive 错误和禁用区域报告的错误。

您需要做的就是添加 eslint-disable-next-line vue/component-tags-order 此行作为上面的注释，您在每个块中的标签内使用 cmets 您需要指定是否添加 cmets。

欲了解更多信息，请访问：-https://eslint.vuejs.org/rules/comment-directive.html

【讨论】：