TypeScript Svelte Plugin

0.3.51 · active · verified Sun Apr 19

The `typescript-svelte-plugin` provides enhanced TypeScript and JavaScript language intelligence when working with Svelte components. Specifically, it enables features like Rename, Find Usages, Go To Definition, and Diagnostics within `.ts` and `.js` files that interact with or import Svelte components. This plugin operates as a TypeScript language service plugin, extending the capabilities of the TypeScript compiler. It is part of the broader Svelte Language Tools monorepo and currently stands at version 0.3.51. The project sees active development with frequent patch releases, often co-released with `svelte2tsx`, `svelte-language-server`, and `svelte-check`, reflecting continuous improvements and bug fixes. It differentiates itself by focusing on the TypeScript/JavaScript-to-Svelte interaction, complementing the `svelte-language-server` which handles intellisense *within* Svelte files themselves.

Common errors

```
Cannot find name 'MyComponent'. Did you mean 'MyComponent'?ts(2552)
```
cause The Svelte component imported into a TypeScript file is not recognized, likely because the `typescript-svelte-plugin` is not correctly configured or active.

fix Verify that `typescript-svelte-plugin` is listed in the `plugins` array within your `tsconfig.json` and that your Svelte component file has been saved.
```
Property 'someProp' does not exist on type 'IntrinsicAttributes & Pick<MyComponent, "someOtherProp">'.
```
cause Intellisense for Svelte component props is incorrect or missing, indicating the plugin might not be processing the Svelte component's type definition correctly.

fix Check for errors in your Svelte component's script tag (e.g., `export let someProp`). Ensure the component file is saved and that `svelte2tsx` (a core dependency) is correctly installed and up-to-date.

Warnings

gotcha Changes made to Svelte files are only recognized by the TypeScript language service plugin after the Svelte files have been saved to disk. This means unsaved changes in a Svelte component might not immediately reflect in type checking or intellisense within dependent TS/JS files.
Fix: Always save your Svelte component files after making changes to ensure the TypeScript language service processes the latest state.
gotcha The `typescript-svelte-plugin` provides intellisense specifically for interactions *from* TypeScript/JavaScript files *to* Svelte components. Intellisense *within* Svelte files themselves (e.g., inside `<script>` or `<style>` tags) is handled by the `svelte-language-server`, which is usually bundled with the Svelte VS Code extension.
Fix: Ensure you have the Svelte for VS Code extension (or an equivalent language server setup) installed alongside this plugin for full Svelte intellisense capabilities.
gotcha The plugin needs to be explicitly configured in your `tsconfig.json` or `jsconfig.json`. Simply installing the `typescript-svelte-plugin` package via npm is not sufficient for it to become active.
Fix: Add an entry for `typescript-svelte-plugin` within the `plugins` array under `compilerOptions` in your `tsconfig.json` or `jsconfig.json`.

Install

npm install typescript-svelte-plugin npm
yarn add typescript-svelte-plugin yarn
pnpm add typescript-svelte-plugin pnpm

Imports

typescript-svelte-plugin
wrong:
```
import 'typescript-svelte-plugin';
```
correct:
```
/* Add to tsconfig.json */
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-svelte-plugin"
      }
    ]
  }
}
```
This package is a TypeScript Language Service Plugin and is not imported directly into userland code. It's enabled via your `tsconfig.json` or `jsconfig.json`.
enabled
```
/* In tsconfig.json plugins config */
{
  "name": "typescript-svelte-plugin",
  "enabled": true
}
```
The 'enabled' option controls whether the plugin is active. It defaults to 'true' but can be explicitly set to 'false' to disable it without removing the configuration.
assumeIsSvelteProject
```
/* In tsconfig.json plugins config */
{
  "name": "typescript-svelte-plugin",
  "assumeIsSvelteProject": true
}
```
The 'assumeIsSvelteProject' option can be set to 'true' to skip project detection logic and force the plugin to always assume it's operating within a Svelte project context.

Quickstart

This `tsconfig.json` configuration enables the `typescript-svelte-plugin` for Svelte projects, providing enhanced intellisense in TypeScript/JavaScript files.

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "esnext",
    "target": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "checkJs": true,
    "plugins": [
      {
        "name": "typescript-svelte-plugin",
        "enabled": true,
        "assumeIsSvelteProject": false
      }
    ]
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "exclude": ["node_modules", "dist"]
}

view raw JSON →