eslint/docs/src/rules/keyword-spacing.md

   1 ---
   2 title: keyword-spacing
   3 rule_type: layout
   4 ---
   5
   6
   7
   8 Keywords are syntax elements of JavaScript, such as `try` and `if`.
   9 These keywords have special meaning to the language and so often appear in a different color in code editors.
  10 As an important part of the language, style guides often refer to the spacing that should be used around keywords.
  11 For example, you might have a style guide that says keywords should be always surrounded by spaces, which would mean `if-else` statements must look like this:
  12
  13 ```js
  14 if (foo) {
  15     // ...
  16 } else {
  17     // ...
  18 }
  19 ```
  20
  21 Of course, you could also have a style guide that disallows spaces around keywords.
  22
  23 However, if you want to enforce the style of spacing between the `function` keyword and the following opening parenthesis, please refer to [space-before-function-paren](space-before-function-paren).
  24
  25 ## Rule Details
  26
  27 This rule enforces consistent spacing around keywords and keyword-like tokens: `as` (in module declarations), `async` (of async functions), `await` (of await expressions), `break`, `case`, `catch`, `class`, `const`, `continue`, `debugger`, `default`, `delete`, `do`, `else`, `export`, `extends`, `finally`, `for`, `from` (in module declarations), `function`, `get` (of getters), `if`, `import`, `in` (in for-in statements), `let`, `new`, `of` (in for-of statements), `return`, `set` (of setters), `static`, `super`, `switch`, `this`, `throw`, `try`, `typeof`, `var`, `void`, `while`, `with`, and `yield`. This rule is designed carefully not to conflict with other spacing rules: it does not apply to spacing where other rules report problems.
  28
  29 ## Options
  30
  31 This rule has an object option:
  32
  33 * `"before": true` (default) requires at least one space before keywords
  34 * `"before": false` disallows spaces before keywords
  35 * `"after": true` (default) requires at least one space after keywords
  36 * `"after": false` disallows spaces after keywords
  37 * `"overrides"` allows overriding spacing style for specified keywords
  38
  39 ### before
  40
  41 Examples of **incorrect** code for this rule with the default `{ "before": true }` option:
  42
  43 ::: incorrect
  44
  45 ```js
  46 /*eslint keyword-spacing: ["error", { "before": true }]*/
  47
  48 if (foo) {
  49     //...
  50 }else if (bar) {
  51     //...
  52 }else {
  53     //...
  54 }
  55 ```
  56
  57 :::
  58
  59 Examples of **correct** code for this rule with the default `{ "before": true }` option:
  60
  61 ::: correct
  62
  63 ```js
  64 /*eslint keyword-spacing: ["error", { "before": true }]*/
  65 /*eslint-env es6*/
  66
  67 if (foo) {
  68     //...
  69 } else if (bar) {
  70     //...
  71 } else {
  72     //...
  73 }
  74
  75 // Avoid conflict with `array-bracket-spacing`
  76 let a = [this];
  77 let b = [function() {}];
  78
  79 // Avoid conflict with `arrow-spacing`
  80 let a = ()=> this.foo;
  81
  82 // Avoid conflict with `block-spacing`
  83 {function foo() {}}
  84
  85 // Avoid conflict with `comma-spacing`
  86 let a = [100,this.foo, this.bar];
  87
  88 // Avoid conflict with `computed-property-spacing`
  89 obj[this.foo] = 0;
  90
  91 // Avoid conflict with `generator-star-spacing`
  92 function *foo() {}
  93
  94 // Avoid conflict with `key-spacing`
  95 let obj = {
  96     foo:function() {}
  97 };
  98
  99 // Avoid conflict with `object-curly-spacing`
 100 let obj = {foo: this};
 101
 102 // Avoid conflict with `semi-spacing`
 103 let a = this;function foo() {}
 104
 105 // Avoid conflict with `space-in-parens`
 106 (function () {})();
 107
 108 // Avoid conflict with `space-infix-ops`
 109 if ("foo"in {foo: 0}) {}
 110 if (10+this.foo<= this.bar) {}
 111
 112 // Avoid conflict with `jsx-curly-spacing`
 113 let a = <A foo={this.foo} bar={function(){}} />
 114 ```
 115
 116 :::
 117
 118 Examples of **incorrect** code for this rule with the `{ "before": false }` option:
 119
 120 ::: incorrect
 121
 122 ```js
 123 /*eslint keyword-spacing: ["error", { "before": false }]*/
 124
 125 if (foo) {
 126     //...
 127 } else if (bar) {
 128     //...
 129 } else {
 130     //...
 131 }
 132 ```
 133
 134 :::
 135
 136 Examples of **correct** code for this rule with the `{ "before": false }` option:
 137
 138 ::: correct
 139
 140 ```js
 141 /*eslint keyword-spacing: ["error", { "before": false }]*/
 142
 143 if (foo) {
 144     //...
 145 }else if (bar) {
 146     //...
 147 }else {
 148     //...
 149 }
 150 ```
 151
 152 :::
 153
 154 ### after
 155
 156 Examples of **incorrect** code for this rule with the default `{ "after": true }` option:
 157
 158 ::: incorrect
 159
 160 ```js
 161 /*eslint keyword-spacing: ["error", { "after": true }]*/
 162
 163 if(foo) {
 164     //...
 165 } else if(bar) {
 166     //...
 167 } else{
 168     //...
 169 }
 170 ```
 171
 172 :::
 173
 174 Examples of **correct** code for this rule with the default `{ "after": true }` option:
 175
 176 ::: correct
 177
 178 ```js
 179 /*eslint keyword-spacing: ["error", { "after": true }]*/
 180
 181 if (foo) {
 182     //...
 183 } else if (bar) {
 184     //...
 185 } else {
 186     //...
 187 }
 188
 189 // Avoid conflict with `array-bracket-spacing`
 190 let a = [this];
 191
 192 // Avoid conflict with `arrow-spacing`
 193 let a = ()=> this.foo;
 194
 195 // Avoid conflict with `comma-spacing`
 196 let a = [100, this.foo, this.bar];
 197
 198 // Avoid conflict with `computed-property-spacing`
 199 obj[this.foo] = 0;
 200
 201 // Avoid conflict with `generator-star-spacing`
 202 function* foo() {}
 203
 204 // Avoid conflict with `key-spacing`
 205 let obj = {
 206     foo:function() {}
 207 };
 208
 209 // Avoid conflict with `func-call-spacing`
 210 class A {
 211     constructor() {
 212         super();
 213     }
 214 }
 215
 216 // Avoid conflict with `object-curly-spacing`
 217 let obj = {foo: this};
 218
 219 // Avoid conflict with `semi-spacing`
 220 let a = this;function foo() {}
 221
 222 // Avoid conflict with `space-before-function-paren`
 223 function() {}
 224
 225 // Avoid conflict with `space-infix-ops`
 226 if ("foo"in{foo: 0}) {}
 227 if (10+this.foo<= this.bar) {}
 228
 229 // Avoid conflict with `space-unary-ops`
 230 function* foo(a) {
 231     return yield+a;
 232 }
 233
 234 // Avoid conflict with `yield-star-spacing`
 235 function* foo(a) {
 236     return yield* a;
 237 }
 238
 239 // Avoid conflict with `jsx-curly-spacing`
 240 let a = <A foo={this.foo} bar={function(){}} />
 241 ```
 242
 243 :::
 244
 245 Examples of **incorrect** code for this rule with the `{ "after": false }` option:
 246
 247 ::: incorrect
 248
 249 ```js
 250 /*eslint keyword-spacing: ["error", { "after": false }]*/
 251
 252 if (foo) {
 253     //...
 254 } else if (bar) {
 255     //...
 256 } else {
 257     //...
 258 }
 259 ```
 260
 261 :::
 262
 263 Examples of **correct** code for this rule with the `{ "after": false }` option:
 264
 265 ::: correct
 266
 267 ```js
 268 /*eslint keyword-spacing: ["error", { "after": false }]*/
 269
 270 if(foo) {
 271     //...
 272 } else if(bar) {
 273     //...
 274 } else{
 275     //...
 276 }
 277 ```
 278
 279 :::
 280
 281 ### overrides
 282
 283 Examples of **correct** code for this rule with the `{ "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false }, "static": { "after": false }, "as": { "after": false } } }` option:
 284
 285 ::: correct
 286
 287 ```js
 288 /*eslint keyword-spacing: ["error", { "overrides": {
 289   "if": { "after": false },
 290   "for": { "after": false },
 291   "while": { "after": false },
 292   "static": { "after": false },
 293   "as": { "after": false }
 294 } }]*/
 295
 296 if(foo) {
 297     //...
 298 } else if(bar) {
 299     //...
 300 } else {
 301     //...
 302 }
 303
 304 for(;;);
 305
 306 while(true) {
 307     //...
 308 }
 309
 310 class C {
 311     static{
 312         //...
 313     }
 314 }
 315
 316 export { C as"my class" };
 317 ```
 318
 319 :::
 320
 321 ## When Not To Use It
 322
 323 If you don't want to enforce consistency on keyword spacing, then it's safe to disable this rule.