@stylistic/

computed-property-spacing

フォーマットの好みは非常に個人的なものですが、多くのスタイルガイドでは、以下の場合に計算されたプロパティ間のスペースを必須または禁止しています。

/*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)

ルールの詳細

このルールは、計算されたプロパティの角括弧内のスペースの一貫性を強制します。

角括弧と、その内側の値との間にスペースを必須にするか、禁止します。このルールは、改行で隣接する値から分離された角括弧には適用されません。

オプション

このルールには、文字列オプションとオブジェクトオプションの2つのオプションがあります。

文字列オプション

• "never" (デフォルト) は、計算されたプロパティの角括弧内のスペースを禁止します。
• "always" は、計算されたプロパティの角括弧内に1つ以上のスペースを必須にします。

オブジェクトオプション

• "enforceForClassMembers": true (デフォルト) は、このルールをクラスメンバーにも適用します。

never

デフォルトの "never" オプションを使用した、このルールの不正なコードの例

/*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);

不正

デフォルトの "never" オプションを使用した、このルールの正しいコードの例

/*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

"always" オプションを使用した、このルールの不正なコードの例

/*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);

不正

"always" オプションを使用した、このルールの正しいコードの例

/*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 (デフォルト) に設定すると、このルールは、クラスメソッド、ゲッター、セッターの計算されたキーの内側のスペースも禁止/必須にします。

"never" および { "enforceForClassMembers": true } (デフォルト) を使用した、このルールの不正なコードの例

/*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": true } (デフォルト) を使用した、このルールの正しいコードの例

/*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 } を使用した、このルールの正しいコードの例

/*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) {}
}

正しい

いつ使用しないか

計算されたプロパティの一貫性を気にしない場合は、このルールをオフにすることができます。