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

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