@stylistic/

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/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/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/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/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/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/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/operator-linebreak: ["error", "after", { "overrides": { "+=": "before" } }]*/

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

不正

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

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

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

正しい

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

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

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;

正しい

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

/*eslint @stylistic/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/operator-linebreak: ["error", "after", { "overrides": { "?": "before", ":": "before" } }]*/

foo = 1 + 2;

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything
  ? 42
  : foo;

正しい

使用しない場合

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