coc-svelte

coc-extensions

Svelte language support for coc.nim

Installation CommandVim prompt

:CocInstall coc-svelte

GitHub owner

coc-extensions

Version

v0.5.0

npm package

coc-svelte

Requirements

coc ^0.0.77

License

MIT

Repository

GitHub

npm latest published 2023-10-08Registry checked 2026-08-23Registry summary

Published Package Summary

Svelte for (Neo)Vim

fork from svelte-vscode.

Provides rich intellisense for Svelte components in (neo)vim, utilising the svelte language server.

Install

:CocInstall coc-svelte

You have to install syntax plugin to get syntax highlight and get right filetype, for example leafOfTree/vim-svelte-plugin

Setup

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

Do you want to use TypeScript/SCSS/Less/..? See the docs.

Features

You can expect the following within Svelte files:

Diagnostic messages
Support for svelte preprocessors that provide source maps
Formatting (via prettier-plugin-svelte)
Hover info
Autocompletions
Go to definition

The extension also comes packaged with a TypeScript plugin, which when activated provides intellisense within JavaScript and TypeScript files for interacting with Svelte files.

`svelte.plugin.XXX`

Settings to toggle specific features of the extension. The full list of all settings is here.

Usage with Yarn 2 PnP

Run yarn add -D svelte-language-server to install svelte-language-server as a dev dependency
Run yarn dlx @yarnpkg/pnpify --sdk vim to generate or update the Vim/Yarn integration SDKs.
Set the svelte.language-server.ls-path setting in your user configuration, pointing it to the workspace-installed language server.
Restart vim.
Commit the changes to .yarn/sdks

Read the complete README

Svelte language support for coc.nim

Activation Events

onLanguage:svelte
onCommand:svelte.restartLanguageServer
onLanguage:javascript
onLanguage:typescript

Developer Resources

Want to build, test, or contribute to coc.nvim extensions? Explore our official SDK and testing toolkits.

Open Developer Guide

This published npm package does not include a history.md or changelog.md file. Browse its npm versions or repository releases for available release information.

All contributes.commands entries from the published package manifest for coc-svelte@0.5.0.

Command (:CocCommand)	Description
svelte.restartLanguageServer	Svelte: Restart Language Server
svelte.typescript.findAllFileReferences	Svelte: Find File References
svelte.typescript.findComponentReferences	Svelte: Find Component References
svelte.kit.generateMultipleFiles	SvelteKit: Create route
svelte.kit.generatePage	SvelteKit: Create +page.svelte
svelte.kit.generatePageLoad	SvelteKit: Create +page.js/ts
svelte.kit.generatePageServerLoad	SvelteKit: Create +page.server.js/ts
svelte.kit.generateLayout	SvelteKit: Create +layout.svelte
svelte.kit.generateLayoutLoad	SvelteKit: Create +layout.js/ts
svelte.kit.generateLayoutServerLoad	SvelteKit: Create +layout.server.js/ts
svelte.kit.generateServer	SvelteKit: Create +server.js/ts
svelte.kit.generateError	SvelteKit: Create +error.svelte

All contributes.configuration entries from the published package manifest, including each raw property schema for coc-settings.json.

svelte.enable-ts-pluginboolean

Enable semantic tokens (semantic highlight) for TypeScript.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "title": "Enable TypeScript Svelte plugin",
  "default": false,
  "description": "Enable semantic tokens (semantic highlight) for TypeScript."
}

svelte.plugin.css.enableboolean

Enable the CSS plugin

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS",
  "default": true,
  "description": "Enable the CSS plugin"
}

svelte.plugin.css.globalsstring

Which css files should be checked for global variables (`--global-var: value;`). These variables are added to the css completions. String of comma-separated file paths or globs relative to workspace root.

Default: ""

Raw JSON Schema

{
  "type": "string",
  "title": "CSS: Global Files",
  "default": "",
  "description": "Which css files should be checked for global variables (`--global-var: value;`). These variables are added to the css completions. String of comma-separated file paths or globs relative to workspace root."
}

svelte.plugin.html.enableboolean

Enable the HTML plugin

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "HTML",
  "default": true,
  "description": "Enable the HTML plugin"
}

svelte.language-server.portnumber

- You normally don't set this - 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.

Default: -1

Raw JSON Schema

{
  "type": "number",
  "title": "Language Server Port",
  "default": -1,
  "description": "- You normally don't set this - 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.svelte.enableboolean

Enable the Svelte plugin

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte",
  "default": true,
  "description": "Enable the Svelte plugin"
}

svelte.language-server.debugboolean

- You normally don't set this - Enable more verbose logging for the language server useful for debugging language server execution.

Raw JSON Schema

{
  "type": "boolean",
  "title": "Language Server Debug Mode",
  "description": "- You normally don't set this - Enable more verbose logging for the language server useful for debugging language server execution."
}

svelte.ask-to-enable-ts-pluginboolean

Ask on startup to enable the TypeScript plugin.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Ask to enable TypeScript Svelte plugin",
  "default": true,
  "description": "Ask on startup to enable the TypeScript plugin."
}

svelte.language-server.ls-pathstring

- You normally don't set this - Path to the language server executable. If you installed the "svelte-language-server" npm package, it's within there at "bin/server.js". Path can be either relative to your workspace root or absolute. Set this only if you want to use a custom version of the language server. This will then also use the workspace version of TypeScript. This setting can only be changed in user settings for security reasons.

Raw JSON Schema

{
  "type": "string",
  "scope": "application",
  "title": "Language Server Path",
  "description": "- You normally don't set this - Path to the language server executable. If you installed the \"svelte-language-server\" npm package, it's within there at \"bin/server.js\". Path can be either relative to your workspace root or absolute. Set this only if you want to use a custom version of the language server. This will then also use the workspace version of TypeScript. This setting can only be changed in user settings for security reasons."
}

svelte.language-server.runtimestring

- You normally don't need this - Path to the node executable to use to spawn 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 node version mismatch is likely. Minimum required node version is 12.17. This setting can only be changed in user settings for security reasons.

Raw JSON Schema

{
  "type": "string",
  "scope": "application",
  "title": "Language Server Runtime",
  "description": "- You normally don't need this - Path to the node executable to use to spawn 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 node version mismatch is likely. Minimum required node version is 12.17. This setting can only be changed in user settings for security reasons."
}

svelte.plugin.css.hover.enableboolean

Enable hover info for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Hover Info",
  "default": true,
  "description": "Enable hover info for CSS"
}

svelte.plugin.html.hover.enableboolean

Enable hover info for HTML

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "HTML: Hover Info",
  "default": true,
  "description": "Enable hover info for HTML"
}

svelte.plugin.typescript.enableboolean

Enable the TypeScript plugin

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript",
  "default": true,
  "description": "Enable the TypeScript plugin"
}

svelte.plugin.svelte.hover.enableboolean

Enable hover information for Svelte

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Hover",
  "default": true,
  "description": "Enable hover information for Svelte"
}

svelte.plugin.svelte.format.enableboolean

Enable formatting for Svelte (includes css & js). You can set some formatting options through this extension. They will be ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Format",
  "default": true,
  "description": "Enable formatting for Svelte (includes css & js). You can set some formatting options through this extension. They will be ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.svelte.rename.enableboolean

Enable rename/move Svelte files functionality

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Rename",
  "default": true,
  "description": "Enable rename/move Svelte files functionality"
}

svelte.plugin.css.completions.enableboolean

Enable auto completions for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Auto Complete",
  "default": true,
  "description": "Enable auto completions for CSS"
}

svelte.plugin.css.diagnostics.enableboolean

Enable diagnostic messages for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Diagnostics",
  "default": true,
  "description": "Enable diagnostic messages for CSS"
}

svelte.plugin.html.completions.enableboolean

Enable auto completions for HTML

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "HTML: Auto Complete",
  "default": true,
  "description": "Enable auto completions for HTML"
}

svelte.plugin.html.tagComplete.enableboolean

Enable HTML tag auto closing

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "HTML: Tag Auto Closing",
  "default": true,
  "description": "Enable HTML tag auto closing"
}

svelte.plugin.svelte.compilerWarningsobject

Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-unused-selector': 'ignore', 'unused-export-let': 'error'}

Default: {}

Raw JSON Schema

{
  "type": "object",
  "title": "Svelte: Compiler Warnings Settings",
  "default": {},
  "description": "Svelte compiler warning codes to ignore or to treat as errors. Example: { 'css-unused-selector': 'ignore', 'unused-export-let': 'error'}",
  "additionalProperties": {
    "enum": [
      "ignore",
      "error"
    ],
    "type": "string"
  }
}

svelte.plugin.typescript.hover.enableboolean

Enable hover info for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Hover Info",
  "default": true,
  "description": "Enable hover info for TypeScript"
}

svelte.plugin.css.documentColors.enableboolean

Enable document colors for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Document Colors",
  "default": true,
  "description": "Enable document colors for CSS"
}

svelte.plugin.css.selectionRange.enableboolean

Enable selection range for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: SelectionRange",
  "default": true,
  "description": "Enable selection range for CSS"
}

svelte.plugin.svelte.codeActions.enableboolean

Enable Code Actions for Svelte

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Code Actions",
  "default": true,
  "description": "Enable Code Actions for Svelte"
}

svelte.plugin.svelte.completions.enableboolean

Enable auto completions for Svelte

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Completions",
  "default": true,
  "description": "Enable auto completions for Svelte"
}

svelte.plugin.svelte.diagnostics.enableboolean

Enable diagnostic messages for Svelte

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Diagnostics",
  "default": true,
  "description": "Enable diagnostic messages for Svelte"
}

svelte.plugin.css.documentSymbols.enableboolean

Enable document symbols for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Symbols in Outline",
  "default": true,
  "description": "Enable document symbols for CSS"
}

svelte.plugin.html.documentSymbols.enableboolean

Enable document symbols for HTML

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "HTML: Symbols in Outline",
  "default": true,
  "description": "Enable document symbols for HTML"
}

svelte.plugin.svelte.defaultScriptLanguagestring

The default language to use when generating new script tags

Default: "none"

Raw JSON Schema

{
  "enum": [
    "none",
    "ts"
  ],
  "type": "string",
  "title": "Svelte: Default Script Language",
  "default": "none",
  "description": "The default language to use when generating new script tags"
}

svelte.plugin.svelte.selectionRange.enableboolean

Enable selection range for Svelte

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte: Selection Range",
  "default": true,
  "description": "Enable selection range for Svelte"
}

svelte.ui.svelteKitFilesContextMenu.enablestring

Show a context menu to generate SvelteKit files. "always" to always show it. "never" to always disable it. "auto" to show it when in a SvelteKit project.

Default: "auto"

Raw JSON Schema

{
  "enum": [
    "auto",
    "never",
    "always"
  ],
  "type": "string",
  "default": "auto",
  "description": "Show a context menu to generate SvelteKit files. \"always\" to always show it. \"never\" to always disable it. \"auto\" to show it when in a SvelteKit project. "
}

svelte.plugin.css.colorPresentations.enableboolean

Enable color picker for CSS

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "CSS: Color Picker",
  "default": true,
  "description": "Enable color picker for CSS"
}

svelte.plugin.typescript.codeActions.enableboolean

Enable code actions for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Code Actions",
  "default": true,
  "description": "Enable code actions for TypeScript"
}

svelte.plugin.typescript.completions.enableboolean

Enable completions for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Completions",
  "default": true,
  "description": "Enable completions for TypeScript"
}

svelte.plugin.typescript.definitions.enableboolean

Enable go to definition for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Go to Definition",
  "default": true,
  "description": "Enable go to definition for TypeScript"
}

svelte.plugin.typescript.diagnostics.enableboolean

Enable diagnostic messages for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Diagnostics",
  "default": true,
  "description": "Enable diagnostic messages for TypeScript"
}

svelte.plugin.svelte.format.config.printWidthnumber

Maximum line width after which code is tried to be broken up. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. This option is also ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: 80

Raw JSON Schema

{
  "type": "number",
  "title": "Svelte Format: Print Width",
  "default": 80,
  "description": "Maximum line width after which code is tried to be broken up. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. This option is also ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.typescript.signatureHelp.enableboolean

Enable signature help (parameter hints) for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Signature Help",
  "default": true,
  "description": "Enable signature help (parameter hints) for TypeScript"
}

svelte.plugin.svelte.format.config.singleQuoteboolean

Use single quotes instead of double quotes, where possible. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. This option is also ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte Format: Quotes",
  "default": false,
  "description": "Use single quotes instead of double quotes, where possible. This is a Prettier core option. If you have the Prettier extension installed, this option is ignored and the corresponding option of that extension is used instead. This option is also ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.typescript.selectionRange.enableboolean

Enable selection range for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Selection Range",
  "default": true,
  "description": "Enable selection range for TypeScript"
}

svelte.plugin.typescript.documentSymbols.enableboolean

Enable document symbols for TypeScript

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "TypeScript: Symbols in Outline",
  "default": true,
  "description": "Enable document symbols for TypeScript"
}

svelte.plugin.svelte.format.config.svelteSortOrderstring

Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: "options-scripts-markup-styles"

Raw JSON Schema

{
  "type": "string",
  "title": "Svelte Format: Sort Order",
  "default": "options-scripts-markup-styles",
  "description": "Format: join the keys `options`, `scripts`, `markup`, `styles` with a - in the order you want. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.svelte.format.config.svelteStrictModeboolean

More strict HTML syntax. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte Format: Strict Mode",
  "default": false,
  "description": "More strict HTML syntax. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.svelte.format.config.svelteAllowShorthandboolean

Option to enable/disable component attribute shorthand if attribute name and expression are the same. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte Format: Allow Shorthand",
  "default": true,
  "description": "Option to enable/disable component attribute shorthand if attribute name and expression are the same. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.svelte.format.config.svelteBracketNewLineboolean

Put the `>` of a multiline element on a new line. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte Format: Bracket New Line",
  "default": true,
  "description": "Put the `>` of a multiline element on a new line. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

svelte.plugin.svelte.format.config.svelteIndentScriptAndStyleboolean

Whether or not to indent code inside `<script>` and `<style>` tags. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "title": "Svelte Format: Indent Script And Style",
  "default": true,
  "description": "Whether or not to indent code inside `<script>` and `<style>` tags. This option is ignored if there's any kind of configuration file, for example a `.prettierrc` file."
}

coc-svelte

Published Package Summary

Svelte for (Neo)Vim

Install

Setup

Features

svelte.plugin.XXX

Usage with Yarn 2 PnP

Version History

Contributed Commands

Configuration Schema

`svelte.plugin.XXX`