能否自定义配置ESLint以匹配偏好的三元运算符缩进风格？

嘿，这个需求完全可以搞定！通过组合ESLint内置规则，再配合可选的自定义规则，就能完美匹配你偏好的三元运算符风格。我来一步步给你说明：

先明确目标格式 #

先把你想要的风格落地成代码示例，这样配置起来更清晰：

// 单层三元：括号包裹、各部分换行、运算符行首、统一缩进
const one = (
    true
    ? 1
    : 2
);

// 嵌套三元：内层同样遵循规则
const two = (
    true
    ? 1
    : (
        false
        ? 2
        : 3
    )
);

第一步：用内置规则搭建基础配置 #

你需要三个核心内置规则来配合：

1. indent：控制缩进一致性 #

调整indent规则的参数，让三元表达式的所有部分保持相同缩进：

"indent": ["warn", 4, {
    "flatTernaryExpressions": true, // 强制三元的条件、结果、分支保持同一缩进级别
    "offsetTernaryExpressions": false
}]

2. operator-linebreak：让运算符站在行首 #

这个规则专门控制运算符的换行位置，我们把?和:强制放在行首：

"operator-linebreak": ["error", "before", {
    "overrides": {
        "?": "before",
        ":": "before"
    }
}]

3. no-extra-parens：允许三元表达式加括号 #

默认ESLint会把三元外面的括号视为“多余”，所以需要配置这个规则允许这种写法：

"no-extra-parens": ["error", "all", {
    "ternary": true // 不把三元表达式的包裹括号判定为多余
}]

把这三个规则组合到你的.eslintrc里，就已经能实现大部分需求了。

第二步：处理嵌套三元的细节 #

上面的配置对单层三元完全适用，嵌套三元的内层括号内容也会自动保持统一缩进——刚好符合你“所有内容保持相同缩进”的要求。如果后续发现嵌套部分的缩进不符合预期，可以微调indent的ignoredNodes参数，但一般默认配置就够用。

第三步：可选——强制三元必须加括号 #

如果想要强制所有三元表达式都必须用括号包裹（而不是仅仅允许），ESLint没有内置规则能直接做到，这时候可以写一个简单的自定义规则。

比如在项目里新建一个eslint-rules/require-ternary-parens.js文件，内容如下：

module.exports = {
    meta: {
        type: "layout",
        docs: {
            description: "Enforce ternary expressions to be wrapped in parentheses",
            category: "Stylistic Issues"
        },
        fixable: "code", // 支持自动修复
        schema: []
    },
    create: function(context) {
        return {
            ConditionalExpression(node) {
                // 检查当前三元表达式是否被括号包裹
                if (node.parent.type !== "ParenthesizedExpression") {
                    context.report({
                        node: node,
                        message: "Ternary expression must be wrapped in parentheses",
                        fix: fixer => fixer.replaceText(node, `(${context.getSourceCode().getText(node)})`)
                    });
                }
            }
        };
    }
};

然后在你的ESLint配置里引入这个自定义规则：

{
    "rules": {
        "./eslint-rules/require-ternary-parens.js": "error"
    }
}

这样就能自动检查并修复没有加括号的三元表达式了。

最终效果 #

把这些配置都加上后，你的代码就会自动对齐到你想要的风格，ESLint也会实时检查不符合规则的写法。

内容的提问来源于stack exchange，提问作者James Long