Powering svelte-check, Svelte for VS Code and other IDE extensions who use it.

Do you want to use TypeScript/SCSS/Less/..? See Using with preprocessors.

Generic setup

• SCSS/Less
• Other CSS languages, TailwindCSS
• TypeScript

To add documentation on a Svelte component that will show up as a docstring in LSP-compatible editors, you can use an HTML comment with the @component tag:

<!--
 @component
 Here's some documentation for this component. It will show up on hover for
 JavaScript/TypeScript projects using a LSP-compatible editor such as VSCode or
 Vim/Neovim with coc.nvim.

 - You can use markdown here.
 - You can use code blocks here.
 - JSDoc/TSDoc will be respected by LSP-compatible editors.
 - Indentation will be respected as much as possible.
-->

<!-- @component You can use a single line, too -->

<!-- @component But only the last documentation comment will be used -->

<main>
    <h1>Hello world</h1>
</main>

The VS Code extension comes with its own syntax highlighting grammar which defines special scopes. If your syntax highlighting seems to be not working for Svelte components or you feel that some colors are wrong, you can add something like the following to your settings.json:

{
    "editor.tokenColorCustomizations": {
        "[<Name of your theme>]": {
            "textMateRules": [
                {
                    "settings": {
                        "foreground": "#569CD6", // any color you like
                    },
                    "scope": "support.class.component.svelte" // scope name you want to adjust highlighting for
                }
            ],
        },
    }
}

To find out the scope of the things you want to highlight differently, you can use the scope inspector by entering the command "Developer: Inspect Editor Tokens and Scopes". The scope at the top of the section "textmate scopes" is what you are looking for. The current color is in the section "foreground" - you can use this to look up colors of other scopes if you want them to be the same color but don't know the color-code.

For more info on customizing your theme, see the VS Code docs.

You need to save the file to see the changes. If the problem persists after saving, check if you have something like this set in your settings:

"files.watcherExclude": {
  "**/*": true,
}

If so, this will prevent the language server from getting noticed about updates, because it uses a file watcher for js/ts files.

If you have the Babel Javascript plugin installed, this may be the cause. Disable it for Svelte files.

Your default formatter for Svelte files may be wrong.

• Mabye it's set to the old Svelte extension, if so, remove the setting
• Maybe you set all files to be formatted by the prettier extension. Then you have two options: Either install prettier-plugin-svelte from npm, or tell VSCode to format the code with the Svelte for VSCode extension:

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

• Notes about deployment
• Overview of the language-tools and how things work together