ESLint 样式

外观

@stylistic/js/

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/js/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);
不正确

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

js
/*eslint @stylistic/js/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 ​

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

js
/*eslint @stylistic/js/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);
不正确

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

js
/*eslint @stylistic/js/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/js/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": true }（默认）时，此规则的正确代码示例

js
/*eslint @stylistic/js/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/js/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) {}
}
正确

何时不使用它 ​

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