Skip to content

Latest commit

 

History

History

docs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

internal

internal

 
 

preprocessors

preprocessors

 
 

README.md

README.md

 
 

README.md

Svelte Language Server

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

Setup

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

Using with preprocessors

Generic setup

Language specific setup

Documenting components

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>

Adjust syntax highlighting of Svelte files

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.

Troubleshooting / FAQ

Using TypeScript? See this section

Using SCSS or Less? See this section

If I update a TS/JS file, Svelte does not seem to recognize it

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.

export let ... breaks my syntax highlighting

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

My Code does not get formatted

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"
  },

Internals