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

[4erkashin]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.
  

Tell us about your environment

• ESLint version: 6.8.0
• eslint-plugin-vue version: 7.0.0-0
• Node version: 12.14.1
• Operating System: Ubuntu 20.04.1 LTS

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};

What did you do?
Just created project with vue create

What did you expect to happen?
No linting errors

What actually happened?

error: clear (vue/comment-directive) at public/index.html:21:8:
  19 |     <!-- built files will be auto injected -->
  20 |   </body>
> 21 | </html>
     |        ^
  22 |

[vanderb]

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

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

[4erkashin]

@vanderb yeah. Did the same too. But it looks like a kludge.

[kawazoe]

You should at least use an override specific to html files for now since you probably still want that rule in vue files:

    {
      // HACK: https://github.com/vuejs/eslint-plugin-vue/issues/1355
      files: ['**/*.html'],
      rules: { 'vue/comment-directive': 'off' },
    },

[ota-meshi]

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

[4erkashin]

@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?

[kawazoe]

@ota-meshi The problem seems to be caused by the rule being applied to plain html files. If you look at the OP, you'll see that it mentions the public/index.html file as causing the issue. This rule only make sense in the context of a vue file anyway, so turning it off for html files, for which it shouldn't have been enabled in the first place, make sense.

I am not saying we should enable it for html files. I am saying it IS enabled out of the box for them and shouldn't.

Adding the override I mentioned as is fixes the issue while keeping the rule enabled for vue files, as opposed to @vanderb 's suggestion which disables it outright.

[ota-meshi]

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.

[kawazoe]

I think I know what is going on.

@4erkashin Are you using WebStorm?

I noticed that when creating a new project with npx @vue/cli create foobar and then running npm run lint, everything is good.

If I open the public/index.html file in WebStorm, I get the ESLint error in the IDE. I think it might be WebStorm trying to lint every file you open even if you don't have an explicit parser configured for them.

I still don't know why vue/comment-directive triggers in this case since it should be bound to **/*.vue.

[4erkashin]

@kawazoe yeah I'm using webstorm. Got it, thanks for explanation)

Should I close the issue? Looks like jetbrains related only.

[kawazoe]

It's probably a JetBrains issue.

My workaround will still work for you if you want to use it while we wait for a fix from them.

If you report it in their tracker, can you link it here so I can follow over there as well?

[4erkashin]

@kawazoe https://youtrack.jetbrains.com/issue/WEB-48468

And again) Explain me please, should I close issue here or not?)

[piotrtomiak]

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