ESLint in Vue components

Right now WebStorm automatically imports code style rules from ESLint configs written in JSON format; importing the rules from JavaScript configs is more advanced and requires having ESLint already installed, that's why right now we don't do that automatically, import is performed on choosing "Apply ESLint Code Style Rules" from the .eslintrc.js file's menu.

Great!!

Is "Apply ESLint COde Style Rule" applied for current project configuration or IDE?

Does it work with "vue:recommended" extends option?

I've read in somewhere that it's needed put in "plugin" options "vue" and/or "import" in order to the IDE works, is that true?

Regards!

>Is "Apply ESLint COde Style Rule" applied for current project configuration or IDE?

it changes current project configuration

>Does it work with "vue:recommended" extends option?

it should...

>I've read in somewhere that it's needed put in "plugin" options "vue" and/or "import" in order to the IDE works, is that true?

yes, you need to have "vue" added to "plugins" in your .eslintrc to make EsLint integration work for your .vue files

Ok, Thanks a lot!

Hi again Elena!

I've applied ESLint code style rule from .eslintrc.js file, but when I format muy Vue component, I get 4 space indentation instead of 2, but I don't see this configuration in anywhere.

This is my .eslintrc.js file:

And this my Vue compoenent after formatting;

And finally, Webstorm configuration for Javascript:

Thanks for you help!

Sorry, It was my mistake,

I've got configured 4 spaces in .editorconfig file.

😅

Anyway, Is there any way to config 4 spaces for <template> code and 2 for <script> code in Vue components?

<template> code uses HTML code style indents (File | Settings | Editor | Code Style | HTML | Tabs and Indents), <script> code - Javascript preferences (File | Settings | Editor | Code Style | JavaScript | Tabs and Indents); try setting them accordingly

I figured out the answer to this one after much trial and error! Add <script> to the list of "Don't indent children" under the HTML config:

I think the IDE is actually right here; It looks better to have the script indented in a *.vue file just like the Template and Styles are too

Better fix is to update .eslintrc to all this to pass

Try:

rules: {
  'indent': 'off',
  'vue/script-indent': ["error", 2, {"baseIndent": 1}],
}

Dan, that works great in the IDE, but throws a bunch of indent errors when running or building. I had to stick with the method I posted even though it's not the most ideal.

Using a linter and an IDE together is sure troublesome, it seems. I wonder, if it wouldn't be better to turn off all inspections coming with the IDE and let npm/eslint do its work? Would that be a recommended way to go? Or what would be the pitfalls?

@alan thanks! I'm using Vue.js and trying to stop all the eslint errors but keep it on. when I cmd+shift+L I'd get the space on my script indent and blow up the linting that I have set to 0

// .eslintrc.js
rules: {
  'semi': 0,
  'baseIndent': 0,
},