ESLint 样式

外观

@stylistic/

computed-property-spacing ​

虽然格式化偏好非常个人化，但许多风格指南在以下情况下要求或禁止计算属性之间的空格

js
/*eslint-env es6*/

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)

规则详情 ​

此规则强制在计算属性括号内保持一致的间距。

它要求或禁止在括号和它们内部的值之间留空格。此规则不适用于由换行符与相邻值分隔的括号。

选项 ​

此规则有两个选项，一个字符串选项和一个对象选项。

字符串选项

  • "never" (默认) 禁止在计算属性括号内留空格
  • "always" 要求在计算属性括号内留一个或多个空格

对象选项

  • "enforceForClassMembers": true (默认) 此外将此规则应用于类成员。

never ​

使用默认 "never" 选项时，此规则的不正确代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "never"]*/
/*eslint-env es6*/

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

const { [
 
a
 
]: someProp } = obj;
({ [
 
b
 
]: anotherProp } = anotherObj);
incorrect

此规则使用默认的 "never" 选项时的正确代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "never"]*/
/*eslint-env es6*/

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

const { [a]: someProp } = obj;
({ [b]: anotherProp } = anotherObj);
正确

始终 ​

此规则使用 "always" 选项时的错误代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "always"]*/
/*eslint-env es6*/

obj
[
foo
]

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

obj
[
'foo' ]
obj
[
foo[ bar ]
]

var x = {[ b
]
: a}
const { 
[
a
]
: someProp } = obj;
({ 
[
b ]: anotherProp } = anotherObj);
incorrect

此规则使用 "always" 选项时的正确代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "always"]*/
/*eslint-env es6*/

obj[ foo ]
obj[ 'foo' ]
var x = {[ b ]: a}
obj[ foo[ bar ] ]
const { [ a ]: someProp } = obj;
({ [ b ]: anotherProp } = anotherObj);
正确

enforceForClassMembers ​

当 enforceForClassMembers 设置为 true（默认值）时，该规则还会禁止/强制在类方法、getter 和 setter 的计算键中使用空格。

此规则使用 "never" 和 { "enforceForClassMembers": true }（默认值）时的错误代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/
/*eslint-env es6*/

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

const Bar = class {
  [
 
a](){}
  static [
 
b]() {}
  static get [
 
c
 
]() {}
  static set [
 
c
 
](value) {}
}
incorrect

此规则使用 "never" 和 { "enforceForClassMembers": true }（默认值）时的正确代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/
/*eslint-env es6*/

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

const Bar = class {
  [a](){}
  static [b]() {}
  static get [c]() {}
  static set [c](value) {}
}
正确

此规则使用 "never" 和 { "enforceForClassMembers": false } 时的正确代码示例

js
/*eslint @stylistic/computed-property-spacing: ["error", "never", { "enforceForClassMembers": false }]*/
/*eslint-env es6*/

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

const Bar = class {
  [ a](){}
  static [ b]() {}
  static get [ c ]() {}
  static set [ c ](value) {}
}
正确

何时不使用它 ​

如果您不关心计算属性的一致性，可以关闭此规则。