Svelte Language Server

A language server (implementing the language server protocol) for Svelte.

Requires Node 12 or later.

What is a language server?

From https://microsoft.github.io/language-server-protocol/overview

The idea behind a Language Server is to provide the language-specific smarts inside a server that can communicate with development tooling over a protocol that enables inter-process communication.

In simpler terms, this allows editor and addon devs to add support for svelte specific 'smarts' (e.g. diagnostics, autocomplete, etc) to any editor without reinventing the wheel.

Features

Svelte language server is under development and the list of features will surely grow over time.

Currently Supported:

Svelte
- Diagnostic messages for warnings and errors
- Svelte specific formatting (via prettier-plugin-svelte)
HTML (via vscode-html-languageservice)
- Hover info
- Autocompletions
- Emmet
- Symbols in Outline panel
CSS / SCSS / LESS (via vscode-css-languageservice)
- Diagnostic messages for syntax and lint errors
- Hover info
- Autocompletions
- Formatting (via prettier)
- Emmet
- Color highlighting and color picker
- Symbols in Outline panel
TypeScript / JavaScript (via TypeScript)
- Diagnostics messages for syntax errors, semantic errors, and suggestions
- Hover info
- Formatting (via prettier)
- Symbols in Outline panel
- Autocompletions
- Go to definition
- Code Actions

How can I use it?

Install a plugin for your editor:

VS Code

Settings

The language server has quite a few settings to toggle features. They are listed below. When using the VS Code extension, you can set these through the settings UI or in the settings.json using the keys mentioned below.

When using the language server directly, put the settings as JSON inside initializationOptions.configuration for the initialize command. When using the didChangeConfiguration command, pass the JSON directly. The language server also accepts configuration for Emmet (key: emmet), Prettier (key: prettier) and TypeScript (keys: javascript and typescript for JS/TS config).

Example:

Init:

{
    initializationOptions: {
        configuration: {
            svelte: {
                plugin: {
                    css: { enable: false },
                    // ...
                }
            },
            typescript: { /* .. */ },
            javascript: { /* .. */ },
            prettierConfig: { /* .. */ },
            // ...
        }
    }
}

Update:

{
    svelte: {
        plugin: {
            css: { enable: false },
            // ...
        }
    },
    typescript: { /* .. */ },
    javascript: { /* .. */ },
    prettierConfig: { /* .. */ },
    // ...
    }
}

List of settings

`svelte.plugin.typescript.enable`

Enable the TypeScript plugin. Default: true

`svelte.plugin.typescript.diagnostics.enable`

Enable diagnostic messages for TypeScript. Default: true

`svelte.plugin.typescript.hover.enable`

Enable hover info for TypeScript. Default: true

`svelte.plugin.typescript.documentSymbols.enable`

Enable document symbols for TypeScript. Default: true

`svelte.plugin.typescript.completions.enable`

Enable completions for TypeScript. Default: true

`svelte.plugin.typescript.findReferences.enable`

Enable find-references for TypeScript. Default: true

`svelte.plugin.typescript.definitions.enable`

Enable go to definition for TypeScript. Default: true

`svelte.plugin.typescript.codeActions.enable`

Enable code actions for TypeScript. Default: true

`svelte.plugin.typescript.selectionRange.enable`

Enable selection range for TypeScript. Default: true

`svelte.plugin.typescript.rename.enable`

Enable rename functionality for JS/TS variables inside Svelte files. Default: true

`svelte.plugin.typescript.signatureHelp.enable`

Enable signature help (parameter hints) for JS/TS. Default: true

`svelte.plugin.typescript.semanticTokens.enable`

Enable semantic tokens (semantic highlight) for TypeScript. Doesn't apply to JavaScript. Default: true

`svelte.plugin.css.enable`

Enable the CSS plugin. Default: true

`svelte.plugin.css.globals`

Which css files should be checked for global variables (--global-var: value;). These variables are added to the css completions. String of comma-separated file paths or globs relative to workspace root.

`svelte.plugin.css.diagnostics.enable`

Enable diagnostic messages for CSS. Default: true

`svelte.plugin.css.hover.enable`

Enable hover info for CSS. Default: true

`svelte.plugin.css.completions.enable`

Enable auto completions for CSS. Default: true

`svelte.plugin.css.completions.emmet`

Enable emmet auto completions for CSS. Default: true If you want to disable emmet completely everywhere (not just Svelte), you can also set "emmet.showExpandedAbbreviation": "never" in your settings.

`svelte.plugin.css.documentColors.enable`

Enable document colors for CSS. Default: true

`svelte.plugin.css.colorPresentations.enable`

Enable color picker for CSS. Default: true

`svelte.plugin.css.documentSymbols.enable`

Enable document symbols for CSS. Default: true

`svelte.plugin.css.selectionRange.enable`

Enable selection range for CSS. Default: true

`svelte.plugin.html.enable`

Enable the HTML plugin. Default: true

`svelte.plugin.html.hover.enable`

Enable hover info for HTML. Default: true

`svelte.plugin.html.completions.enable`

Enable auto completions for HTML. Default: true

`svelte.plugin.html.completions.emmet`

Enable emmet auto completions for HTML. Default: true If you want to disable emmet completely everywhere (not just Svelte), you can also set "emmet.showExpandedAbbreviation": "never" in your settings.

`svelte.plugin.html.tagComplete.enable`

Enable HTML tag auto closing. Default: true

`svelte.plugin.html.documentSymbols.enable`

Enable document symbols for HTML. Default: true

`svelte.plugin.html.linkedEditing.enable`

Enable Linked Editing for HTML. Default: true

`svelte.plugin.html.renameTags.enable`

Enable rename tags for the opening/closing tag pairs in HTML. Default: true

`svelte.plugin.svelte.enable`

Enable the Svelte plugin. Default: true

`svelte.plugin.svelte.diagnostics.enable`

Enable diagnostic messages for Svelte. Default: true

`svelte.plugin.svelte.compilerWarnings`

Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-unused-selector': 'ignore', 'unused-export-let': 'error'}

`svelte.plugin.svelte.format.enable`

Enable formatting for Svelte (includes css & js) using prettier-plugin-svelte. Default: true

You can set some formatting options through this extension. They will be ignored if there's any kind of configuration file, for example a .prettierrc file. Read more about Prettier's configuration file here.

`svelte.plugin.svelte.format.config.svelteSortOrder`

Format: join the keys options, scripts, markup, styles with a - in the order you want. Default: options-scripts-markup-styles