{"id":12257,"library":"typescript-svelte-plugin","title":"TypeScript Svelte Plugin","description":"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.","status":"active","version":"0.3.51","language":"javascript","source_language":"en","source_url":"https://github.com/sveltejs/language-tools#master","tags":["javascript","svelte","typescript","plugin"],"install":[{"cmd":"npm install typescript-svelte-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add typescript-svelte-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add typescript-svelte-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Internal dependency for Svelte-to-TypeScript transformation, essential for the plugin's functionality.","package":"svelte2tsx","optional":false},{"reason":"This is a TypeScript language service plugin, requiring TypeScript itself as a peer dependency for operation.","package":"typescript","optional":false}],"imports":[{"note":"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`.","wrong":"import 'typescript-svelte-plugin';","symbol":"typescript-svelte-plugin","correct":"/* Add to tsconfig.json */\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-svelte-plugin\"\n      }\n    ]\n  }\n}"},{"note":"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.","symbol":"enabled","correct":"/* In tsconfig.json plugins config */\n{\n  \"name\": \"typescript-svelte-plugin\",\n  \"enabled\": true\n}"},{"note":"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.","symbol":"assumeIsSvelteProject","correct":"/* In tsconfig.json plugins config */\n{\n  \"name\": \"typescript-svelte-plugin\",\n  \"assumeIsSvelteProject\": true\n}"}],"quickstart":{"code":"{\n  \"compilerOptions\": {\n    \"moduleResolution\": \"bundler\",\n    \"module\": \"esnext\",\n    \"target\": \"esnext\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"allowJs\": true,\n    \"checkJs\": true,\n    \"plugins\": [\n      {\n        \"name\": \"typescript-svelte-plugin\",\n        \"enabled\": true,\n        \"assumeIsSvelteProject\": false\n      }\n    ]\n  },\n  \"include\": [\"src/**/*.d.ts\", \"src/**/*.ts\", \"src/**/*.js\", \"src/**/*.svelte\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}","lang":"json","description":"This `tsconfig.json` configuration enables the `typescript-svelte-plugin` for Svelte projects, providing enhanced intellisense in TypeScript/JavaScript files."},"warnings":[{"fix":"Always save your Svelte component files after making changes to ensure the TypeScript language service processes the latest state.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add an entry for `typescript-svelte-plugin` within the `plugins` array under `compilerOptions` in your `tsconfig.json` or `jsconfig.json`.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The Svelte component imported into a TypeScript file is not recognized, likely because the `typescript-svelte-plugin` is not correctly configured or active.","error":"Cannot find name 'MyComponent'. Did you mean 'MyComponent'?ts(2552)"},{"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.","cause":"Intellisense for Svelte component props is incorrect or missing, indicating the plugin might not be processing the Svelte component's type definition correctly.","error":"Property 'someProp' does not exist on type 'IntrinsicAttributes & Pick<MyComponent, \"someOtherProp\">'."}],"ecosystem":"npm"}