How can I set up eslint indentation for WebStorm?
How do I set "indent"
in .eslintr.json
to conform to the standard used by WebStorm?
Everything I have tried so far, according to the official documentation, cannot compare to it:
-
"indent": ["error", 2]
- gives a lotExpected indentation of 2 spaces but found 4
-
"indent": ["error", 4]
- gives a lotExpected indentation of 4 spaces but found 8
-
"indent": ["error", 8]
- gives a lotExpected indentation of 8 spaces but found 4
My complete eslint config:
{
"env": {
"es6": true,
"node": true,
"jasmine": true
},
"extends": "eslint:recommended",
"parserOptions": {
},
"rules": {
"no-else-return": "error",
"no-multi-spaces": "error",
"no-whitespace-before-property": "error",
"camelcase": "error",
"new-cap": "error",
"no-console": "error",
"comma-dangle": "error",
"no-var": "error",
"indent": ["error", 4],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
When I enter the code, I always use Ctrl+Alt+L
to auto-format the code, and the generated code formatting does not match any of the eslint settings.
UPDATE
As asked, sample code for "indent": ["error", 4]
:
For this code: (formatted with Ctrl + Alt + L)
const a = 123;
switch (a) {
case 1:
return 1;
case 2:
return 2;
case 3:
return 3;
default:
break;
}
leads to:
3:1 error Expected indentation of 0 spaces but found 4
4:1 error Expected indentation of 4 spaces but found 8
5:1 error Expected indentation of 0 spaces but found 4
6:1 error Expected indentation of 4 spaces but found 8
7:1 error Expected indentation of 0 spaces but found 4
8:1 error Expected indentation of 4 spaces but found 8
9:1 error Expected indentation of 0 spaces but found 4
10:1 error Expected indentation of 4 spaces but found 8
example 2
obj.format('text', {
value: '${two}'
}
);
leads to:
2:1 error Expected indentation of 4 spaces but found 8
3:1 error Expected indentation of 0 spaces but found 4
example 3
return begin()
.then(() => {
return callback()
.then(data => {
success = true;
return commit();
}, reason => {
return rollback();
})
},
function (reason) {
update(false, false, reason);
return $p.reject(reason);
});
leads to:
3:1 error Expected indentation of 8 spaces but found 12
4:1 error Expected indentation of 12 spaces but found 16
5:1 error Expected indentation of 16 spaces but found 20
6:1 error Expected indentation of 16 spaces but found 20
7:1 error Expected indentation of 12 spaces but found 16
8:1 error Expected indentation of 16 spaces but found 20
9:1 error Expected indentation of 12 spaces but found 16
10:1 error Expected indentation of 4 spaces but found 8
11:1 error Expected indentation of 4 spaces but found 8
12:1 error Expected indentation of 8 spaces but found 12
13:1 error Expected indentation of 8 spaces but found 12
14:1 error Expected indentation of 4 spaces but found 8
source to share
Switch-case seems to be a special case for eslint regarding indentation. By default, sentences are case
not indented with respect to switch
:
"SwitchCase" (default: 0) applies indentation level for case clauses in switch statements
See an example here: http://eslint.org/docs/rules/indent#switchcase
You need to set the parameter SwitchCase
to 1 like this:
"indent": [
"error",
4,
{"SwitchCase": 1}
]
So your complete eslint config will look like this:
{
"env": {
"es6": true,
"node": true,
"jasmine": true
},
"extends": "eslint:recommended",
"parserOptions": {
},
"rules": {
"no-else-return": "error",
"no-multi-spaces": "error",
"no-whitespace-before-property": "error",
"camelcase": "error",
"new-cap": "error",
"no-console": "error",
"comma-dangle": "error",
"no-var": "error",
"indent": ["error", 4, {"SwitchCase": 1}],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
Regarding your second example, I think it is usually written like this:
obj.format('text', {
value: '${two}'
});
Both parentheses open on the same line, so you close them on the same line. If you use automatic format on these lines, they will not change.
The third example looks a little more complicated. I don't know if you can get eslint and auto format on the same page for this. I personally would prefer eslint, but I don't know if you can set up an automatic format to do it like this.
Edit: you can write like this:
return begin()
.then(() => callback()
.then(data => {
success = true;
return commit();
}, reason => {
return rollback();
}),
function(reason) {
update(false, false, reason);
return $p.reject(reason);
});
source to share