0
# @tsconfig/svelte
1

2
@tsconfig/svelte provides a foundational TypeScript configuration specifically tailored for Svelte applications. It contains compiler options optimized for Svelte development including ESNext module settings, bundler module resolution, ES2017 target compatibility, and verbatim module syntax to properly handle Svelte's preprocessing requirements.
3

4
## Package Information
5

6
- **Package Name**: @tsconfig/svelte
7
- **Package Type**: npm
8
- **Language**: JSON (TypeScript configuration)
9
- **Installation**: `npm install --save-dev @tsconfig/svelte` or `yarn add --dev @tsconfig/svelte`
10

11
## Core Imports
12

13
This package is used by extending it in your project's `tsconfig.json`:
14

15
```json
16
{
17
  "extends": "@tsconfig/svelte/tsconfig.json"
18
}
19
```
20

21
## Basic Usage
22

23
```json
24
{
25
  "extends": "@tsconfig/svelte/tsconfig.json",
26
  "compilerOptions": {
27
    // Additional project-specific compiler options can be added here
28
    "baseUrl": ".",
29
    "paths": {
30
      "$lib": ["src/lib"],
31
      "$lib/*": ["src/lib/*"]
32
    }
33
  },
34
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
35
}
36
```
37

38
## Capabilities
39

40
### TypeScript Configuration Extension
41

42
Provides a base TypeScript configuration that can be extended in Svelte projects, incorporating all necessary compiler options for optimal Svelte development.
43

44
```json { .api }
45
{
46
  "$schema": "https://json.schemastore.org/tsconfig",
47
  "display": "Svelte",
48
  "_version": "5.0.0",
49
  "compilerOptions": {
50
    "module": "esnext",
51
    "moduleResolution": "bundler", 
52
    "target": "es2017",
53
    "verbatimModuleSyntax": true,
54
    "sourceMap": true,
55
    "strict": true,
56
    "esModuleInterop": true,
57
    "skipLibCheck": true
58
  }
59
}
60
```
61

62
### Module Configuration
63

64
Configures TypeScript to use modern ECMAScript modules with bundler-style resolution, optimized for Svelte's build process.
65

66
```json { .api }
67
{
68
  "compilerOptions": {
69
    "module": "esnext",
70
    "moduleResolution": "bundler"
71
  }
72
}
73
```
74

75
- **module**: Set to `"esnext"` for modern ES module support
76
- **moduleResolution**: Set to `"bundler"` for build tool compatibility
77

78
### Target Compatibility
79

80
Sets the ECMAScript target version for broad browser compatibility while maintaining modern language features.
81

82
```json { .api }
83
{
84
  "compilerOptions": {
85
    "target": "es2017"
86
  }
87
}
88
```
89

90
- **target**: Set to `"es2017"` for compatibility with modern browsers while supporting async/await and other ES2017 features
91

92
### Svelte-Specific Settings
93

94
Includes configuration options specifically required for proper Svelte preprocessing and type checking.
95

96
```json { .api }
97
{
98
  "compilerOptions": {
99
    "verbatimModuleSyntax": true,
100
    "sourceMap": true
101
  }
102
}
103
```
104

105
- **verbatimModuleSyntax**: Set to `true` to enforce explicit `import type` syntax, required because Svelte Preprocess cannot distinguish between values and types
106
- **sourceMap**: Set to `true` to enable source maps for accurate debugging with Svelte compiler warnings/errors
107

108
### Strict Type Checking
109

110
Enables TypeScript's strict mode and interoperability options for robust type safety.
111

112
```json { .api }
113
{
114
  "compilerOptions": {
115
    "strict": true,
116
    "esModuleInterop": true,
117
    "skipLibCheck": true
118
  }
119
}
120
```
121

122
- **strict**: Set to `true` to enable all strict type checking options
123
- **esModuleInterop**: Set to `true` for seamless integration between CommonJS and ES modules
124
- **skipLibCheck**: Set to `true` to skip type checking of declaration files for faster compilation
125

126
## Usage Notes
127

128
- After version 2.0.0, add `/// <reference types="svelte" />` to a `.d.ts` file or entry file to prevent TypeScript errors
129
- This configuration is designed for use with bundler-based workflows common in Svelte development
130
- The configuration can be extended with additional project-specific compiler options as needed
131
- Part of the @tsconfig organization's collection of runtime-specific TypeScript configurations
132

133
## Types
134

135
```typescript { .api }
136
// TypeScript Configuration Schema (for reference)
137
interface TSConfig {
138
  $schema?: string;
139
  display?: string;
140
  _version?: string;
141
  compilerOptions?: {
142
    module?: "esnext" | "commonjs" | "amd" | "system" | "umd" | "es6" | "es2015" | "es2020" | "es2022" | "node16" | "nodenext";
143
    moduleResolution?: "node" | "classic" | "bundler";
144
    target?: "es3" | "es5" | "es6" | "es2015" | "es2016" | "es2017" | "es2018" | "es2019" | "es2020" | "es2021" | "es2022" | "esnext";
145
    verbatimModuleSyntax?: boolean;
146
    sourceMap?: boolean;
147
    strict?: boolean;
148
    esModuleInterop?: boolean;
149
    skipLibCheck?: boolean;
150
    // Additional compiler options can be specified
151
    [key: string]: any;
152
  };
153
  // Standard tsconfig.json properties
154
  include?: string[];
155
  exclude?: string[];
156
  files?: string[];
157
  extends?: string | string[];
158
}
159
```