Skip to content
This repository has been archived by the owner. It is now read-only.

jamesbirtles/svelte-vscode

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

  • 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

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