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" 选项时，错误代码示例

在 Playground 中打开

/*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" 选项时，正确代码示例

在 Playground 中打开

/*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" 选项时，错误代码示例

在 Playground 中打开

/*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" 选项时，正确代码示例

在 Playground 中打开

/*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" 选项时，错误代码示例

在 Playground 中打开

/*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" 选项时，正确代码示例

在 Playground 中打开

/*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" } } 选项时，额外的错误代码示例

在 Playground 中打开

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

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

使用 { "overrides": { "+=": "before" } } 选项时，额外的正确代码示例

在 Playground 中打开

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

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

使用 { "overrides": { "?": "ignore", ":": "ignore" } } 选项时，额外的正确代码示例

在 Playground 中打开

/*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" } } 选项时，错误代码示例

在 Playground 中打开

/*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" } } 选项时，正确代码示例

在 Playground 中打开

/*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 (覆盖)

何时不使用

相关规则

版本

资源