object-property-newline
強制將物件屬性放在不同的行上
此規則報告的一些問題可透過 --fix
命令列選項自動修正
此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-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}
]
};
您可以透過寫入以下內容來遵守規則,而不是上述內容
const newObject = {
a: 1,
b: [2, {
a: 3,
b: 4
}]
};
或
const newObject = {
a: 1,
b: [
2,
{
a: 3,
b: 4
}
]
};
此規則的另一個好處是在變更屬性時可以更清楚地顯示差異
// More specific
var obj = {
foo: "foo",
- bar: "bar",
+ bar: "bazz",
baz: "baz"
};
// Less specific
-var obj = { foo: "foo", bar: "bar", baz: "baz" };
+var obj = { foo: "foo", bar: "bazz", baz: "baz" };
可選例外
此規則提供一個物件選項,allowAllPropertiesOnSameLine
(一個已棄用的同義詞是 allowMultiplePropertiesPerLine
)。如果您將其設定為 true
,則允許物件字面值(例如上面前兩個),所有屬性規格都在同一行上,但像以下這樣的物件字面值會被禁止
const newObject = {
a: 'a.m.', b: 'p.m.',
c: 'daylight saving time'
};
因為有兩個屬性(但不是所有屬性)出現在同一行上。
符號
此規則同樣適用於所有屬性規格,無論使用何種符號,包括
a: 1
(ES5)a
(ES2015 簡寫屬性)[`prop${a}`]
(ES2015 計算屬性名稱)
因此,此規則(沒有可選例外)禁止以下兩種格式
const newObject = {
a: 1, [
process.argv[4]
]: '01'
};
const newObject = {
a: 1, [process.argv[4]]: '01'
};
(此行為與下面引用的 JSCS 規則不同,後者不將計算屬性名稱的前導 [
視為該屬性規格的一部分。JSCS 規則禁止第二種格式,但允許第一種格式。)
多行屬性
此規則禁止將至少一個屬性規格的 1 個字元與任何其他屬性規格的至少 1 個字元放置在同一行上。例如,此規則禁止
const newObject = {a: [
'Officiële website van de Europese Unie',
'Официален уебсайт на Европейския съюз'
], b: 2};
因為 a
的規格的 1 個字元(即其值的後面的 ]
)與 b
的規格在同一行上。
可選例外並不適用於此情況,因為整個屬性規格集合跨越 4 行,而不是 1 行。
屬性間分隔符號
逗號和任何分隔屬性規格的空白不被視為屬性規格的一部分。因此,此規則允許以下兩種格式
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
選項調用此規則,則通常會修改違反此規則的物件字面值以符合該規則。在每種情況下,修改都是在同一行上有前一個屬性規格的部分或全部時,將屬性規格移動到下一行。例如,
const newObject = {
a: 'a.m.', b: 'p.m.',
c: 'daylight saving time'
};
會轉換為
const newObject = {
a: 'a.m.',
b: 'p.m.',
c: 'daylight saving time'
};
修改不取決於物件選項是否設定為 true
。換句話說,即使物件選項允許,ESLint 也永遠不會將所有屬性規格收集到同一行上。
如果註解緊接在一行的第二個或後續屬性規格之前,則 ESLint 不會更正此規則的違規行為,因為 ESLint 無法確定要將註解放在哪一行上。
如上所示,應用於此規則的 --fix
選項不符合其他規則(例如 indent
),但是,如果其他規則也有效,則該選項也會應用它們。
範例
此規則的不正確程式碼範例,沒有物件選項或將 allowAllPropertiesOnSameLine
設定為 false
/*eslint object-property-newline: "error"*/
const obj0 = { foo: "foo", : "bar", : "baz" };
const obj1 = {
foo: "foo", : "bar", : "baz"
};
const obj2 = {
foo: "foo", : "bar",
baz: "baz"
};
const obj3 = {
[process.argv[3] ? "foo" : "bar"]: 0, : [
1,
2,
4,
8
]
};
const a = "antidisestablishmentarianistically";
const b = "yugoslavyalılaştırabildiklerimizdenmişsiniz";
const obj4 = {a, };
const domain = process.argv[4];
const obj5 = {
foo: "foo",
domain.includes(":") ? "complexdomain" : "simpledomain"
]: true};
此規則的正確程式碼範例,沒有物件選項或將 allowAllPropertiesOnSameLine
設定為 false
/*eslint 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 }
選項時,此規則的額外正確程式碼範例
/*eslint 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]
};
何時不使用
如果您想逐個案例決定是否將屬性規格放在不同的行上,您可以關閉此規則。
相容性
- JSCS:此規則提供與 requireObjectKeysOnNewLine 的部分相容性。
相關規則
版本
此規則在 ESLint v2.10.0 中引入。