如何配置ESLint使switch的case与break保持相同缩进？

当前ESLint要求我按以下格式编写switch语句才能通过校验：

switch (value) {
    case "a":
        // do something....
        break;
    case "b":
        // do something....
        break;
}

但我希望将break与case同级对齐，使用以下格式：

switch (value) {
    case "a":
        // do something....
    break;
    case "b":
        // do something....
    break;
}

我的ESLint规则配置如下：

"rules": {
        "no-constant-condition": "error",
        "no-delete-var": "error",
        "no-empty": "error",
        "no-empty-character-class": "error",
        "no-trailing-spaces": "error",
        "no-undef": "error",
        "no-var": "off",
        "consistent-this": ["error", "that"],
        "vue/attribute-hyphenation": "off",
        "vue/max-attributes-per-line": ["error", {
            "singleline": 10,
            "multiline": {
                "max": 10,
                "allowFirstLine": true
            }
        }],
        "vue/html-self-closing": "off",
        "vue/html-indent": ["error", 4],
        "vue/order-in-components": "off",
        "vue/singleline-html-element-content-newline": "off",
        "vue/script-indent": ["error", 4, {
            "baseIndent": 1,
            "switchCase": 1,
            "ignores": []
        }],
        "semi": ["error", "always"],
        "semi-spacing": [0, {
            "after": true,
            "before": false
        }],
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/member-delimiter-style": [
            "error",
            {
                "multiline": {
                    "delimiter": "semi",
                    "requireLast": true
                },
                "singleline": {
                    "delimiter": "semi",
                    "requireLast": true
                }
            }
        ]
    }

你需要修改vue/script-indent规则的ignores配置，将BreakStatement（break语句对应的AST节点类型）加入忽略列表，这样ESLint就不会校验break语句的缩进，允许你将其与case同级对齐。

修改后的vue/script-indent配置如下：

"vue/script-indent": ["error", 4, {
    "baseIndent": 1,
    "switchCase": 1,
    "ignores": ["BreakStatement"]
}]

如果你的项目中同时启用了原生ESLint的indent规则，也需要对其做相同修改：

"indent": ["error", 4, {
    "switchCase": 1,
    "ignores": ["BreakStatement"]
}]

这样修改后，你就可以按照偏好的格式编写switch语句，同时通过ESLint校验。

内容的提问来源于stack exchange，提问作者ice-creams丶