0
# ES6+ and Modern JavaScript
1

2
Rules specific to modern JavaScript features including arrow functions, template literals, destructuring, and generator functions.
3

4
## arrow-parens
5

6
Requires parens in arrow function arguments.
7

8
```javascript { .api }
9
const arrowParens: Rule.RuleModule;
10

11
// Rule options
12
type ArrowParensOptions = 
13
  | 'always'
14
  | 'as-needed'
15
  | ['always' | 'as-needed', {
16
      requireForBlockBody?: boolean;
17
    }];
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
// ✓ Good with "as-needed" (default)
24
const single = x => x * 2;
25
const multiple = (x, y) => x + y;
26
const none = () => 'hello';
27

28
// ✓ Good with "always"
29
const single = (x) => x * 2;
30
const multiple = (x, y) => x + y;
31
const none = () => 'hello';
32

33
// ✓ Good with { requireForBlockBody: true }
34
const expression = x => x * 2; // expression body, parens optional
35
const block = (x) => { // block body, parens required
36
  return x * 2;
37
};
38
```
39

40
**Configuration:**
41

42
```javascript
43
rules: {
44
  '@stylistic/js/arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }]
45
}
46
```
47

48
## arrow-spacing
49

50
Enforces consistent spacing before and after arrow functions.
51

52
```javascript { .api }
53
const arrowSpacing: Rule.RuleModule;
54

55
// Rule options
56
type ArrowSpacingOptions = {
57
  before?: boolean;
58
  after?: boolean;
59
};
60
```
61

62
**Usage Examples:**
63

64
```javascript
65
// ✓ Good with default settings (before: true, after: true)
66
const func = (x) => x * 2;
67
const async = async (x) => await process(x);
68

69
// ✓ Good with custom settings
70
const func = (x)=>x * 2; // before: false, after: false
71
const spaced = (x) => x * 2; // before: true, after: true
72
```
73

74
**Configuration:**
75

76
```javascript
77
rules: {
78
  '@stylistic/js/arrow-spacing': ['error', { before: true, after: true }]
79
}
80
```
81

82
## implicit-arrow-linebreak
83

84
Enforces the location of arrow function bodies.
85

86
```javascript { .api }
87
const implicitArrowLinebreak: Rule.RuleModule;
88

89
// Rule options
90
type ImplicitArrowLinebreakOptions = 'beside' | 'below';
91
```
92

93
**Usage Examples:**
94

95
```javascript
96
// ✓ Good with "beside" (default)
97
const func = (x) => x * 2;
98
const multiline = (x) => x
99
  + y
100
  + z;
101

102
// ✓ Good with "below"
103
const func = (x) =>
104
  x * 2;
105

106
const multiline = (x) =>
107
  x
108
  + y
109
  + z;
110
```
111

112
**Configuration:**
113

114
```javascript
115
rules: {
116
  '@stylistic/js/implicit-arrow-linebreak': ['error', 'beside']
117
}
118
```
119

120
## template-curly-spacing
121

122
Requires or disallows spacing around embedded expressions of template strings.
123

124
```javascript { .api }
125
const templateCurlySpacing: Rule.RuleModule;
126

127
// Rule options
128
type TemplateCurlySpacingOptions = 'always' | 'never';
129
```
130

131
**Usage Examples:**
132

133
```javascript
134
// ✓ Good with "never" (default)
135
const message = `Hello ${name}!`;
136
const multiline = `
137
  Welcome ${user.name}
138
  Your score is ${user.score}
139
`;
140

141
// ✓ Good with "always"
142
const message = `Hello ${ name }!`;
143
const multiline = `
144
  Welcome ${ user.name }
145
  Your score is ${ user.score }
146
`;
147
```
148

149
**Configuration:**
150

151
```javascript
152
rules: {
153
  '@stylistic/js/template-curly-spacing': ['error', 'never']
154
}
155
```
156

157
## template-tag-spacing
158

159
Requires or disallows spacing between template tags and their literals.
160

161
```javascript { .api }
162
const templateTagSpacing: Rule.RuleModule;
163

164
// Rule options
165
type TemplateTagSpacingOptions = 'always' | 'never';
166
```
167

168
**Usage Examples:**
169

170
```javascript
171
// ✓ Good with "never" (default)
172
const styled = css`
173
  color: red;
174
  font-size: 16px;
175
`;
176

177
const query = gql`
178
  query GetUser($id: ID!) {
179
    user(id: $id) { name }
180
  }
181
`;
182

183
// ✓ Good with "always"
184
const styled = css `
185
  color: red;
186
  font-size: 16px;
187
`;
188
```
189

190
**Configuration:**
191

192
```javascript
193
rules: {
194
  '@stylistic/js/template-tag-spacing': ['error', 'never']
195
}
196
```
197

198
## generator-star-spacing
199

200
Enforces consistent spacing around * operators in generator functions.
201

202
```javascript { .api }
203
const generatorStarSpacing: Rule.RuleModule;
204

205
// Rule options
206
type GeneratorStarSpacingOptions = 
207
  | 'before'
208
  | 'after'  
209
  | 'both'
210
  | 'neither'
211
  | {
212
      before?: boolean;
213
      after?: boolean;
214
      named?: 'before' | 'after' | 'both' | 'neither' | { before?: boolean; after?: boolean };
215
      anonymous?: 'before' | 'after' | 'both' | 'neither' | { before?: boolean; after?: boolean };
216
      method?: 'before' | 'after' | 'both' | 'neither' | { before?: boolean; after?: boolean };
217
    };
218
```
219

220
**Usage Examples:**
221

222
```javascript
223
// ✓ Good with "after" (default)
224
function* generator() {
225
  yield 1;
226
  yield 2;
227
}
228

229
const gen = function* () {
230
  yield 'hello';
231
};
232

233
// ✓ Good with "before"
234
function *generator() {
235
  yield 1;
236
}
237

238
// ✓ Good with "both"
239
function * generator() {
240
  yield 1;
241
}
242

243
// ✓ Good with custom config
244
function* namedGen() {} // named: 'after'
245
const anon = function *() {}; // anonymous: 'before'
246
```
247

248
**Configuration:**
249

250
```javascript
251
rules: {
252
  '@stylistic/js/generator-star-spacing': ['error', 'after']
253
}
254
```
255

256
## yield-star-spacing
257

258
Enforces spacing around the * in yield* expressions.
259

260
```javascript { .api }
261
const yieldStarSpacing: Rule.RuleModule;
262

263
// Rule options
264
type YieldStarSpacingOptions = 
265
  | 'before'
266
  | 'after'
267
  | 'both'
268
  | 'neither'
269
  | {
270
      before?: boolean;
271
      after?: boolean;
272
    };
273
```
274

275
**Usage Examples:**
276

277
```javascript
278
// ✓ Good with "after" (default)
279
function* generator() {
280
  yield* otherGenerator();
281
  yield* [1, 2, 3];
282
}
283

284
// ✓ Good with "before"
285
function* generator() {
286
  yield *otherGenerator();
287
}
288

289
// ✓ Good with "both"
290
function* generator() {
291
  yield * otherGenerator();
292
}
293

294
// ✓ Good with "neither"
295
function* generator() {
296
  yield*otherGenerator();
297
}
298
```
299

300
**Configuration:**
301

302
```javascript
303
rules: {
304
  '@stylistic/js/yield-star-spacing': ['error', 'after']
305
}
306
```
307

308
## rest-spread-spacing
309

310
Enforces spacing between rest and spread operators and their expressions.
311

312
```javascript { .api }
313
const restSpreadSpacing: Rule.RuleModule;
314

315
// Rule options
316
type RestSpreadSpacingOptions = 'always' | 'never';
317
```
318

319
**Usage Examples:**
320

321
```javascript
322
// ✓ Good with "never" (default)
323
function func(...args) {
324
  return [...args, 'extra'];
325
}
326

327
const {name, ...rest} = user;
328
const newObj = {...obj, updated: true};
329

330
// ✓ Good with "always"
331
function func(... args) {
332
  return [... args, 'extra'];
333
}
334

335
const {name, ... rest} = user;
336
const newObj = {... obj, updated: true};
337
```
338

339
**Configuration:**
340

341
```javascript
342
rules: {
343
  '@stylistic/js/rest-spread-spacing': ['error', 'never']
344
}
345
```
346

347
## no-confusing-arrow
348

349
Disallows arrow functions where they could be confused with comparisons.
350

351
```javascript { .api }
352
const noConfusingArrow: Rule.RuleModule;
353

354
// Rule options
355
type NoConfusingArrowOptions = {
356
  allowParens?: boolean;
357
  onlyOneSimpleParam?: boolean;
358
};
359
```
360

361
**Usage Examples:**
362

363
```javascript
364
// ✗ Bad - confusing arrow
365
const isEven = a => a % 2 === 0 ? true : false;
366

367
// ✓ Good - clear with parentheses
368
const isEven = a => (a % 2 === 0 ? true : false);
369

370
// ✓ Good - block body
371
const isEven = a => {
372
  return a % 2 === 0 ? true : false;
373
};
374

375
// ✓ Good with allowParens: true
376
const func = (a) => a <= 0 ? 'negative' : 'positive';
377
```
378

379
**Configuration:**
380

381
```javascript
382
rules: {
383
  '@stylistic/js/no-confusing-arrow': ['error', { allowParens: true }]
384
}
385
```
386

387
## Common Modern JavaScript Combinations
388

389
### Standard Modern Style
390
```javascript
391
rules: {
392
  '@stylistic/js/arrow-parens': ['error', 'as-needed'],
393
  '@stylistic/js/arrow-spacing': ['error', { before: true, after: true }],
394
  '@stylistic/js/template-curly-spacing': ['error', 'never'],
395
  '@stylistic/js/generator-star-spacing': ['error', 'after'],
396
  '@stylistic/js/rest-spread-spacing': ['error', 'never']
397
}
398

399
// Result:
400
const func = x => `Hello ${x}!`;
401
function* gen() { yield* other(); }
402
const spread = {...obj};
403
```
404

405
### Consistent Spacing Style
406
```javascript
407
rules: {
408
  '@stylistic/js/arrow-parens': ['error', 'always'],
409
  '@stylistic/js/template-curly-spacing': ['error', 'always'],
410
  '@stylistic/js/generator-star-spacing': ['error', 'both'],
411
  '@stylistic/js/rest-spread-spacing': ['error', 'always']
412
}
413

414
// Result:
415
const func = (x) => `Hello ${ x }!`;
416
function * gen() { yield * other(); }
417
const spread = {... obj};
418
```
419

420
## Type Definitions
421

422
```typescript { .api }
423
interface ModernJavaScriptRules {
424
  'arrow-parens': Rule.RuleModule;
425
  'arrow-spacing': Rule.RuleModule;
426
  'implicit-arrow-linebreak': Rule.RuleModule;
427
  'template-curly-spacing': Rule.RuleModule;
428
  'template-tag-spacing': Rule.RuleModule;
429
  'generator-star-spacing': Rule.RuleModule;
430
  'yield-star-spacing': Rule.RuleModule;
431
  'rest-spread-spacing': Rule.RuleModule;
432
  'no-confusing-arrow': Rule.RuleModule;
433
}
434

435
interface ArrowSpacingConfig {
436
  before?: boolean;
437
  after?: boolean;
438
}
439

440
interface GeneratorStarSpacingConfig {
441
  before?: boolean;
442
  after?: boolean;
443
  named?: GeneratorSpacingOption;
444
  anonymous?: GeneratorSpacingOption;
445
  method?: GeneratorSpacingOption;
446
}
447

448
type GeneratorSpacingOption = 
449
  | 'before' 
450
  | 'after' 
451
  | 'both' 
452
  | 'neither' 
453
  | { before?: boolean; after?: boolean };
454
```