eslint/docs/src/rules/computed-property-spacing.md

   1 ---
   2 title: computed-property-spacing
   3 layout: doc
   4 rule_type: layout
   5 related_rules:
   6 - array-bracket-spacing
   7 - comma-spacing
   8 - space-in-parens
   9 ---
  10
  11
  12
  13 While formatting preferences are very personal, a number of style guides require
  14 or disallow spaces between computed properties in the following situations:
  15
  16 ```js
  17 /*eslint-env es6*/
  18
  19 var obj = { prop: "value" };
  20 var a = "prop";
  21 var x = obj[a]; // computed property in object member expression
  22
  23 var a = "prop";
  24 var obj = {
  25   [a]: "value" // computed property key in object literal (ECMAScript 6)
  26 };
  27
  28 var obj = { prop: "value" };
  29 var a = "prop";
  30 var { [a]: x } = obj; // computed property key in object destructuring pattern (ECMAScript 6)
  31 ```
  32
  33 ## Rule Details
  34
  35 This rule enforces consistent spacing inside computed property brackets.
  36
  37 It either requires or disallows spaces between the brackets and the values inside of them.
  38 This rule does not apply to brackets that are separated from the adjacent value by a newline.
  39
  40 ## Options
  41
  42 This rule has two options, a string option and an object option.
  43
  44 String option:
  45
  46 * `"never"` (default) disallows spaces inside computed property brackets
  47 * `"always"` requires one or more spaces inside computed property brackets
  48
  49 Object option:
  50
  51 * `"enforceForClassMembers": true` (default) additionally applies this rule to class members.
  52
  53 ### never
  54
  55 Examples of **incorrect** code for this rule with the default `"never"` option:
  56
  57 ::: incorrect
  58
  59 ```js
  60 /*eslint computed-property-spacing: ["error", "never"]*/
  61 /*eslint-env es6*/
  62
  63 obj[foo ]
  64 obj[ 'foo']
  65 var x = {[ b ]: a}
  66 obj[foo[ bar ]]
  67
  68 const { [ a ]: someProp } = obj;
  69 ({ [ b ]: anotherProp } = anotherObj);
  70 ```
  71
  72 :::
  73
  74 Examples of **correct** code for this rule with the default `"never"` option:
  75
  76 ::: correct
  77
  78 ```js
  79 /*eslint computed-property-spacing: ["error", "never"]*/
  80 /*eslint-env es6*/
  81
  82 obj[foo]
  83 obj['foo']
  84 var x = {[b]: a}
  85 obj[foo[bar]]
  86
  87 const { [a]: someProp } = obj;
  88 ({ [b]: anotherProp } = anotherObj);
  89 ```
  90
  91 :::
  92
  93 ### always
  94
  95 Examples of **incorrect** code for this rule with the `"always"` option:
  96
  97 ::: incorrect
  98
  99 ```js
 100 /*eslint computed-property-spacing: ["error", "always"]*/
 101 /*eslint-env es6*/
 102
 103 obj[foo]
 104 var x = {[b]: a}
 105 obj[ foo]
 106 obj['foo' ]
 107 obj[foo[ bar ]]
 108 var x = {[ b]: a}
 109 const { [a]: someProp } = obj;
 110 ({ [b ]: anotherProp } = anotherObj);
 111 ```
 112
 113 :::
 114
 115 Examples of **correct** code for this rule with the `"always"` option:
 116
 117 ::: correct
 118
 119 ```js
 120 /*eslint computed-property-spacing: ["error", "always"]*/
 121 /*eslint-env es6*/
 122
 123 obj[ foo ]
 124 obj[ 'foo' ]
 125 var x = {[ b ]: a}
 126 obj[ foo[ bar ] ]
 127 const { [ a ]: someProp } = obj;
 128 ({ [ b ]: anotherProp } = anotherObj);
 129 ```
 130
 131 :::
 132
 133 #### enforceForClassMembers
 134
 135 With `enforceForClassMembers` set to `true` (default), the rule also disallows/enforces spaces inside of computed keys of class methods, getters and setters.
 136
 137 Examples of **incorrect** code for this rule with `"never"` and `{ "enforceForClassMembers": true }` (default):
 138
 139 ::: incorrect
 140
 141 ```js
 142 /*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/
 143 /*eslint-env es6*/
 144
 145 class Foo {
 146   [a ]() {}
 147   get [b ]() {}
 148   set [b ](value) {}
 149 }
 150
 151 const Bar = class {
 152   [ a](){}
 153   static [ b]() {}
 154   static get [ c ]() {}
 155   static set [ c ](value) {}
 156 }
 157 ```
 158
 159 :::
 160
 161 Examples of **correct** code for this rule with `"never"` and `{ "enforceForClassMembers": true }` (default):
 162
 163 ::: correct
 164
 165 ```js
 166 /*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": true }]*/
 167 /*eslint-env es6*/
 168
 169 class Foo {
 170   [a]() {}
 171   get [b]() {}
 172   set [b](value) {}
 173 }
 174
 175 const Bar = class {
 176   [a](){}
 177   static [b]() {}
 178   static get [c]() {}
 179   static set [c](value) {}
 180 }
 181 ```
 182
 183 :::
 184
 185 Examples of **correct** code for this rule with `"never"` and `{ "enforceForClassMembers": false }`:
 186
 187 ::: correct
 188
 189 ```js
 190 /*eslint computed-property-spacing: ["error", "never", { "enforceForClassMembers": false }]*/
 191 /*eslint-env es6*/
 192
 193 class Foo {
 194   [a ]() {}
 195   get [b ]() {}
 196   set [b ](value) {}
 197 }
 198
 199 const Bar = class {
 200   [ a](){}
 201   static [ b]() {}
 202   static get [ c ]() {}
 203   static set [ c ](value) {}
 204 }
 205 ```
 206
 207 :::
 208
 209 ## When Not To Use It
 210
 211 You can turn this rule off if you are not concerned with the consistency of computed properties.