如何为WebStorm配置eslint缩进?

时间:2017-06-24 14:58:32

标签: javascript webstorm eslint

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

enter image description here

到目前为止我所尝试过的所有内容,根据the official documentation都无法与之匹敌:

  • "indent": ["error", 2] - 提供了许多Expected indentation of 2 spaces but found 4
  • "indent": ["error", 4] - 提供了许多Expected indentation of 4 spaces but found 8
  • "indent": ["error", 8] - 提供了许多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设置。

更新

正如所提到的,"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

3 个答案:

答案 0 :(得分:5)

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

  

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

请点击此处查看示例: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);
        });

答案 1 :(得分:1)

我通过将缩进配置添加到文件 .eslintrc.js

中来修复它
module.exports = {
    "rules": {
        "indent": ["error", 4]
    }
};

答案 2 :(得分:0)

似乎由于WebStorm格式而出现错误。


解决方案

webstorm中:

  • File-> Setting
  • 转到Editor-> Code Style-> HTML
  • Do not indent children of中,添加标签script
  • 然后再次格式化源代码。

然后错误应该消失了。


屏幕截图: