ESLint in Vue components

Hi!

How can I format a Vue component from .eslintrc.js file? Or better, How can I configure my project settings (Editor -> Code Style) to set code formatting according to a .eslintrc.js file?

When I format the Vue component with CMD + ALT + L command, Tab are 4 instead of 2, but I've got configure 2 in code style preferences.

Thanks!

12 comments
Comment actions Permalink

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.

2
Comment actions Permalink

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!

0
Comment actions Permalink

>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

1
Comment actions Permalink

Ok, Thanks a lot!

0
Comment actions Permalink

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!

0
Comment actions Permalink

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?

0
Comment actions Permalink

<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

1
Comment actions Permalink

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:

18
Comment actions Permalink

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}],
}
2
Comment actions Permalink

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.

 

0
Avatar
Permanently deleted user
Comment actions Permalink

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?

0
Comment actions Permalink

@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,
},
0

Please sign in to leave a comment.