ESLint 样式

外观

@stylistic/

no-mixed-operators ​

用括号将复杂的表达式括起来可以明确开发者的意图，使代码更易读。此规则会在表达式中连续使用不同的运算符而没有括号时发出警告。

js
var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

注意： 预计此规则会为每对混合运算符发出一个错误。因此，对于每两个连续使用的混合运算符，都会显示一个不同的错误，指明违反规则的特定运算符的使用位置。

js
var foo = a && b || c || d;

将生成

shell
1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)

规则详细信息 ​

此规则检查 BinaryExpression、LogicalExpression 和 ConditionalExpression。

此规则可能与 no-extra-parens 规则冲突。如果您同时使用此规则和 no-extra-parens 规则，则需要使用 no-extra-parens 规则的 nestedBinaryExpressions 选项。

此规则的不正确代码示例

js
/*eslint @stylistic/no-mixed-operators: "error"*/

var foo = a 
&&
 b < 0 
||
 c > 0 || d + 1 === 0;
var foo = a 
+
 b 
*
 c;
incorrect

此规则的正确代码示例

js
/*eslint @stylistic/no-mixed-operators: "error"*/

var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;
correct

选项 ​

json
{
    "no-mixed-operators": [
        "error",
        {
            "groups": [
                ["+", "-", "*", "/", "%", "**"],
                ["&", "|", "^", "~", "<<", ">>", ">>>"],
                ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                ["&&", "||"],
                ["in", "instanceof"]
            ],
            "allowSamePrecedence": true
        }
    ]
}

此规则有 2 个选项。

  • groups (string[][]) - 指定要检查的运算符组。groups 选项是一个组列表，而组是一个二元运算符列表。默认运算符组定义为算术、按位、比较、逻辑和关系运算符。
    注意：合并运算符 ("??") 和三元运算符 ("?:") 在默认配置中不属于任何组，因此允许与所有其他运算符混合使用。

  • allowSamePrecedence (boolean) - 指定是否允许混合运算符，前提是它们具有相同的优先级。默认值为 true。

groups ​

在 groups 选项中可以使用以下运算符

  • 算术运算符："+", "-", "*", "/", "%", "**"
  • 位运算符："&", "|", "^", "~", "<<", ">>", ">>>"
  • 比较运算符："==", "!=", "===", "!==", ">", ">=", "<", "<="
  • 逻辑运算符："&&", "||"
  • 关系运算符："in", "instanceof"
  • 合并运算符："??"
  • 三元运算符："?:"

该规则会分别检查每个配置的组 - 只有当同一组内的运算符混合使用（不使用括号）时才会触发警告或错误。不会检查组间使用情况。现在，考虑以下组配置：{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}。此配置中指定了 2 个组：位运算符和逻辑运算符。在这种情况下，此规则会检查位运算符是否与位运算符混合使用，以及逻辑运算符是否与逻辑运算符混合使用，但会忽略所有其他运算符。

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项时，此规则的错误代码示例

js
/*eslint @stylistic/no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a 
&&
 b < 0 
||
 c > 0 || d + 1 === 0;
var foo = a 
&
 b 
|
 c;
incorrect
js
/*eslint @stylistic/no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = a 
||
 b 
?
 c : d;

var bar = a 
?
 b 
||
 c : d;

var baz = a 
?
 b : c 
||
 d;
incorrect

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项时，此规则的正确代码示例

js
/*eslint @stylistic/no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a || b > 0 || c + 1 === 0;
var foo = a && b > 0 && c + 1 === 0;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
var foo = (a & b) | c;
var foo = a & (b | c);
var foo = a + b * c;
var foo = a + (b * c);
var foo = (a + b) * c;
correct
js
/*eslint @stylistic/no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = (a || b) ? c : d;
var foo = a || (b ? c : d);

var bar = a ? (b || c) : d;

var baz = a ? b : (c || d);
var baz = (a ? b : c) || d;
correct

allowSamePrecedence ​

使用 {"allowSamePrecedence": true} 选项时，此规则的正确代码示例

js
/*eslint @stylistic/no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/

// + and - belong to the same default group; they have the same precedence.
var foo = a + b - c;
correct

使用 {"allowSamePrecedence": false} 选项时，此规则的错误代码示例

js
/*eslint @stylistic/no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - belong to the same default group; they have the same precedence.
var foo = a 
+
 b 
-
 c;
incorrect

使用 {"allowSamePrecedence": false} 选项时，此规则的正确代码示例

js
/*eslint @stylistic/no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - belong to the same default group; they have the same precedence.
var foo = (a + b) - c;
correct

何时不使用它 ​

如果您不想收到有关混合运算符的通知，则可以安全地禁用此规则。