如何为 WebStorm 配置 eslint 缩进？

Question

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

Answer 1

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

Answer 2

I have fixed it by added the indent configuration into the file .eslintrc.js

module.exports = {
    "rules": {
        "indent": ["error", 4]
    }
};

Answer 3

Seems you are getting the error due to WebStorm formatting.

---

Solution

In webstorm :

• File -> Setting
• Go to Editor -> Code Style -> HTML
• In Do not indent children of , add tag script .
• Then format the source code again.

Then the error should be gone.

---

Screen shot: