@stylistic/

operator-linebreak

当语句过长而无法在一行内容纳时，通常会在运算符旁边插入换行符，以分隔表达式。首先想到的风格是将运算符放在行尾，遵循英语标点符号规则。

var fullHeight = borderTop +
                 innerHeight +
                 borderBottom;

一些开发者发现将运算符放在行首会使代码更易读。

var fullHeight = borderTop
               + innerHeight
               + borderBottom;

规则详情

此规则强制对运算符进行一致的换行风格。

选项

此规则有两个选项，一个字符串选项和一个对象选项。

字符串选项

• "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;
}

incorrect

使用 "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;
}

correct

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;
}

incorrect

使用 "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;
}

correct

无

使用 "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;
}

incorrect

使用 "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;
}

correct

覆盖

使用 { "overrides": { "+=": "before" } } 选项时，此规则的额外错误代码示例

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

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

incorrect

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

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

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

correct

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

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

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;

correct

使用默认 "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;

incorrect

使用默认 "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;

correct

何时不使用它

如果您的项目不使用通用的运算符换行风格，请关闭此规则。