Eslint-plugin-vue: Linting on the fly with Atom issues

[miljan-aleksic]

Hei guys is this issue related with eslint-plugin-vue?

If it's not, any clue where to look next?

[mysticatea]

Do you configure linter-eslint to lint .vue files?

[miljan-aleksic]

I have tested it with the current vue-cli alpha version which yes, does it.

[mysticatea]

I'm not familiar with vue-cli, but I guess that it's not the config of Atom's linter-eslint.

[miljan-aleksic]

This is an old issue I run into trying to lint vue files that I just remembered now as trying out vue-cli. vue-cli just setups the project with eslint configuration for vue file as well. If that were wrong, there would be no lint on those files, and you can see on the video that's not the case.

[mysticatea]

That template looks to set up ESLint CLI.
But it doesn't look to set up editor plugins. What kind of files that Editor plugins check is the configuration of editor plugins.

[miljan-aleksic]

I never heard of that configuration, only about .eslintrc, which Atom linter-eslint plugin expect. If missing, its probably trying to lint the file as raw html and thus all the issues.

We may conclude that vue-cli project, not having eslintrc, are not mean to be linted on the fly, at least at this moment. Any other conclusion?

[mysticatea]

I'm not familiar with Atom, but I know this at least.

you need to turn "Lint HTML Files" option in linter-eslint atom package settings.
https://github.com/vuejs/eslint-plugin-vue/issues/105#issuecomment-317256351

Ah, indeed, .eslintrc.* file is needed as well.

[miljan-aleksic]

Thanks, @mysticatea for your time and interest :)

[derhedwig]

I had similiar problems with "Lint HTML Files" turned on in Atom. But then I found this:

From https://github.com/BenoitZugmeyer/eslint-plugin-html:

Initially, eslint-plugin-vue was using eslint-plugin-html to lint code inside script tags. Since v3, eslint-plugin-vue is using its own parser, so it is incompatible with eslint-plugin-html. You should remove eslint-plugin-html from your dependencies if you still have this.

So, one shouldn't use "Lint HTML Files" and this is how you could still make Atom lint vue-files:

From https://alligator.io/vuejs/vue-eslint-plugin/:

Go into Settings -> Packages -> linter-eslint and add text.html.vue to the “List of scopes to run eslint on” option. You may need to restart Atom.

[mysticatea]

@derhedwig I'm not familiar with Atom. Would you ask the question on Atom's repo?

Nevermind. I misunderstood your post.

[miljan-aleksic]

Thanks @derhedwig for your comments. That's not the case in this particular situation but may help somebody else.