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

May 6, 2020 · View on GitHub

Svelte for VS Code

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

Features

Svelte
- Diagnostic messages for warnings and errors
- Support for svelte preprocessors that provide source maps
- Svelte specific formatting (via prettier-plugin-svelte)
HTML
- Hover info
- Autocompletions
- Emmet
- Symbols in Outline panel
CSS / SCSS / LESS
- 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
- Diagnostics messages for syntax errors, semantic errors, and suggestions
- Hover info
- Formatting (via prettier)
- Symbols in Outline panel
- Autocompletions
- Go to definition
- Code Actions

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.