eslint/docs/rules/keyword-spacing.md

   1 # enforce consistent spacing before and after keywords (keyword-spacing)
   2
   3 Keywords are syntax elements of JavaScript, such as `try` and `if`.
   4 These keywords have special meaning to the language and so often appear in a different color in code editors.
   5 As an important part of the language, style guides often refer to the spacing that should be used around keywords.
   6 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:
   7
   8 ```js
   9 if (foo) {
  10     // ...
  11 } else {
  12     // ...
  13 }
  14 ```
  15
  16 Of course, you could also have a style guide that disallows spaces around keywords.
  17
  18 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.md).
  19
  20 ## Rule Details
  21
  22 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.
  23
  24 ## Options
  25
  26 This rule has an object option:
  27
  28 * `"before": true` (default) requires at least one space before keywords
  29 * `"before": false` disallows spaces before keywords
  30 * `"after": true` (default) requires at least one space after keywords
  31 * `"after": false` disallows spaces after keywords
  32 * `"overrides"` allows overriding spacing style for specified keywords
  33
  34 ### before
  35
  36 Examples of **incorrect** code for this rule with the default `{ "before": true }` option:
  37
  38 ```js
  39 /*eslint keyword-spacing: ["error", { "before": true }]*/
  40
  41 if (foo) {
  42     //...
  43 }else if (bar) {
  44     //...
  45 }else {
  46     //...
  47 }
  48 ```
  49
  50 Examples of **correct** code for this rule with the default `{ "before": true }` option:
  51
  52 ```js
  53 /*eslint keyword-spacing: ["error", { "before": true }]*/
  54 /*eslint-env es6*/
  55
  56 if (foo) {
  57     //...
  58 } else if (bar) {
  59     //...
  60 } else {
  61     //...
  62 }
  63
  64 // Avoid conflict with `array-bracket-spacing`
  65 let a = [this];
  66 let b = [function() {}];
  67
  68 // Avoid conflict with `arrow-spacing`
  69 let a = ()=> this.foo;
  70
  71 // Avoid conflict with `block-spacing`
  72 {function foo() {}}
  73
  74 // Avoid conflict with `comma-spacing`
  75 let a = [100,this.foo, this.bar];
  76
  77 // Avoid conflict with `computed-property-spacing`
  78 obj[this.foo] = 0;
  79
  80 // Avoid conflict with `generator-star-spacing`
  81 function *foo() {}
  82
  83 // Avoid conflict with `key-spacing`
  84 let obj = {
  85     foo:function() {}
  86 };
  87
  88 // Avoid conflict with `object-curly-spacing`
  89 let obj = {foo: this};
  90
  91 // Avoid conflict with `semi-spacing`
  92 let a = this;function foo() {}
  93
  94 // Avoid conflict with `space-in-parens`
  95 (function () {})();
  96
  97 // Avoid conflict with `space-infix-ops`
  98 if ("foo"in {foo: 0}) {}
  99 if (10+this.foo<= this.bar) {}
 100
 101 // Avoid conflict with `jsx-curly-spacing`
 102 let a = <A foo={this.foo} bar={function(){}} />
 103 ```
 104
 105 Examples of **incorrect** code for this rule with the `{ "before": false }` option:
 106
 107 ```js
 108 /*eslint keyword-spacing: ["error", { "before": false }]*/
 109
 110 if (foo) {
 111     //...
 112 } else if (bar) {
 113     //...
 114 } else {
 115     //...
 116 }
 117 ```
 118
 119 Examples of **correct** code for this rule with the `{ "before": false }` option:
 120
 121 ```js
 122 /*eslint keyword-spacing: ["error", { "before": false }]*/
 123
 124 if (foo) {
 125     //...
 126 }else if (bar) {
 127     //...
 128 }else {
 129     //...
 130 }
 131 ```
 132
 133 ### after
 134
 135 Examples of **incorrect** code for this rule with the default `{ "after": true }` option:
 136
 137 ```js
 138 /*eslint keyword-spacing: ["error", { "after": true }]*/
 139
 140 if(foo) {
 141     //...
 142 } else if(bar) {
 143     //...
 144 } else{
 145     //...
 146 }
 147 ```
 148
 149 Examples of **correct** code for this rule with the default `{ "after": true }` option:
 150
 151 ```js
 152 /*eslint keyword-spacing: ["error", { "after": true }]*/
 153
 154 if (foo) {
 155     //...
 156 } else if (bar) {
 157     //...
 158 } else {
 159     //...
 160 }
 161
 162 // Avoid conflict with `array-bracket-spacing`
 163 let a = [this];
 164
 165 // Avoid conflict with `arrow-spacing`
 166 let a = ()=> this.foo;
 167
 168 // Avoid conflict with `comma-spacing`
 169 let a = [100, this.foo, this.bar];
 170
 171 // Avoid conflict with `computed-property-spacing`
 172 obj[this.foo] = 0;
 173
 174 // Avoid conflict with `generator-star-spacing`
 175 function* foo() {}
 176
 177 // Avoid conflict with `key-spacing`
 178 let obj = {
 179     foo:function() {}
 180 };
 181
 182 // Avoid conflict with `func-call-spacing`
 183 class A {
 184     constructor() {
 185         super();
 186     }
 187 }
 188
 189 // Avoid conflict with `object-curly-spacing`
 190 let obj = {foo: this};
 191
 192 // Avoid conflict with `semi-spacing`
 193 let a = this;function foo() {}
 194
 195 // Avoid conflict with `space-before-function-paren`
 196 function() {}
 197
 198 // Avoid conflict with `space-infix-ops`
 199 if ("foo"in{foo: 0}) {}
 200 if (10+this.foo<= this.bar) {}
 201
 202 // Avoid conflict with `space-unary-ops`
 203 function* foo(a) {
 204     return yield+a;
 205 }
 206
 207 // Avoid conflict with `yield-star-spacing`
 208 function* foo(a) {
 209     return yield* a;
 210 }
 211
 212 // Avoid conflict with `jsx-curly-spacing`
 213 let a = <A foo={this.foo} bar={function(){}} />
 214 ```
 215
 216 Examples of **incorrect** code for this rule with the `{ "after": false }` option:
 217
 218 ```js
 219 /*eslint keyword-spacing: ["error", { "after": false }]*/
 220
 221 if (foo) {
 222     //...
 223 } else if (bar) {
 224     //...
 225 } else {
 226     //...
 227 }
 228 ```
 229
 230 Examples of **correct** code for this rule with the `{ "after": false }` option:
 231
 232 ```js
 233 /*eslint keyword-spacing: ["error", { "after": false }]*/
 234
 235 if(foo) {
 236     //...
 237 } else if(bar) {
 238     //...
 239 } else{
 240     //...
 241 }
 242 ```
 243
 244 ### overrides
 245
 246 Examples of **correct** code for this rule with the `{ "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false }, "static": { "after": false } } }` option:
 247
 248 ```js
 249 /*eslint keyword-spacing: ["error", { "overrides": {
 250   "if": { "after": false },
 251   "for": { "after": false },
 252   "while": { "after": false },
 253   "static": { "after": false }
 254 } }]*/
 255
 256 if(foo) {
 257     //...
 258 } else if(bar) {
 259     //...
 260 } else {
 261     //...
 262 }
 263
 264 for(;;);
 265
 266 while(true) {
 267     //...
 268 }
 269
 270 class C {
 271     static{
 272         //...
 273     }
 274 }
 275 ```
 276
 277 ## When Not To Use It
 278
 279 If you don't want to enforce consistency on keyword spacing, then it's safe to disable this rule.