eslint-plugin-vue: 'vue/comment-directive' — error in the end of public/index.html just after vue-cli installation
Checklist
- I have tried restarting my IDE and the issue persists.
- 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 |
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 11
- Comments: 23 (3 by maintainers)
This is what I ended up doing
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.
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.
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.
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