operator-linebreak

強制運算子的換行風格一致

🔧

此規則報告的某些問題可以透過 --fix 命令列選項自動修正

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中對應的規則。

當陳述式太長而無法放在單行時，通常會在分隔運算式的運算子旁邊插入換行符號。首先想到的風格是將運算子放在行的末尾，遵循英文標點符號規則。

var fullHeight = borderTop +
                 innerHeight +
                 borderBottom;
1
2
3

有些開發人員發現將運算子放在行的開頭可以使程式碼更具可讀性。

var fullHeight = borderTop
               + innerHeight
               + borderBottom;
1
2
3

規則詳細資訊

此規則強制運算子的換行風格一致。

選項

此規則有兩個選項，一個字串選項和一個物件選項。

字串選項

"after" 要求換行符號放在運算子之後
"before" 要求換行符號放在運算子之前
"none" 不允許在運算子兩側換行

物件選項

"overrides" 覆蓋指定運算子的全域設定

預設設定為 "after", { "overrides": { "?": "before", ":": "before" } }

after

此規則使用 "after" 選項的不正確程式碼範例

在遊樂場中開啟

/*eslint 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

此規則使用 "after" 選項的正確程式碼範例

在遊樂場中開啟

/*eslint 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

before

此規則使用 "before" 選項的不正確程式碼範例

在遊樂場中開啟

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

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything ?
  42 :
  foo;

class Foo {
    a =
        1;
    [b] =
        2;
    [c
    ] =
        3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

此規則使用 "before" 選項的正確程式碼範例

在遊樂場中開啟

/*eslint 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

none

此規則使用 "none" 選項的不正確程式碼範例

在遊樂場中開啟

/*eslint 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

此規則使用 "none" 選項的正確程式碼範例

在遊樂場中開啟

/*eslint 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

overrides

此規則使用 { "overrides": { "+=": "before" } } 選項的額外不正確程式碼範例

在遊樂場中開啟

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

var thing = 'thing';
thing +=
  's';
1
2
3
4
5

此規則使用 { "overrides": { "+=": "before" } } 選項的額外正確程式碼範例

在遊樂場中開啟

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

var thing = 'thing';
thing
  += 's';
1
2
3
4
5

此規則使用 { "overrides": { "?": "ignore", ":": "ignore" } } 選項的額外正確程式碼範例

在遊樂場中開啟

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

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;
1
2
3
4
5
6
7
8
9
10
11

此規則使用預設 "after", { "overrides": { "?": "before", ":": "before" } } 選項的不正確程式碼範例

在遊樂場中開啟

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

foo = 1
+
2;

foo = 1
    + 2;

foo
    = 5;

if (someCondition
    || otherCondition) {
}

answer = everything ?
  42 :
  foo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此規則使用預設 "after", { "overrides": { "?": "before", ":": "before" } } 選項的正確程式碼範例

在遊樂場中開啟

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

foo = 1 + 2;

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything
  ? 42
  : foo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

何時不使用它

如果您的專案不會使用常見的運算子換行風格，請關閉此規則。

版本

此規則在 ESLint v0.19.0 中引入。

資源

編輯此頁面

operator-linebreak

規則詳細資訊

選項

after

before

none

overrides

何時不使用它

相關規則

版本

資源