@stylistic/js/

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/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"オプションを使用したこのルールの正しいコードの例

/*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"オプションを使用したこのルールの不正なコードの例

/*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"オプションを使用したこのルールの正しいコードの例

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

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

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

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

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

正しい

使用しない場合

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