@stylistic/js/

operator-linebreak

ステートメントが1行に収まらないほど長い場合、一般的に式を区切る演算子の隣に改行が挿入されます。最初に思い浮かぶスタイルは、英語の句読点ルールに従って、行末に演算子を配置することです。

var fullHeight = borderTop +
                 innerHeight +
                 borderBottom;

一部の開発者は、行頭に演算子を配置する方がコードが読みやすくなると考えています。

var fullHeight = borderTop
               + innerHeight
               + borderBottom;

ルール詳細

このルールは、演算子の一貫した改行スタイルを強制します。

オプション

このルールには、文字列オプションとオブジェクトオプションの2つのオプションがあります。

文字列オプション

• "after" は、演算子の後に改行を配置することを要求します
• "before" は、演算子の前に改行を配置することを要求します
• "none" は、演算子のどちら側にも改行を許可しません

オブジェクトオプション

• "overrides" は、指定された演算子のグローバル設定を上書きします

デフォルト設定は、"after", { "overrides": { "?": "before", ":": "before" } } です

after

"after"オプションを使用した、このルールに違反する不正なコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after"]*/

foo = 1
+
2;

foo = 1
        
+
 2;

foo
        
=
 5;

if (someCondition
        
||
 otherCondition) {
}

answer = everything
    
?
 42
    
:
 foo;

class Foo {
    a
                
=
 1;
    [b]
                
=
 2;
    [c
    ]
                
=
 3;
}

不正

"after"オプションを使用した、このルールに適合する正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after"]*/

foo = 1 + 2;

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything ?
  42 :
  foo;

class Foo {
    a =
        1;
    [b] =
        2;
    [c
    ] =
        3;
    d = 4;
}

正しい

before

"before"オプションを使用した、このルールに違反する不正なコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "before"]*/

foo = 1 
+
      2;

foo 
=
    5;

if (someCondition 
||
    otherCondition) {
}

answer = everything 
?
  42 
:
  foo;

class Foo {
    a 
=
        1;
    [b] 
=
        2;
    [c
    ] 
=
        3;
}

不正

"before"オプションを使用した、このルールに適合する正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "before"]*/

foo = 1 + 2;

foo = 1
    + 2;

foo
    = 5;

if (someCondition
    || otherCondition) {
}

answer = everything
  ? 42
  : foo;

class Foo {
    a
        = 1;
    [b]
        = 2;
    [c
    ]
        = 3;
    d = 4;
}

正しい

none

"none"オプションを使用した、このルールに違反する不正なコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "none"]*/

foo = 1 
+
      2;

foo = 1
        
+
 2;

if (someCondition 
||
    otherCondition) {
}

if (someCondition
        
||
 otherCondition) {
}

answer = everything
    
?
 42
    
:
 foo;

answer = everything 
?
  42 
:
  foo;

class Foo {
    a 
=
        1;
    [b] 
=
        2;
    [c
    ] 
=
        3;
    d
                
=
 4;
    [e]
                
=
 5;
    [f
    ]
                
=
 6;
}

不正

"none"オプションを使用した、このルールに適合する正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "none"]*/

foo = 1 + 2;

foo = 5;

if (someCondition || otherCondition) {
}

answer = everything ? 42 : foo;

class Foo {
    a = 1;
    [b] = 2;
    [c
    ] = 3;
    d = 4;
    [e] = 5;
    [f
    ] = 6;
}

正しい

overrides

{ "overrides": { "+=": "before" } }オプションを使用した、このルールに違反する追加の不正なコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after", { "overrides": { "+=": "before" } }]*/

var thing = 'thing';
thing 
+=
  's';

不正

{ "overrides": { "+=": "before" } }オプションを使用した、このルールに適合する追加の正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after", { "overrides": { "+=": "before" } }]*/

var thing = 'thing';
thing
  += 's';

正しい

{ "overrides": { "?": "ignore", ":": "ignore" } }オプションを使用した、このルールに適合する追加の正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }]*/

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;

正しい

デフォルトの"after", { "overrides": { "?": "before", ":": "before" } }オプションを使用した、このルールに違反する不正なコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after", { "overrides": { "?": "before", ":": "before" } }]*/

foo = 1
+
2;

foo = 1
        
+
 2;

foo
        
=
 5;

if (someCondition
        
||
 otherCondition) {
}

answer = everything 
?
  42 
:
  foo;

不正

デフォルトの"after", { "overrides": { "?": "before", ":": "before" } }オプションを使用した、このルールに適合する正しいコードの例

/*eslint @stylistic/js/operator-linebreak: ["error", "after", { "overrides": { "?": "before", ":": "before" } }]*/

foo = 1 + 2;

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything
  ? 42
  : foo;

正しい

使用しない場合

プロジェクトで一般的な演算子の改行スタイルを使用しない場合は、このルールをオフにしてください。