computed-property-spacing

強制計算屬性方括號內的間距一致

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中對應的 規則。

雖然格式化偏好非常個人化，但許多風格指南要求或不允許在以下情況下計算屬性之間有空格

var obj = { prop: "value" };
var a = "prop";
var x = obj[a]; // computed property in object member expression

var a = "prop";
var obj = {
  [a]: "value" // computed property key in object literal (ECMAScript 6)
};

var obj = { prop: "value" };
var a = "prop";
var { [a]: x } = obj; // computed property key in object destructuring pattern (ECMAScript 6)
1
2
3
4
5
6
7
8
9
10
11
12

規則詳細資訊

此規則強制計算屬性方括號內的間距一致。

它要求或不允許方括號與它們內的值之間有空格。此規則不適用於與相鄰值之間以換行符分隔的方括號。

選項

此規則有兩個選項，一個字串選項和一個物件選項。

字串選項

• "never" (預設) 不允許計算屬性方括號內有空格
• "always" 要求計算屬性方括號內有一個或多個空格

物件選項

• "enforceForClassMembers": true (預設) 也將此規則應用於類別成員。

never

使用預設 "never" 選項時，此規則的不正確程式碼範例

/*eslint computed-property-spacing: ["error", "never"]*/

obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]

const { [ a ]: someProp } = obj;
({ [ b ]: anotherProp } = anotherObj);
1
2
3
4
5
6
7
8
9

使用預設 "never" 選項時，此規則的正確程式碼範例

/*eslint computed-property-spacing: ["error", "never"]*/

obj[foo]
obj['foo']
var x = {[b]: a}
obj[foo[bar]]

const { [a]: someProp } = obj;
({ [b]: anotherProp } = anotherObj);
1
2
3
4
5
6
7
8
9

always

使用 "always" 選項時，此規則的不正確程式碼範例

/*eslint computed-property-spacing: ["error", "always"]*/

obj[foo]
var x = {[b]: a}
obj[ foo]
obj['foo' ]
obj[foo[ bar ]]
var x = {[ b]: a}
const { [a]: someProp } = obj;
({ [b ]: anotherProp } = anotherObj);
1
2
3
4
5
6
7
8
9
10

使用 "always" 選項時，此規則的正確程式碼範例

/*eslint computed-property-spacing: ["error", "always"]*/

obj[ foo ]
obj[ 'foo' ]
var x = {[ b ]: a}
obj[ foo[ bar ] ]
const { [ a ]: someProp } = obj;
({ [ b ]: anotherProp } = anotherObj);
1
2
3
4
5
6
7
8

enforceForClassMembers

當 enforceForClassMembers 設定為 true (預設) 時，此規則也會禁止/強制類別方法、getter 和 setter 的計算鍵內有空格。

使用 "never" 和 { "enforceForClassMembers": true } (預設) 時，此規則的不正確程式碼範例

/*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/

class Foo {
  [a ]() {}
  get [b ]() {}
  set [b ](value) {}
}

const Bar = class {
  [ a](){}
  static [ b]() {}
  static get [ c ]() {}
  static set [ c ](value) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用 "never" 和 { "enforceForClassMembers": true } (預設) 時，此規則的正確程式碼範例

/*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/

class Foo {
  [a]() {}
  get [b]() {}
  set [b](value) {}
}

const Bar = class {
  [a](){}
  static [b]() {}
  static get [c]() {}
  static set [c](value) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用 "never" 和 { "enforceForClassMembers": false } 時，此規則的正確程式碼範例

/*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": false }]*/

class Foo {
  [a ]() {}
  get [b ]() {}
  set [b ](value) {}
}

const Bar = class {
  [ a](){}
  static [ b]() {}
  static get [ c ]() {}
  static set [ c ](value) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

何時不應使用此規則

如果您不關心計算屬性的一致性，則可以關閉此規則。

相關規則

• array-bracket-spacing
• comma-spacing
• space-in-parens

版本

此規則是在 ESLint v0.23.0 中引入的。

資源

• 規則來源
• 測試來源