eslint-plugin-vue: 'vue/comment-directive' — error in the end of public/index.html just after vue-cli installation

This is what I ended up doing

// .eslintrc.js
module.exports = {
 // ...
  overrides: [
    {
      files: ['*.html'],
      rules: {
        'vue/comment-directive': 'off'
      }
    }
  ]
};

Why do you lint HTML with ESLint? eslint-plugin-vue supports linting .vue, but not .html.

If you really want to lint the HTML, you need to apply the processor to .html.

https://eslint.org/docs/developer-guide/working-with-plugins#specifying-processor-in-config-files

I haven’t actually run it and confirmed it, but I think it will work if you set it as follows.

  "overrides": [
    {
      "files": ["*.html"],
      "processor": "vue/.vue"
    }
  ]

I have this issue on a fresh vue cli install, Using Visual studio code… So I don’t think it is explicitly to do with webstorm. I have also added the rule: "vue/comment-directive": 0

And the issue still persists.

I have similar error tried running npm run lint but issue still persists. Just like @kawazoe mentioned at the bottom of the script tag. And I am not using webstorm either. Help please. IDE is VSCode.

@4erkashin it indeed looks like WebStorm issue. We are going to fix it on our side, you can close the issue.

@Tricky-Ricky I’m not too sure if I understand your last post correctly.

I did a fresh install without the linter, wrote the same code with no errors, and it displayed fine. Tried again with the linter installed on a fresh install, same error…

Since this error is produced by the linter, it is not surprising that not installing it will not produce the error. This is irrelevant of the extensions or integration features your IDE provides. If you do not configure eslint, WebStorm will not show an error either, because it uses eslint to show your those errors.

The error shows in the terminal of VSCode.

Did you try running npm run lint in the terminal or did you try something else to get this error? Can you post the log either as text or as a screenshot?

To be clear, my issue has been fixed a few WebStorm versions ago. It was definitely a bug in how WebStorm used eslint to look for errors, and not in this plugin, or in eslint.

@ota-meshi I really don’t know should I use it for .html or not. Unfortunately, I’m not so well experienced yet.

But I scaffolded app from CLI and wish there weren’t errors. So, could you please explain me, how to configure ESLint correctly? Is it enough to use override from your answer or there is something else I should know?

I also get this error with @rollup/plugin-eslint 8.0.1

@Tricky-Ricky do you get the issue when invoking from command line? If not, than it’s most likely a problem in VSCode integration.

ESLint does not lint .html by default. Why do you lint .html with ESLint? If you don’t need to apply ESLint to .html, I think you should exclude .html. I think you’re probably targeting .html somewhere in the settings.

I don’t understand English, so I may not understand what you are saying correctly.

Same here. Only solution for me was to disable the rule

  rules: {
    'vue/comment-directive': 'off'
  }