0
# Punctuation and Operators
1

2
Rules governing the placement and spacing of punctuation marks, operators, and symbols in JavaScript code.
3

4
## semi
5

6
Requires or disallows semicolons instead of ASI (Automatic Semicolon Insertion).
7

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

11
// Rule options
12
type SemiOptions = 
13
  | 'always'
14
  | 'never'
15
  | ['always' | 'never', {
16
      omitLastInOneLineBlock?: boolean;
17
      beforeStatementContinuationChars?: 'always' | 'any' | 'never';
18
    }];
19
```
20

21
**Usage Examples:**
22

23
```javascript
24
// ✓ Good with "always" (default)
25
const name = 'John';
26
function greet() {
27
  return 'Hello';
28
}
29

30
// ✓ Good with "never"
31
const name = 'John'
32
function greet() {
33
  return 'Hello'
34
}
35

36
// ✓ Good with omitLastInOneLineBlock: true
37
function simple() { return true } // last statement in one-line block
38
function complex() {
39
  const x = 1;
40
  return x; // other statements still need semicolons
41
}
42
```
43

44
**Configuration:**
45

46
```javascript
47
rules: {
48
  '@stylistic/js/semi': ['error', 'always']
49
}
50
```
51

52
## semi-spacing
53

54
Enforces consistent spacing before and after semicolons.
55

56
```javascript { .api }
57
const semiSpacing: Rule.RuleModule;
58

59
// Rule options
60
type SemiSpacingOptions = {
61
  before?: boolean;
62
  after?: boolean;
63
};
64
```
65

66
**Usage Examples:**
67

68
```javascript
69
// ✓ Good with default settings (before: false, after: true)
70
for (let i = 0; i < 10; i++) {
71
  console.log(i);
72
}
73

74
// ✓ Good with custom settings
75
for (let i = 0 ;i < 10 ;i++) { // before: true, after: false
76
  console.log(i);
77
}
78
```
79

80
**Configuration:**
81

82
```javascript
83
rules: {
84
  '@stylistic/js/semi-spacing': ['error', { before: false, after: true }]
85
}
86
```
87

88
## semi-style
89

90
Enforces location of semicolons.
91

92
```javascript { .api }
93
const semiStyle: Rule.RuleModule;
94

95
// Rule options
96
type SemiStyleOptions = 'last' | 'first';
97
```
98

99
**Usage Examples:**
100

101
```javascript
102
// ✓ Good with "last" (default)
103
const name = 'John';
104
const age = 30;
105

106
// ✓ Good with "first"
107
const name = 'John'
108
;const age = 30
109
```
110

111
**Configuration:**
112

113
```javascript
114
rules: {
115
  '@stylistic/js/semi-style': ['error', 'last']
116
}
117
```
118

119
## comma-dangle
120

121
Requires or disallows trailing commas.
122

123
```javascript { .api }
124
const commaDangle: Rule.RuleModule;
125

126
// Rule options
127
type CommaDangleOptions = 
128
  | 'always'
129
  | 'always-multiline'
130
  | 'only-multiline'
131
  | 'never'
132
  | {
133
      arrays?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
134
      objects?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
135
      imports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
136
      exports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
137
      functions?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
138
    };
139
```
140

141
**Usage Examples:**
142

143
```javascript
144
// ✓ Good with "always-multiline"
145
const arr = [1, 2, 3]; // single line, no trailing comma
146
const obj = {
147
  name: 'John',
148
  age: 30, // multiline, trailing comma required
149
};
150

151
// ✓ Good with "never"
152
const arr = [1, 2, 3];
153
const obj = {
154
  name: 'John',
155
  age: 30
156
};
157

158
// ✓ Good with custom config
159
const items = [
160
  'apple',
161
  'banana', // arrays: 'always-multiline'
162
];
163
function greet(name, age) {} // functions: 'never'
164
```
165

166
**Configuration:**
167

168
```javascript
169
rules: {
170
  '@stylistic/js/comma-dangle': ['error', 'always-multiline']
171
}
172
```
173

174
## comma-spacing
175

176
Enforces consistent spacing before and after commas.
177

178
```javascript { .api }
179
const commaSpacing: Rule.RuleModule;
180

181
// Rule options
182
type CommaSpacingOptions = {
183
  before?: boolean;
184
  after?: boolean;
185
};
186
```
187

188
**Usage Examples:**
189

190
```javascript
191
// ✓ Good with default settings (before: false, after: true)
192
const arr = [1, 2, 3];
193
function greet(name, age) {}
194

195
// ✓ Good with custom settings
196
const arr = [1 ,2 ,3]; // before: true, after: false
197
function greet(name ,age) {}
198
```
199

200
**Configuration:**
201

202
```javascript
203
rules: {
204
  '@stylistic/js/comma-spacing': ['error', { before: false, after: true }]
205
}
206
```
207

208
## comma-style
209

210
Enforces consistent comma style.
211

212
```javascript { .api }
213
const commaStyle: Rule.RuleModule;
214

215
// Rule options
216
type CommaStyleOptions = 
217
  | 'last'
218
  | 'first'
219
  | ['last' | 'first', {
220
      exceptions?: {
221
        [nodeType: string]: boolean;
222
      };
223
    }];
224
```
225

226
**Usage Examples:**
227

228
```javascript
229
// ✓ Good with "last" (default)
230
const obj = {
231
  name: 'John',
232
  age: 30,
233
  city: 'New York'
234
};
235

236
// ✓ Good with "first"
237
const obj = {
238
    name: 'John'
239
  , age: 30
240
  , city: 'New York'
241
};
242
```
243

244
**Configuration:**
245

246
```javascript
247
rules: {
248
  '@stylistic/js/comma-style': ['error', 'last']
249
}
250
```
251

252
## quotes
253

254
Enforces the consistent use of either backticks, double, or single quotes.
255

256
```javascript { .api }
257
const quotes: Rule.RuleModule;
258

259
// Rule options
260
type QuotesOptions = 
261
  | 'single'
262
  | 'double'
263
  | 'backtick'
264
  | ['single' | 'double' | 'backtick', {
265
      avoidEscape?: boolean;
266
      allowTemplateLiterals?: boolean;
267
    }];
268
```
269

270
**Usage Examples:**
271

272
```javascript
273
// ✓ Good with "single"
274
const name = 'John';
275
const message = 'Hello, world!';
276

277
// ✓ Good with "double"
278
const name = "John";
279
const message = "Hello, world!";
280

281
// ✓ Good with avoidEscape: true
282
const message = "Don't worry"; // single quotes would require escaping
283
const other = 'He said "Hello"'; // double quotes would require escaping
284

285
// ✓ Good with allowTemplateLiterals: true
286
const template = `Hello, ${name}!`; // template literals always allowed
287
```
288

289
**Configuration:**
290

291
```javascript
292
rules: {
293
  '@stylistic/js/quotes': ['error', 'single', { avoidEscape: true }]
294
}
295
```
296

297
## jsx-quotes
298

299
Enforces the consistent use of either double or single quotes in JSX attributes.
300

301
```javascript { .api }
302
const jsxQuotes: Rule.RuleModule;
303

304
// Rule options
305
type JsxQuotesOptions = 'prefer-single' | 'prefer-double';
306
```
307

308
**Usage Examples:**
309

310
```javascript
311
// ✓ Good with "prefer-double" (default)
312
const element = <div className="container">Content</div>;
313

314
// ✓ Good with "prefer-single"
315
const element = <div className='container'>Content</div>;
316
```
317

318
**Configuration:**
319

320
```javascript
321
rules: {
322
  '@stylistic/js/jsx-quotes': ['error', 'prefer-double']
323
}
324
```
325

326
## quote-props
327

328
Requires quotes around object literal property names.
329

330
```javascript { .api }
331
const quoteProps: Rule.RuleModule;
332

333
// Rule options
334
type QuotePropsOptions = 
335
  | 'always'
336
  | 'as-needed'
337
  | 'consistent'
338
  | 'consistent-as-needed'
339
  | ['always' | 'as-needed' | 'consistent' | 'consistent-as-needed', {
340
      keywords?: boolean;
341
      unnecessary?: boolean;
342
      numbers?: boolean;
343
    }];
344
```
345

346
**Usage Examples:**
347

348
```javascript
349
// ✓ Good with "as-needed" (default)
350
const obj = {
351
  name: 'John',
352
  age: 30,
353
  'full-name': 'John Doe', // needs quotes due to hyphen
354
  'class': 'person' // needs quotes if keywords: true
355
};
356

357
// ✓ Good with "always"
358
const obj = {
359
  'name': 'John',
360
  'age': 30,
361
  'full-name': 'John Doe'
362
};
363

364
// ✓ Good with "consistent"
365
const obj = {
366
  'name': 'John', // all quoted because one needs quotes
367
  'age': 30,
368
  'full-name': 'John Doe'
369
};
370
```
371

372
**Configuration:**
373

374
```javascript
375
rules: {
376
  '@stylistic/js/quote-props': ['error', 'as-needed']
377
}
378
```
379

380
## dot-location
381

382
Enforces consistent newlines before and after dots.
383

384
```javascript { .api }
385
const dotLocation: Rule.RuleModule;
386

387
// Rule options
388
type DotLocationOptions = 'object' | 'property';
389
```
390

391
**Usage Examples:**
392

393
```javascript
394
// ✓ Good with "object" (default)
395
const result = object
396
  .property
397
  .method();
398

399
// ✓ Good with "property"
400
const result = object.
401
  property.
402
  method();
403
```
404

405
**Configuration:**
406

407
```javascript
408
rules: {
409
  '@stylistic/js/dot-location': ['error', 'property']
410
}
411
```
412

413
## operator-linebreak
414

415
Enforces consistent linebreak style for operators.
416

417
```javascript { .api }
418
const operatorLinebreak: Rule.RuleModule;
419

420
// Rule options
421
type OperatorLinebreakOptions = 
422
  | 'after'
423
  | 'before'
424
  | 'none'
425
  | ['after' | 'before' | 'none', {
426
      overrides?: {
427
        [operator: string]: 'after' | 'before' | 'none' | 'ignore';
428
      };
429
    }];
430
```
431

432
**Usage Examples:**
433

434
```javascript
435
// ✓ Good with "after"
436
const result = a +
437
  b +
438
  c;
439

440
// ✓ Good with "before"
441
const result = a
442
  + b
443
  + c;
444

445
// ✓ Good with overrides
446
const result = a &&
447
  b // &&: 'after'
448
  || c; // ||: 'before'
449
```
450

451
**Configuration:**
452

453
```javascript
454
rules: {
455
  '@stylistic/js/operator-linebreak': ['error', 'after']
456
}
457
```
458

459
## switch-colon-spacing
460

461
Enforces spacing around colons of switch statements.
462

463
```javascript { .api }
464
const switchColonSpacing: Rule.RuleModule;
465

466
// Rule options
467
type SwitchColonSpacingOptions = {
468
  before?: boolean;
469
  after?: boolean;
470
};
471
```
472

473
**Usage Examples:**
474

475
```javascript
476
// ✓ Good with default settings (before: false, after: true)
477
switch (value) {
478
  case 'a': return 1;
479
  case 'b': return 2;
480
  default: return 0;
481
}
482

483
// ✓ Good with custom settings
484
switch (value) {
485
  case 'a' :return 1; // before: true, after: false
486
  case 'b' :return 2;
487
  default :return 0;
488
}
489
```
490

491
**Configuration:**
492

493
```javascript
494
rules: {
495
  '@stylistic/js/switch-colon-spacing': ['error', { before: false, after: true }]
496
}
497
```
498

499
## Common Punctuation Combinations
500

501
### Standard Style
502
```javascript
503
rules: {
504
  '@stylistic/js/semi': ['error', 'always'],
505
  '@stylistic/js/quotes': ['error', 'single'],
506
  '@stylistic/js/comma-dangle': ['error', 'always-multiline'],
507
  '@stylistic/js/comma-spacing': ['error', { before: false, after: true }]
508
}
509
```
510

511
### Semicolon-free Style  
512
```javascript
513
rules: {
514
  '@stylistic/js/semi': ['error', 'never'],
515
  '@stylistic/js/quotes': ['error', 'single'],
516
  '@stylistic/js/comma-dangle': ['error', 'never'],
517
  '@stylistic/js/comma-style': ['error', 'last']
518
}
519
```
520

521
## Type Definitions
522

523
```typescript { .api }
524
interface PunctuationRules {
525
  'semi': Rule.RuleModule;
526
  'semi-spacing': Rule.RuleModule;
527
  'semi-style': Rule.RuleModule;
528
  'comma-dangle': Rule.RuleModule;
529
  'comma-spacing': Rule.RuleModule;
530
  'comma-style': Rule.RuleModule;
531
  'quotes': Rule.RuleModule;
532
  'jsx-quotes': Rule.RuleModule;
533
  'quote-props': Rule.RuleModule;
534
  'operator-linebreak': Rule.RuleModule;
535
}
536

537
interface SemiOptions {
538
  omitLastInOneLineBlock?: boolean;
539
  beforeStatementContinuationChars?: 'always' | 'any' | 'never';
540
}
541

542
interface CommaDangleConfig {
543
  arrays?: 'always' | 'always-multiline' | 'only-multiline' | 'never';  
544
  objects?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
545
  imports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
546
  exports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
547
  functions?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
548
}
549
```