fork from svelte-vscode.
Provides rich intellisense for Svelte components in (neo)vim, utilising the svelte language server.
This is the official coc-svelte
version, but with the latest dependencies. You can use this one or create your own.
To use add this line to your Vim config if you are using vim-plug.
Plug 'codechips/coc-svelte', {'do': 'npm install'}
or by running :CocInstall
in Vim.
:CocInstall https://github.com/codechips/coc-svelte
This repo is integrated with Dependabot, so hopefully it will some what stay in sync with Svelte language-server changes.
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.
- 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
- 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
). 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>
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.
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.
Enable the TypeScript plugin. Default: true
Enable diagnostic messages for TypeScript. Default: true
Enable hover info for TypeScript. Default: true
Enable document symbols for TypeScript. Default: true
Enable completions for TypeScript. Default: true
Enable go to definition for TypeScript. Default: true
Enable code actions for TypeScript. Default: true
Enable the CSS plugin. Default: true
Enable diagnostic messages for CSS. Default: true
Enable hover info for CSS. Default: true
Enable auto completions for CSS. Default: true
Enable document colors for CSS. Default: true
Enable color picker for CSS. Default: true
Enable document symbols for CSS. Default: true
Enable the HTML plugin. Default: true
Enable hover info for HTML. Default: true
Enable auto completions for HTML. Default: true
Enable HTML tag auto closing. Default: true
Enable document symbols for HTML. Default: true
Enable the Svelte plugin. Default: true
Enable diagnostic messages for Svelte. Default: true
Enable formatting for Svelte (includes css & js). Default: true
Enable hover info for Svelte (for tags like #if/#each). Default: true
Enable autocompletion for Svelte (for tags like #if/#each). Default: true