跳至内容

@stylistic/js/

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 规则禁止第二种格式,但允许第一种格式。)

多行属性

此规则禁止在任何一行上将至少 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 规则不同,该规则允许第一种格式,但禁止第二种格式。)

--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/js/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/js/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/js/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]
};
正确

何时不使用它

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

兼容性