# operator-linebreak

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

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

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

var fullHeight = borderTop +
                 innerHeight +
                 borderBottom;

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

var fullHeight = borderTop
               + innerHeight
               + borderBottom;

# 规则详情

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

# 选项

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

字符串选项:

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

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

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

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

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

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

# overrides

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

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

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

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

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

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

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

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

answer = everything ?
  42
  : foo;

answer = everything
  ?
  42
  :
  foo;

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

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

# 何时不使用

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

Last Updated: 5/13/2023, 8:55:38 PM