0
# Spacing and Indentation
1

2
Core spacing rules that control whitespace, indentation, and general code layout for improved readability.
3

4
## indent
5

6
Enforces consistent indentation.
7

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

11
// Rule options
12
type IndentOptions = 
13
  | number 
14
  | 'tab'
15
  | [number | 'tab', IndentConfig?];
16

17
interface IndentConfig {
18
  SwitchCase?: number;
19
  VariableDeclarator?: number | { var?: number; let?: number; const?: number };
20
  outerIIFEBody?: number;
21
  MemberExpression?: number | 'off';
22
  FunctionDeclaration?: { parameters?: number | 'first' | 'off'; body?: number };
23
  FunctionExpression?: { parameters?: number | 'first' | 'off'; body?: number };
24
  CallExpression?: { arguments?: number | 'first' | 'off' };
25
  ArrayExpression?: number | 'first' | 'off';
26
  ObjectExpression?: number | 'first' | 'off';
27
  ImportDeclaration?: number | 'first' | 'off';
28
  flatTernaryExpressions?: boolean;
29
  offsetTernaryExpressions?: boolean;
30
  ignoredNodes?: string[];
31
  ignoreComments?: boolean;
32
}
33
```
34

35
**Usage Examples:**
36

37
```javascript
38
// ✓ Good with 2 spaces
39
function example() {
40
  if (condition) {
41
    doSomething();
42
  }
43
}
44

45
// ✓ Good with tab
46
function example() {
47
	if (condition) {
48
		doSomething();
49
	}
50
}
51

52
// ✓ Good with SwitchCase: 1
53
switch (value) {
54
  case 'a':
55
    return 1;
56
  case 'b':
57
    return 2;
58
}
59
```
60

61
**Configuration:**
62

63
```javascript
64
rules: {
65
  '@stylistic/js/indent': ['error', 2, { SwitchCase: 1 }]
66
}
67
```
68

69
## space-before-blocks
70

71
Enforces consistent spacing before blocks.
72

73
```javascript { .api }
74
const spaceBeforeBlocks: Rule.RuleModule;
75

76
// Rule options
77
type SpaceBeforeBlocksOptions = 
78
  | 'always'
79
  | 'never'
80
  | {
81
      functions?: 'always' | 'never';  
82
      keywords?: 'always' | 'never';
83
      classes?: 'always' | 'never';
84
    };
85
```
86

87
**Usage Examples:**
88

89
```javascript
90
// ✓ Good with "always" (default)
91
if (condition) {
92
  doSomething();
93
}
94

95
function example() {
96
  return true;
97
}
98

99
// ✓ Good with "never"
100
if (condition){
101
  doSomething();
102
}
103

104
function example(){
105
  return true;
106
}
107
```
108

109
**Configuration:**
110

111
```javascript
112
rules: {
113
  '@stylistic/js/space-before-blocks': ['error', 'always']
114
}
115
```
116

117
## space-infix-ops
118

119
Requires spacing around infix operators.
120

121
```javascript { .api }
122
const spaceInfixOps: Rule.RuleModule;
123

124
// Rule options
125
type SpaceInfixOpsOptions = {
126
  int32Hint?: boolean;
127
};
128
```
129

130
**Usage Examples:**
131

132
```javascript
133
// ✓ Good
134
const sum = a + b;
135
const result = x * y / z;
136
const comparison = value === expected;
137

138
// ✗ Bad
139
const sum = a+b;
140
const result = x*y/z;
141
const comparison = value===expected;
142

143
// ✓ Good with int32Hint: false
144
const int32 = value|0; // bitwise OR for int32 conversion
145
```
146

147
**Configuration:**
148

149
```javascript
150
rules: {
151
  '@stylistic/js/space-infix-ops': ['error', { int32Hint: false }]
152
}
153
```
154

155
## keyword-spacing
156

157
Enforces consistent spacing before and after keywords.
158

159
```javascript { .api }
160
const keywordSpacing: Rule.RuleModule;
161

162
// Rule options
163
type KeywordSpacingOptions = {
164
  before?: boolean;
165
  after?: boolean;
166
  overrides?: {
167
    [keyword: string]: {
168
      before?: boolean;
169
      after?: boolean;
170
    };
171
  };
172
};
173
```
174

175
**Usage Examples:**
176

177
```javascript
178
// ✓ Good with default settings
179
if (condition) {
180
  return true;
181
} else {
182
  return false;
183
}
184

185
try {
186
  doSomething();
187
} catch (error) {
188
  handleError(error);
189
}
190

191
// ✓ Good with custom overrides
192
if(condition) { // if: { after: false }
193
  return true;
194
}else { // else: { before: false }
195
  return false;
196
}
197
```
198

199
**Configuration:**
200

201
```javascript
202
rules: {
203
  '@stylistic/js/keyword-spacing': ['error', {
204
    before: true,
205
    after: true,
206
    overrides: {
207
      if: { after: false },
208
      for: { after: false },
209
      while: { after: false }
210
    }
211
  }]
212
}
213
```
214

215
## space-unary-ops
216

217
Enforces consistent spacing before or after unary operators.
218

219
```javascript { .api }
220
const spaceUnaryOps: Rule.RuleModule;
221

222
// Rule options
223
type SpaceUnaryOpsOptions = {
224
  words?: boolean;
225
  nonwords?: boolean;
226
  overrides?: {
227
    [operator: string]: boolean;
228
  };
229
};
230
```
231

232
**Usage Examples:**
233

234
```javascript
235
// ✓ Good with default settings
236
const negated = -value;
237
const incremented = ++counter;
238
const typeCheck = typeof variable;
239
const deleted = delete obj.prop;
240

241
// Word operators (typeof, void, etc.) get spaces
242
const result = typeof value === 'string';
243
const nothing = void 0;
244

245
// Symbol operators (!, -, +, etc.) don't get spaces  
246
const opposite = !condition;
247
const negative = -number;
248
```
249

250
**Configuration:**
251

252
```javascript
253
rules: {
254
  '@stylistic/js/space-unary-ops': ['error', {
255
    words: true,
256
    nonwords: false
257
  }]
258
}
259
```
260

261
## block-spacing
262

263
Disallows or enforces spaces inside of blocks after opening block and before closing block.
264

265
```javascript { .api }
266
const blockSpacing: Rule.RuleModule;
267

268
// Rule options
269
type BlockSpacingOptions = 'always' | 'never';
270
```
271

272
**Usage Examples:**
273

274
```javascript
275
// ✓ Good with "always" (default)
276
if (condition) { doSomething(); }
277
function example() { return true; }
278

279
// ✓ Good with "never"
280
if (condition) {doSomething();}
281
function example() {return true;}
282

283
// Multi-line blocks not affected
284
if (condition) {
285
  doSomething();
286
  doSomethingElse();
287
}
288
```
289

290
**Configuration:**
291

292
```javascript
293
rules: {
294
  '@stylistic/js/block-spacing': ['error', 'always']
295
}
296
```
297

298
## no-mixed-spaces-and-tabs
299

300
Disallows mixed spaces and tabs for indentation.
301

302
```javascript { .api }
303
const noMixedSpacesAndTabs: Rule.RuleModule;
304

305
// Rule options
306
type NoMixedSpacesAndTabsOptions = 'smart-tabs' | boolean;
307
```
308

309
**Usage Examples:**
310

311
```javascript
312
// ✗ Bad - mixing spaces and tabs
313
function example() {
314
    ⇥ return true; // tab after spaces
315
}
316

317
// ✓ Good - consistent spaces
318
function example() {
319
    return true;
320
}
321

322
// ✓ Good - consistent tabs
323
function example() {
324
⇥ return true;
325
}
326
```
327

328
**Configuration:**
329

330
```javascript
331
rules: {
332
  '@stylistic/js/no-mixed-spaces-and-tabs': 'error'
333
}
334
```
335

336
## no-tabs
337

338
Disallows all tabs.
339

340
```javascript { .api }
341
const noTabs: Rule.RuleModule;
342

343
// Rule options
344
type NoTabsOptions = {
345
  allowIndentationTabs?: boolean;
346
};
347
```
348

349
**Usage Examples:**
350

351
```javascript
352
// ✗ Bad with default settings
353
function example() {
354
⇥ return true; // tab character
355
}
356

357
// ✓ Good
358
function example() {
359
  return true; // spaces
360
}
361

362
// ✓ Good with allowIndentationTabs: true
363
function example() {
364
⇥ return true; // tabs for indentation OK
365
⇥ const message = "no⇥tabs⇥in⇥strings"; // tabs in strings still bad
366
}
367
```
368

369
**Configuration:**
370

371
```javascript
372
rules: {
373
  '@stylistic/js/no-tabs': ['error', { allowIndentationTabs: false }]
374
}
375
```
376

377
## one-var-declaration-per-line
378

379
Requires or disallows newlines around variable declarations.
380

381
```javascript { .api }
382
const oneVarDeclarationPerLine: Rule.RuleModule;
383

384
// Rule options
385
type OneVarDeclarationPerLineOptions = 'always' | 'initializations';
386
```
387

388
**Usage Examples:**
389

390
```javascript
391
// ✓ Good with "always"
392
var a,
393
    b;
394

395
let x,
396
    y;
397

398
const m = 1,
399
      n = 2;
400

401
// ✓ Good with "initializations"
402
var a, b; // uninitialized OK on same line
403
var c = 1,
404
    d = 2; // initialized require newlines
405

406
let x, y; // uninitialized OK
407
let z = 1,
408
    w = 2; // initialized require newlines
409
```
410

411
**Configuration:**
412

413
```javascript
414
rules: {
415
  '@stylistic/js/one-var-declaration-per-line': ['error', 'always']
416
}
417
```
418

419
## nonblock-statement-body-position
420

421
Enforces the location of single-line statements.
422

423
```javascript { .api }
424
const nonblockStatementBodyPosition: Rule.RuleModule;
425

426
// Rule options
427
type NonblockStatementBodyPositionOptions = 
428
  | 'beside'
429
  | 'below'
430
  | ['beside' | 'below', {
431
      overrides?: {
432
        [statement: string]: 'beside' | 'below';
433
      };
434
    }];
435
```
436

437
**Usage Examples:**
438

439
```javascript
440
// ✓ Good with "beside" (default)
441
if (condition) doSomething();
442
while (condition) doSomething();
443
for (let i = 0; i < 10; i++) doSomething();
444

445
// ✓ Good with "below"
446
if (condition)
447
  doSomething();
448

449
while (condition)
450
  doSomething();
451

452
// ✓ Good with overrides
453
if (condition) doSomething(); // if: 'beside'
454
while (condition) // while: 'below'
455
  doSomething();
456
```
457

458
**Configuration:**
459

460
```javascript
461
rules: {
462
  '@stylistic/js/nonblock-statement-body-position': ['error', 'beside']
463
}
464
```
465

466
## Common Spacing Combinations
467

468
### Standard JavaScript Style
469
```javascript
470
rules: {
471
  '@stylistic/js/indent': ['error', 2],
472
  '@stylistic/js/space-before-blocks': ['error', 'always'],
473
  '@stylistic/js/space-infix-ops': 'error',
474
  '@stylistic/js/keyword-spacing': ['error', { before: true, after: true }],
475
  '@stylistic/js/block-spacing': ['error', 'always'],
476
  '@stylistic/js/no-mixed-spaces-and-tabs': 'error'
477
}
478
```
479

480
### Compact Style
481
```javascript
482
rules: {
483
  '@stylistic/js/indent': ['error', 2],
484
  '@stylistic/js/space-before-blocks': ['error', 'never'],
485
  '@stylistic/js/block-spacing': ['error', 'never'],
486
  '@stylistic/js/keyword-spacing': ['error', { 
487
    before: false, 
488
    after: false,
489
    overrides: {
490
      'else': { before: true },
491
      'catch': { before: true }
492
    }
493
  }]
494
}
495
```
496

497
## Type Definitions
498

499
```typescript { .api }
500
interface SpacingRules {
501
  'indent': Rule.RuleModule;
502
  'space-before-blocks': Rule.RuleModule;
503
  'space-infix-ops': Rule.RuleModule;
504
  'keyword-spacing': Rule.RuleModule;
505
  'space-unary-ops': Rule.RuleModule;
506
  'block-spacing': Rule.RuleModule;
507
  'no-mixed-spaces-and-tabs': Rule.RuleModule;
508
  'no-tabs': Rule.RuleModule;
509
}
510

511
interface IndentConfig {
512
  SwitchCase?: number;
513
  VariableDeclarator?: number | VariableDeclaratorConfig;
514
  outerIIFEBody?: number;
515
  MemberExpression?: number | 'off';
516
  FunctionDeclaration?: FunctionConfig;
517
  FunctionExpression?: FunctionConfig;
518
  CallExpression?: CallConfig;
519
  ArrayExpression?: number | 'first' | 'off';
520
  ObjectExpression?: number | 'first' | 'off';
521
  ImportDeclaration?: number | 'first' | 'off';
522
  flatTernaryExpressions?: boolean;
523
  offsetTernaryExpressions?: boolean;
524
  ignoredNodes?: string[];
525
  ignoreComments?: boolean;
526
}
527
```