Svelte for CoC.nvim

⚠️ Deprecation Notice: This repo is being deprecated, in favor of a fork of the official coc-svelte. Until #8 gets merged, please feel free to use my fork of coc-svelte.

Forked from svelte-vscode

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

Setup

Do you want to use Typescript/SCSS/Less/..? See "Using with preprocessors" below.

If you added "files.associations": {"*.svelte": "html" } to your CoC settings, remove it.

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

• SCSS/Less
• TypeScript

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). It's recommended to use the official svelte-preprocess package which can handle many languages.

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
    // ...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.language-server.port

At which port to spawn the language server. Can be used for attaching to the process for debugging / profiling. If you experience crashes due to "port already in use", try setting the port. -1 = default port is used.

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

svelte.plugin.svelte.hover.enable

Enable hover info for Svelte (for tags like #if/#each). Default: true

svelte.plugin.svelte.completions.enable

Enable autocompletion for Svelte (for tags like #if/#each). Default: true

svelte.plugin.svelte.rename.enable

Enable rename functionality (rename svelte files or variables inside svelte files). Default: true