ESLint Vue plugin showing false positives for vue/comment-directive

Question

After migrating from VueCLI to Vite, I have to do the linting "manually" as far as I understand; correct me if I'm wrong. As I only want to lint my .ts and .html files (I separate them even for components), I have this script in my package json:

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

It found some issues like missing :key in loops, but it also shows me this error for each template:

error clear vue/comment-directive

And this is always the closing tag of any root elements within my template.html If there is only one root element I get one warning for the file, if there are multiple root elements I get a warning for each closing tag.

I don't understand what this rule complains as, according its documentation, it is there for the eslint-disable comments, which I don't have in my templates.

Answer 1

I had the same issue but in nuxt with eslint, i just needed to update eslint-config and eslint-module:

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

source: https://github.com/nuxt/eslint-plugin-nuxt/issues/121

Answer 2

I've just updated my npm dependencies and I have the same error.

I was reading the eslint documentation and finally I've realized that you can remove the false error if you setup the rule in the .eslintrc.js config file.

this is my .eslintrc.js config file:

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
  }
}

add the rule "vue/comment-directive": 0 and that is!, the error message is removed!.

the possible values are:

• 0 means disabled
• 1 means warning
• 2 means error

Try to change it in your IDE to how it works

(In my case I've had to stop the server and re-run it every time that I've changed a value in this config file.)

Answer 3

I have the same error. I was taught how to fix this error. https://qiita.com/tashinoso/items/a72741ca8e2fd928ca77#comment-3e6cd674353056ecbb3a

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

Answer 4

Set this snippet on .eslintrc.js

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

Solve my issue, i wonder why. Solution from documentation

Node v12.20.0

Answer 5

This is a kind of a temporary fix that worked for me and I think it will work for you as well.

vue/comment-directive

This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".

ESLint doesn't provide any API to enhance eslint-disable functionality and ESLint rules cannot affect other rules. But ESLint provides processors API.

This rule sends all eslint-disable-like comments as errors to the post-process of the .vue file processor, then the post-process removes all vue/comment-directive errors and the reported errors in disabled areas.

All you need to do is add eslint-disable-next-line vue/component-tags-order this line as comment above anywhere you using comments within tags in each block you need to specify if comments are added.

For more information please visit:- https://eslint.vuejs.org/rules/comment-directive.html