`no-mixed-operators`

複雑な式を括弧で囲むことで、開発者の意図が明確になり、コードの可読性が向上します。このルールは、式の中で括弧なしで異なる演算子が連続して使用されている場合に警告します。

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*/

注意: このルールでは、ペアになっている混合演算子ごとに1つのエラーを出すことが想定されています。その結果、連続して使用される2つの混合演算子ごとに、ルールに違反する特定の演算子が使用されている場所を指し示す異なるエラーが表示されます。

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オプションを使用する必要があります。

このルールの不正なコードの例

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

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

不正

このルールの正しいコードの例

/*eslint @stylistic/js/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;

正しい

オプション

json

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

このルールには2つのオプションがあります。

groups (string[][]) - チェックする演算子グループを指定します。groupsオプションはグループのリストであり、グループは2項演算子のリストです。デフォルトの演算子グループは、算術、ビット演算、比較、論理、および関係演算子として定義されています。
注: 合体演算子 ("??") と三項演算子 ("?:") は、デフォルト設定ではどのグループにも属していないため、他のすべての演算子と混合できます。
allowSamePrecedence (boolean) - 優先順位が同じである場合に、混合演算子を許可するかどうかを指定します。デフォルトはtrueです。

groups

次の演算子は、groupsオプションで使用できます。

算術演算子: "+", "-", "*", "/", "%", "**"
ビット演算子: "&", "|", "^", "~", "<<", ">>", ">>>"
比較演算子: "==", "!=", "===", "!==", ">", ">=", "<", "<="
論理演算子: "&&", "||"
関係演算子: "in", "instanceof"
合体演算子: "??"
三項演算子: "?:"

このルールは、構成された各グループを個別にチェックします。同じグループ内の演算子が (括弧を使用せずに) 混在している場合にのみ、警告またはエラーがトリガーされます。グループ間の使用はチェックされません。次に、次のグループ構成を検討してください: {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}。この構成では、ビット演算子と論理演算子の2つのグループが指定されています。この場合、このルールは、ビット演算子がビット演算子と混在しているか、論理演算子が論理演算子と混在しているかをチェックしますが、他のすべての演算子は無視します。

{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}オプションを使用した、このルールの不正なコードの例

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

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

不正

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

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

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

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

不正

{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}オプションを使用した、このルールの正しいコードの例

/*eslint @stylistic/js/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;

正しい

/*eslint @stylistic/js/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;

正しい

allowSamePrecedence

{"allowSamePrecedence": true}オプションを使用した、このルールの正しいコードの例

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

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

正しい

{"allowSamePrecedence": false}オプションを使用した、このルールの不正なコードの例

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

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

不正

{"allowSamePrecedence": false}オプションを使用した、このルールの正しいコードの例

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

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

正しい

使用しない場合

混合演算子について通知を受けたくない場合は、このルールを無効にしても安全です。

no-mixed-operators ​

ルールの詳細 ​

オプション ​

groups ​

allowSamePrecedence ​

使用しない場合 ​