Home

Awesome

Work is being continued in the official svelte language-tools repo

Svelte for VS Code

Provides syntax highlighting and rich intellisense for Svelte components in VS Code, utilising the svelte language server.

Features

Using with preprocessors

Language specific setup

Generic setup

If a svelte file contains some language other than html, css or javascript, svelte-vscode needs to know how to preprocess it. This can be achieved by creating a svelte.config.js file at the root of your project which exports a svelte options object (similar to svelte-loader and rollup-plugin-svelte).

// svelte.config.js
const preprocess = require('my-example-svelte-preprocessor');

module.exports = {
    preprocess: [preprocess()],
    // ...other svelte options
};

It's also necessary to add a type="text/language-name" or lang="language-name" to your style and script tags, which defines how that code should be interpreted by the extension.

<div>
    <h1>Hello, world!</h1>
</div>

<style type="text/scss">
    div {
        h1 {
            color: red;
        }
    }
</style>

Settings

svelte.language-server.runtime

Path to the node executable you would like to use to run the language server. This is useful when you depend on native modules such as node-sass as without this they will run in the context of vscode, meaning v8 version mismatch is likely.

svelte.plugin.typescript.enable

Enable the TypeScript plugin. Default: true

svelte.plugin.typescript.diagnostics

Enable diagnostic messages for TypeScript. Default: true

svelte.plugin.typescript.hover

Enable hover info for TypeScript. Default: true

svelte.plugin.typescript.documentSymbols

Enable document symbols for TypeScript. Default: true

svelte.plugin.typescript.completions

Enable completions for TypeScript. Default: true

svelte.plugin.typescript.definitions

Enable go to definition for TypeScript. Default: true

svelte.plugin.typescript.codeActions

Enable code actions for TypeScript. Default: true

svelte.plugin.css.enable

Enable the CSS plugin. Default: true

svelte.plugin.css.diagnostics

Enable diagnostic messages for CSS. Default: true

svelte.plugin.css.hover

Enable hover info for CSS. Default: true

svelte.plugin.css.completions

Enable auto completions for CSS. Default: true

svelte.plugin.css.documentColors

Enable document colors for CSS. Default: true

svelte.plugin.css.colorPresentations

Enable color picker for CSS. Default: true

svelte.plugin.css.documentSymbols

Enable document symbols for CSS. Default: true

svelte.plugin.html.enable

Enable the HTML plugin. Default: true

svelte.plugin.html.hover

Enable hover info for HTML. Default: true

svelte.plugin.html.completions

Enable auto completions for HTML. Default: true

svelte.plugin.html.tagComplete

Enable HTML tag auto closing. Default: true

svelte.plugin.html.documentSymbols

Enable document symbols for 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.format.enable

Enable formatting for Svelte (includes css & js). Default: true