Svelte for VS Code

Enhance your VS Code experience with full syntax highlighting and IntelliSense for Svelte components, powered by the Svelte Language Server (https://github.com/sveltejs/language-tools/blob/HEAD/packages/language-server).

Setup

Remove conflicting settings

If you previously added: "files.associations": {"*.svelte": "html"} to your VS Code settings, remove it to avoid conflicts.

Uninstall old extensions

If you had the previous "Svelte" extension by James Birtles:

• UI: Search for @installed in the Extensions panel and uninstall.
• CLI: Run: code --uninstall-extension JamesBirtles.svelte-vscode

Formatter configuration

This extension includes a built-in formatter for .svelte files. To enable formatting: "[svelte]": { "editor.defaultFormatter": "svelte.svelte-vscode" }

The formatter is a Prettier plugin. Standard Prettier options apply, plus Svelte-specific settings like script, markup, and style sorting. Learn more: https://github.com/sveltejs/prettier-plugin-svelte

Requires VS Code >=1.52.0.

For TypeScript/SCSS/Less and other preprocessors, check the language-specific setup guide: https://github.com/sveltejs/language-tools/blob/HEAD/docs/README.md#language-specific-setup

Features

Within Svelte files, you get:

• Real-time diagnostics
• Support for preprocessors with source maps
• Formatting via prettier-plugin-svelte
• Preview compiled code with "Svelte: Show Compiled Code"
• Extract templates into new components with "Svelte: Extract Component"
• Hover information
• Autocompletion
• Emmet support
• Symbols in outline panel
• CSS color highlighting and color picker
• Go-to definition
• Code actions

A TypeScript plugin provides IntelliSense inside JS/TS files for interacting with Svelte components.

Settings

• svelte.enable-ts-plugin: Enable TypeScript IntelliSense for Svelte in JS/TS. Default: false
• svelte.language-server.runtime: Node.js path for running the language server. Required for native modules. Minimum Node version: 12.17. User settings only.
• svelte.language-server.ls-path: Path to the language server executable (bin/server.js). Set only for custom server version. Uses workspace TypeScript if specified. User settings only.
• svelte.language-server.runtime-args: Extra Node arguments, e.g., for Yarn PnP.
• svelte.language-server.port: Port to spawn the language server. Default: -1 (auto).
• svelte.trace.server: Trace communication between VS Code and Svelte Language Server. Options: off, messages, verbose. Default: off.
• svelte.plugin.XXX: Toggle specific features of the extension. Full list: https://github.com/sveltejs/language-tools/blob/HEAD/packages/language-server/README.md#List-of-settings

Yarn 2 PnP Usage

1. Install language server in your workspace: yarn add -D svelte-language-server

2. Generate VS Code/Yarn integration SDKs: yarn dlx @yarnpkg/sdks vscode

This updates svelte.language-server.ls-path and svelte.language-server.runtime-args for the workspace. Workspace trust is required.

3. Restart VS Code.
4. Commit .yarn/sdks changes.

Credits

PostCSS grammar based on hudochenkov/Syntax-highlighting-for-PostCSS: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS