operator-linebreak

为操作符强制执行一致的换行样式

🔧 Fixable

此规则报告的一些问题可通过 --fix 命令行选项自动修复

此规则在 ESLint v8.53.0 中已弃用。请在 @stylistic/eslint-plugin-js 中使用 相应的规则

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

当一条语句太长而不能放在一行中时,通常会在分隔表达式的运算符旁边插入换行符。想到的第一个样式是将运算符放在行尾,遵循英语标点规则。

¥When a statement is too long to fit on a single line, line breaks are generally inserted next to the operators separating expressions. The first style coming to mind would be to place the operator at the end of the line, following the English punctuation rules.

var fullHeight = borderTop +
                 innerHeight +
                 borderBottom;

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

¥Some developers find that placing operators at the beginning of the line makes the code more readable.

var fullHeight = borderTop
               + innerHeight
               + borderBottom;

规则详情

¥Rule Details

此规则为运算符强制执行一致的换行样式。

¥This rule enforces a consistent linebreak style for operators.

选项

¥Options

该规则有两个选项,一个字符串选项和一个对象选项。

¥This rule has two options, a string option and an object option.

字符串选项:

¥String option:

  • "after" 要求在运算符后面放置换行符

    ¥"after" requires linebreaks to be placed after the operator

  • "before" 要求在运算符之前放置换行符

    ¥"before" requires linebreaks to be placed before the operator

  • "none" 不允许操作符两侧出现换行符

    ¥"none" disallows linebreaks on either side of the operator

对象选项:

¥Object option:

  • "overrides" 覆盖指定运算符的全局设置

    ¥"overrides" overrides the global setting for specified operators

默认配置为 "after", { "overrides": { "?": "before", ":": "before" } }

¥The default configuration is "after", { "overrides": { "?": "before", ":": "before" } }

after

使用 "after" 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "after" option:

在线运行
/*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;
}

使用 "after" 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "after" option:

在线运行
/*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;
}

before

使用 "before" 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "before" option:

在线运行
/*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;
}

使用 "before" 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "before" option:

在线运行
/*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;
}

none

使用 "none" 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "none" option:

在线运行
/*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;
}

使用 "none" 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "none" option:

在线运行
/*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;
}

overrides

使用 { "overrides": { "+=": "before" } } 选项的此规则的其他错误代码示例:

¥Examples of additional incorrect code for this rule with the { "overrides": { "+=": "before" } } option:

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

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

使用 { "overrides": { "+=": "before" } } 选项的此规则的附加正确代码示例:

¥Examples of additional correct code for this rule with the { "overrides": { "+=": "before" } } option:

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

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

使用 { "overrides": { "?": "ignore", ":": "ignore" } } 选项的此规则的附加正确代码示例:

¥Examples of additional correct code for this rule with the { "overrides": { "?": "ignore", ":": "ignore" } } option:

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

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;

使用默认 "after", { "overrides": { "?": "before", ":": "before" } } 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the default "after", { "overrides": { "?": "before", ":": "before" } } option:

在线运行
/*eslint 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" } } 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the default "after", { "overrides": { "?": "before", ":": "before" } } option:

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

foo = 1 + 2;

foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything
  ? 42
  : foo;

何时不使用

¥When Not To Use It

如果你的项目不会使用常见的运算符换行样式,请关闭此规则。

¥If your project will not be using a common operator line break style, turn this rule off.

版本

此规则是在 ESLint v0.19.0 中引入。

资源

ESLint 中文网
粤ICP备13048890号