跳至内容

@stylistic/

object-property-newline

此规则允许您限制对象字面量中属性规范的位置。您可以禁止任何属性规范的任何部分出现在与任何其他属性规范的任何部分相同的行上。您可以使此禁止绝对化,或者,通过调用对象选项,您可以允许一个例外,允许对象字面量在其所有属性规范的所有部分都位于同一行上。

规则详细信息

动机

此规则使得能够确保,正如某些样式指南所要求的那样,属性规范出现在单独的行上以提高可读性。例如,您可以禁止所有这些

js
const newObject = {a: 1, b: [2, {a: 3, b: 4}]};
const newObject = {
    a: 1, b: [2, {a: 3, b: 4}]
};
const newObject = {
    a: 1,
    b: [2, {a: 3, b: 4}]
};
const newObject = {
    a: 1,
    b: [
        2,
        {a: 3, b: 4}
    ]
};

而不是那些,您可以通过编写以下内容来遵守规则

js
const newObject = {
    a: 1,
    b: [2, {
        a: 3,
        b: 4
    }]
};

js
const newObject = {
    a: 1,
    b: [
        2,
        {
            a: 3,
            b: 4
        }
    ]
};

此规则的另一个好处是,当更改属性时,差异的具体性

diff
// More specific
 var obj = {
     foo: "foo",
-    bar: "bar",
+    bar: "bazz",
     baz: "baz"
 };
diff
// Less specific
-var obj = { foo: "foo", bar: "bar", baz: "baz" };
+var obj = { foo: "foo", bar: "bazz", baz: "baz" };

可选例外

该规则提供了一个对象选项,allowAllPropertiesOnSameLine(一个已弃用的同义词是 allowMultiplePropertiesPerLine)。如果您将其设置为 true,则允许像上面前两个这样的对象字面量,所有属性规范都在同一行上,但像

js
const newObject = {
    a: 'a.m.', b: 'p.m.',
    c: 'daylight saving time'
};

将被禁止,因为两个属性(但不是所有属性)出现在同一行。

符号

此规则适用于所有属性规范,无论符号如何,包括

  • a: 1 (ES5)
  • a (ES2015 简写属性)
  • [`prop${a}`] (ES2015 计算属性名)

因此,该规则(不包括可选例外)禁止以下两种情况

js
const newObject = {
    a: 1, [
        process.argv[4]
    ]: '01'
};
const newObject = {
    a: 1, [process.argv[4]]: '01'
};

(此行为与下面引用的 JSCS 规则不同,JSCS 规则不将计算属性名的前导 [ 视为该属性规范的一部分。JSCS 规则禁止第二种格式,但允许第一种格式。)

多行属性

该规则禁止在任何一行上将至少 1 个字符的属性规范与至少 1 个字符的任何其他属性规范并置。例如,该规则禁止

js
const newObject = {a: [
    'Officiële website van de Europese Unie',
    'Официален уебсайт на Европейския съюз'
], b: 2};

因为 a 的规范的 1 个字符(即其值的尾随 ])与 b 的规范位于同一行。

可选例外不适用于这种情况,因为整个属性规范集合跨越 4 行,而不是 1 行。

属性间分隔符

逗号和分隔属性规范的任何空格不被视为其一部分。因此,该规则允许以下两种格式

js
const newFunction = multiplier => ({
    a: 2 * multiplier,
    b: 4 * multiplier,
    c: 8 * multiplier
});
const newFunction = multiplier => ({
    a: 2 * multiplier
    , b: 4 * multiplier
    , c: 8 * multiplier
});

(此行为与下面引用的 JSCS 规则不同,JSCS 规则允许第一种格式,但禁止第二种格式。)

--fix

如果此规则与命令行 --fix 选项一起调用,则违反该规则的对象字面量通常会被修改以符合该规则。每种情况下的修改是在同一行上存在先前属性规范的一部分或全部时,将属性规范移动到下一行。例如,

js
const newObject = {
    a: 'a.m.', b: 'p.m.',
    c: 'daylight saving time'
};

被转换为

js
const newObject = {
    a: 'a.m.',
b: 'p.m.',
    c: 'daylight saving time'
};

修改不取决于对象选项是否设置为 true。换句话说,即使对象选项允许,ESLint 也不会将所有属性规范收集到单行上。

如果在同一行上的第二个或后续属性规范之前紧跟注释,ESLint 不会纠正此规则的违规行为,因为 ESLint 无法确定将注释放在哪一行。

如上所示,应用于此规则的 --fix 选项不符合其他规则,例如 indent,但如果这些其他规则也生效,则该选项也会应用它们。

示例

此规则的不正确代码示例,没有对象选项或 allowAllPropertiesOnSameLine 设置为 false

js
/*eslint @stylistic/object-property-newline: "error"*/

const obj0 = { foo: "foo", 
bar
: "bar",
baz
: "baz" };
const obj1 = { foo: "foo",
bar
: "bar",
baz
: "baz"
}; const obj2 = { foo: "foo",
bar
: "bar",
baz: "baz" }; const obj3 = { [process.argv[3] ? "foo" : "bar"]: 0,
baz
: [
1, 2, 4, 8 ] }; const a = "antidisestablishmentarianistically"; const b = "yugoslavyalılaştırabildiklerimizdenmişsiniz"; const obj4 = {a,
b
};
const domain = process.argv[4]; const obj5 = { foo: "foo",
[
domain.includes(":") ? "complexdomain" : "simpledomain" ]: true};
不正确

此规则的正确代码示例,没有对象选项或 allowAllPropertiesOnSameLine 设置为 false

js
/*eslint @stylistic/object-property-newline: "error"*/

const obj1 = {
    foo: "foo",
    bar: "bar",
    baz: "baz"
};

const obj2 = {
    foo: "foo"
    , bar: "bar"
    , baz: "baz"
};

const user = process.argv[2];
const obj3 = {
    user,
    [process.argv[3] ? "foo" : "bar"]: 0,
    baz: [
        1,
        2,
        4,
        8
    ]
};
正确

此规则的具有 { "allowAllPropertiesOnSameLine": true } 选项的附加正确代码示例

js
/*eslint @stylistic/object-property-newline: ["error", { "allowAllPropertiesOnSameLine": true }]*/

const obj = { foo: "foo", bar: "bar", baz: "baz" };

const obj2 = {
    foo: "foo", bar: "bar", baz: "baz"
};
const user = process.argv[2];
const obj3 = {
    user, [process.argv[3] ? "foo" : "bar"]: 0, baz: [1, 2, 4, 8]
};
正确

何时不使用它

如果您想逐案决定是否将属性规范放在单独的行上,可以关闭此规则。

兼容性