@tsconfig/svelte

@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.

Package Information

• Package Name: @tsconfig/svelte
• Package Type: npm
• Language: JSON (TypeScript configuration)
• Installation: npm install --save-dev @tsconfig/svelte or yarn add --dev @tsconfig/svelte

Core Imports

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

{
  "extends": "@tsconfig/svelte/tsconfig.json"
}

Basic Usage

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // Additional project-specific compiler options can be added here
    "baseUrl": ".",
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

Capabilities

TypeScript Configuration Extension

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

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Svelte",
  "_version": "5.0.0",
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler", 
    "target": "es2017",
    "verbatimModuleSyntax": true,
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Module Configuration

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

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler"
  }
}

• module: Set to "esnext" for modern ES module support
• moduleResolution: Set to "bundler" for build tool compatibility

Target Compatibility

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

{
  "compilerOptions": {
    "target": "es2017"
  }
}

• target: Set to "es2017" for compatibility with modern browsers while supporting async/await and other ES2017 features

Svelte-Specific Settings

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

{
  "compilerOptions": {
    "verbatimModuleSyntax": true,
    "sourceMap": true
  }
}

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

Strict Type Checking

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

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

• strict: Set to true to enable all strict type checking options
• esModuleInterop: Set to true for seamless integration between CommonJS and ES modules
• skipLibCheck: Set to true to skip type checking of declaration files for faster compilation

Usage Notes

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

Types

// TypeScript Configuration Schema (for reference)
interface TSConfig {
  $schema?: string;
  display?: string;
  _version?: string;
  compilerOptions?: {
    module?: "esnext" | "commonjs" | "amd" | "system" | "umd" | "es6" | "es2015" | "es2020" | "es2022" | "node16" | "nodenext";
    moduleResolution?: "node" | "classic" | "bundler";
    target?: "es3" | "es5" | "es6" | "es2015" | "es2016" | "es2017" | "es2018" | "es2019" | "es2020" | "es2021" | "es2022" | "esnext";
    verbatimModuleSyntax?: boolean;
    sourceMap?: boolean;
    strict?: boolean;
    esModuleInterop?: boolean;
    skipLibCheck?: boolean;
    // Additional compiler options can be specified
    [key: string]: any;
  };
  // Standard tsconfig.json properties
  include?: string[];
  exclude?: string[];
  files?: string[];
  extends?: string | string[];
}