0
# Framework Configurations
1

2
TypeScript configurations optimized for popular JavaScript frameworks and build tools. Each framework configuration provides tailored compiler options, library support, and build-specific settings.
3

4
## Capabilities
5

6
### Next.js Configuration
7

8
TypeScript configuration optimized for Next.js applications with server-side rendering and modern React features.
9

10
```typescript { .api }
11
interface NextJSConfiguration {
12
  /** Framework target */
13
  framework: "Next.js";
14
  
15
  /** Package name */
16
  package: "@tsconfig/next";
17
  
18
  /** Configuration */
19
  config: {
20
    $schema: "https://json.schemastore.org/tsconfig";
21
    display: "Next.js";
22
    _version: "2.0.0";
23
    compilerOptions: {
24
      lib: ["dom", "dom.iterable", "esnext"];
25
      allowJs: true;
26
      skipLibCheck: true;
27
      strict: true;
28
      noEmit: true;
29
      esModuleInterop: true;
30
      module: "esnext";
31
      moduleResolution: "bundler";
32
      resolveJsonModule: true;
33
      isolatedModules: true;
34
      jsx: "preserve";
35
      incremental: true;
36
      plugins: [{ name: "next" }];
37
    };
38
    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"];
39
    exclude: ["node_modules"];
40
  };
41
}
42
```
43

44
**Installation:**
45
```bash
46
npm install --save-dev @tsconfig/next
47
```
48

49
**Usage:**
50
```json
51
{
52
  "extends": "@tsconfig/next/tsconfig.json"
53
}
54
```
55

56
### React Configurations
57

58
#### Create React App
59

60
Configuration for Create React App projects with React development optimizations.
61

62
```typescript { .api }
63
interface CreateReactAppConfiguration {
64
  /** Framework target */
65
  framework: "Create React App";
66
  
67
  /** Package name */
68
  package: "@tsconfig/create-react-app";
69
  
70
  /** Configuration */
71
  config: {
72
    $schema: "https://json.schemastore.org/tsconfig";
73
    display: "Create React App";
74
    _version: "2.0.1";
75
    compilerOptions: {
76
      target: "es5";
77
      lib: ["dom", "dom.iterable", "es6"];
78
      allowJs: true;
79
      skipLibCheck: true;
80
      esModuleInterop: true;
81
      allowSyntheticDefaultImports: true;
82
      strict: true;
83
      forceConsistentCasingInFileNames: true;
84
      module: "esnext";
85
      moduleResolution: "node";
86
      resolveJsonModule: true;
87
      isolatedModules: true;
88
      noEmit: true;
89
      jsx: "react-jsx";
90
    };
91
  };
92
}
93
```
94

95
#### React Native
96

97
Configuration for React Native applications with mobile development considerations.
98

99
```typescript { .api }
100
interface ReactNativeConfiguration {
101
  /** Framework target */
102
  framework: "React Native";
103
  
104
  /** Package name */
105
  package: "@tsconfig/react-native";
106
  
107
  /** Configuration */
108
  config: {
109
    $schema: "https://json.schemastore.org/tsconfig";
110
    display: "React Native";
111
    _version: "3.0.2";
112
    compilerOptions: {
113
      target: "esnext";
114
      module: "commonjs";
115
      types: ["react-native", "jest"];
116
      lib: [
117
        "es2019",
118
        "es2020.bigint",
119
        "es2020.date",
120
        "es2020.number",
121
        "es2020.promise",
122
        "es2020.string",
123
        "es2020.symbol.wellknown",
124
        "es2021.promise",
125
        "es2021.string",
126
        "es2021.weakref",
127
        "es2022.array",
128
        "es2022.object",
129
        "es2022.string"
130
      ];
131
      allowJs: true;
132
      jsx: "react-native";
133
      noEmit: true;
134
      isolatedModules: true;
135
      strict: true;
136
      moduleResolution: "node";
137
      resolveJsonModule: true;
138
      allowSyntheticDefaultImports: true;
139
      esModuleInterop: true;
140
      skipLibCheck: true;
141
    };
142
  };
143
}
144
```
145

146
#### Vite React
147

148
Configuration for Vite + React projects with modern build tooling.
149

150
```typescript { .api }
151
interface ViteReactConfiguration {
152
  /** Framework target */
153
  framework: "Vite + React";
154
  
155
  /** Package name */
156
  package: "@tsconfig/vite-react";
157
  
158
  /** Configuration */
159
  config: {
160
    $schema: "https://json.schemastore.org/tsconfig";
161
    display: "Vite React";
162
    _version: "2.0.1";
163
    compilerOptions: {
164
      target: "ES2020";
165
      useDefineForClassFields: true;
166
      lib: ["ES2020", "DOM", "DOM.Iterable"];
167
      module: "ESNext";
168
      skipLibCheck: true;
169
      moduleResolution: "bundler";
170
      allowImportingTsExtensions: true;
171
      resolveJsonModule: true;
172
      isolatedModules: true;
173
      noEmit: true;
174
      jsx: "react-jsx";
175
      strict: true;
176
      noUnusedLocals: true;
177
      noUnusedParameters: true;
178
      noFallthroughCasesInSwitch: true;
179
    };
180
  };
181
}
182
```
183

184
### Framework-Specific Configurations
185

186
#### Svelte
187

188
Configuration for Svelte applications with component compilation support.
189

190
```typescript { .api }
191
interface SvelteConfiguration {
192
  /** Framework target */
193
  framework: "Svelte";
194
  
195
  /** Package name */
196
  package: "@tsconfig/svelte";
197
  
198
  /** Configuration highlights */
199
  config: {
200
    display: "Svelte";
201
    compilerOptions: {
202
      target: "es2020";
203
      module: "es2020";
204
      moduleResolution: "node";
205
      importsNotUsedAsValues: "error";
206
      isolatedModules: true;
207
      resolveJsonModule: true;
208
      sourceMap: true;
209
      esModuleInterop: true;
210
      skipLibCheck: true;
211
      forceConsistentCasingInFileNames: true;
212
    };
213
  };
214
}
215
```
216

217
#### Remix
218

219
Configuration for Remix full-stack applications.
220

221
```typescript { .api }
222
interface RemixConfiguration {
223
  /** Framework target */
224
  framework: "Remix";
225
  
226
  /** Package name */
227
  package: "@tsconfig/remix";
228
  
229
  /** Configuration highlights */
230
  config: {
231
    display: "Remix";
232
    compilerOptions: {
233
      lib: ["DOM", "DOM.Iterable", "ES2022"];
234
      isolatedModules: true;
235
      esModuleInterop: true;
236
      jsx: "react-jsx";
237
      moduleResolution: "node";
238
      resolveJsonModule: true;
239
      target: "ES2022";
240
      strict: true;
241
      allowJs: true;
242
      skipLibCheck: true;
243
      forceConsistentCasingInFileNames: true;
244
    };
245
  };
246
}
247
```
248

249
#### Nuxt.js
250

251
Configuration for Nuxt.js Vue applications.
252

253
```typescript { .api }
254
interface NuxtConfiguration {
255
  /** Framework target */
256
  framework: "Nuxt.js";
257
  
258
  /** Package name */
259
  package: "@tsconfig/nuxt";
260
  
261
  /** Configuration highlights */
262
  config: {
263
    display: "Nuxt";
264
    compilerOptions: {
265
      target: "ES2018";
266
      module: "ESNext";
267
      moduleResolution: "Node";
268
      lib: ["ESNext", "ESNext.AsyncIterable", "DOM"];
269
      esModuleInterop: true;
270
      allowJs: true;
271
      sourceMap: true;
272
      strict: true;
273
      noEmit: true;
274
      experimentalDecorators: true;
275
      baseUrl: ".";
276
      paths: {
277
        "~/*": ["./*"];
278
        "@/*": ["./*"];
279
      };
280
      types: ["@nuxt/types"];
281
    };
282
  };
283
}
284
```
285

286
### Specialized Framework Configurations
287

288
#### Ember.js
289

290
Configuration for Ember.js applications with extensive framework integration.
291

292
```typescript { .api }
293
interface EmberConfiguration {
294
  /** Framework target */
295
  framework: "Ember.js";
296
  
297
  /** Package name */
298
  package: "@tsconfig/ember";
299
  
300
  /** Configuration features */
301
  features: {
302
    experimentalDecorators: true;
303
    emberTyping: true;
304
    extensivePathMapping: true;
305
  };
306
}
307
```
308

309
#### Taro Mini-Program
310

311
Configuration for Taro cross-platform mini-program development.
312

313
```typescript { .api }
314
interface TaroConfiguration {
315
  /** Framework target */
316
  framework: "Taro";
317
  
318
  /** Package name */
319
  package: "@tsconfig/taro";
320
  
321
  /** Configuration highlights */
322
  config: {
323
    display: "Taro";
324
    compilerOptions: {
325
      target: "es2017";
326
      lib: ["es2018", "dom"];
327
      allowJs: true;
328
      skipLibCheck: true;
329
      esModuleInterop: true;
330
      allowSyntheticDefaultImports: true;
331
      strict: true;
332
      module: "esnext";
333
      moduleResolution: "node";
334
      resolveJsonModule: true;
335
      isolatedModules: true;
336
      noEmit: true;
337
      jsx: "preserve";
338
    };
339
  };
340
}
341
```
342

343
#### Docusaurus v2
344

345
Configuration for Docusaurus v2 documentation sites.
346

347
```typescript { .api }
348
interface DocusaurusConfiguration {
349
  /** Framework target */
350
  framework: "Docusaurus v2";
351
  
352
  /** Package name */
353
  package: "@tsconfig/docusaurus";
354
  
355
  /** Configuration highlights */
356
  config: {
357
    display: "Docusaurus v2";
358
    compilerOptions: {
359
      target: "es2017";
360
      lib: ["dom", "dom.iterable", "esnext"];
361
      allowJs: true;
362
      skipLibCheck: true;
363
      esModuleInterop: true;
364
      allowSyntheticDefaultImports: true;
365
      strict: true;
366
      module: "esnext";
367
      moduleResolution: "node";
368
      resolveJsonModule: true;
369
      isolatedModules: true;
370
      noEmit: true;
371
      jsx: "react-jsx";
372
    };
373
  };
374
}
375
```
376

377
## Usage Patterns
378

379
### Modern React Development
380

381
```json
382
{
383
  "extends": "@tsconfig/vite-react/tsconfig.json",
384
  "compilerOptions": {
385
    "baseUrl": "src",
386
    "paths": {
387
      "@/*": ["*"]
388
    }
389
  }
390
}
391
```
392

393
### Full-Stack Applications
394

395
```json
396
{
397
  "extends": "@tsconfig/remix/tsconfig.json",
398
  "compilerOptions": {
399
    "types": ["@remix-run/node", "vite/client"]
400
  }
401
}
402
```
403

404
### Mobile Development
405

406
```json
407
{
408
  "extends": "@tsconfig/react-native/tsconfig.json",
409
  "compilerOptions": {
410
    "types": ["react-native", "jest", "@types/react-native"]
411
  }
412
}
413
```
414

415
### Static Site Generation
416

417
```json
418
{
419
  "extends": "@tsconfig/next/tsconfig.json",
420
  "compilerOptions": {
421
    "plugins": [
422
      { "name": "next" },
423
      { "name": "typescript-plugin-css-modules" }
424
    ]
425
  }
426
}
427
```