如何为WebStorm配置eslint缩进?(How to configure eslint indent for WebStorm?)

编程入门 行业动态 更新时间:2024-10-09 22:15:44
何为WebStorm配置eslint缩进?(How to configure eslint indent for WebStorm?)

如何在.eslintr.json设置"indent"以匹配.eslintr.json中使用的默认值?

到目前为止我所尝试的一切,根据官方文档都无法与之匹敌:

"indent": ["error", 2] - 给出Expected indentation of 2 spaces but found 4许多Expected indentation of 2 spaces but found 4 "indent": ["error", 4] - 给出Expected indentation of 4 spaces but found 8许多Expected indentation of 4 spaces but found 8 "indent": ["error", 8] - 给出Expected indentation of 8 spaces but found 4许多Expected indentation of 8 spaces but found 4

我完整的eslint配置:

{ "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" ] } }

当我输入代码时,我总是使用Ctrl+Alt+L来自动格式化代码,并且生成的代码格式不符合任何eslint设置。


UPDATE

正如所提到的, "indent": ["error", 4]的代码示例"indent": ["error", 4] :

对于此代码:(通过Ctrl + Alt + L格式化)

const a = 123; switch (a) { case 1: return 1; case 2: return 2; case 3: return 3; default: break; }

结果是:

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

例2

obj.format('text', { value: '${two}' } );

结果是:

2:1 error Expected indentation of 4 spaces but found 8 3:1 error Expected indentation of 0 spaces but found 4

例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); });

结果是:

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

How to set "indent" in .eslintr.json to match the default used in WebStorm?

Everything I've tried so far, as per the official documentation can't match it:

"indent": ["error", 2] - gives many Expected indentation of 2 spaces but found 4 "indent": ["error", 4] - gives many Expected indentation of 4 spaces but found 8 "indent": ["error", 8] - gives many Expected indentation of 8 spaces but found 4

My complete eslint configuration:

{ "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" ] } }

As I type the code, I always use Ctrl+Alt+L to auto-format the code, and the code formatting produced doesn't comply with any eslint settings.


UPDATE

As was asked, a code example for "indent": ["error", 4]:

For this code: (formatted via Ctrl+Alt+L)

const a = 123; switch (a) { case 1: return 1; case 2: return 2; case 3: return 3; default: break; }

results in:

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}' } );

results in:

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); });

results in:

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

最满意答案

Switch-Case似乎是关于缩进的eslint的特殊情况。 默认case下, case子句不是相对于switch缩进的:

“SwitchCase”(默认值:0)对switch语句中的case子句强制执行缩进级别

请参阅此处以获取示例: http : //eslint.org/docs/rules/indent#switchcase

您需要将SwitchCase选项设置为1,如下所示:

"indent": [ "error", 4, {"SwitchCase": 1} ]

所以你的完整eslint配置现在看起来像这样:

{ "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" ] } }

关于你的第二个例子,我认为通常这样写:

obj.format('text', { value: '${two}' });

两个括号都在同一行上打开,因此您可以在同一行上关闭它们。 如果您在该行上使用自动格式,它们将不会更改。

第三个例子看起来有点棘手。 我不知道你是否可以在同一页面上获得eslint和自动格式。 我个人更喜欢eslint方式,但我不知道你是否可以调整自动格式来做到这一点。

编辑:您可以这样写:

return begin() .then(() => callback() .then(data => { success = true; return commit(); }, reason => { return rollback(); }), function(reason) { update(false, false, reason); return $p.reject(reason); });

Switch-Case seems to be a special case for eslint regarding indentation. Per default the case clauses are not indented relative to the switch:

"SwitchCase" (default: 0) enforces indentation level for case clauses in switch statements

See here for an example: http://eslint.org/docs/rules/indent#switchcase

You need to set SwitchCase option to 1 like so:

"indent": [ "error", 4, {"SwitchCase": 1} ]

So your complete eslint config will now 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 2nd example I think it is common to write it like this:

obj.format('text', { value: '${two}' });

Both parenthesis are opened on the same line, so you close them on the same line. If you use auto format on that lines, they will not change.

The third example looks a bit tricky. I don't know if you can get eslint and auto format on the same page for that one. I personally would prefer the eslint way, but I don't know if you can tweak the auto format to do it like that.

Edit: You could write it like that:

return begin() .then(() => callback() .then(data => { success = true; return commit(); }, reason => { return rollback(); }), function(reason) { update(false, false, reason); return $p.reject(reason); });

更多推荐

本文发布于:2023-08-07 11:20:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1464161.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:何为   WebStorm   eslint   configure   indent

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!