如何為 WebStorm 配置 eslint 縮進？

Question

如何在.eslintr.json設置"indent"以匹配.eslintr.json中使用的默認值？

到目前為止，我嘗試過的一切，根據官方文檔都無法匹配：

• "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]的代碼示例"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

Answer 1

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

Answer 2

我通過將縮進配置添加到文件.eslintrc.js 中來修復它

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

Answer 3

由於WebStorm格式，您似乎收到錯誤WebStorm 。

---

解決方案

在網絡webstorm ：

• File -> Setting
• 轉到Editor -> Code Style -> HTML
• 在Do not indent children of ，添加標記script 。
• 然后再次格式化源代碼。

那么錯誤應該消失了。

---

截屏：