Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamesbirtles/svelte-vscode
Svelte language support for VS Code
https://github.com/jamesbirtles/svelte-vscode
svelte vscode vscode-extension
Last synced: about 1 month ago
JSON representation
Svelte language support for VS Code
- Host: GitHub
- URL: https://github.com/jamesbirtles/svelte-vscode
- Owner: jamesbirtles
- License: mit
- Archived: true
- Created: 2018-05-01T12:12:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T19:44:08.000Z (over 4 years ago)
- Last Synced: 2024-11-02T17:02:18.986Z (about 2 months ago)
- Topics: svelte, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
- Size: 188 KB
- Stars: 207
- Watchers: 11
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Work is being continued in the official [svelte language-tools repo](https://github.com/sveltejs/language-tools)
# Svelte for VS Code
Provides syntax highlighting and rich intellisense for Svelte components in VS Code, utilising the [svelte language server](https://github.com/UnwrittenFun/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](https://github.com/UnwrittenFun/prettier-plugin-svelte))
- HTML
- Hover info
- Autocompletions
- [Emmet](https://emmet.io/)
- Symbols in Outline panel
- CSS / SCSS / LESS
- Diagnostic messages for syntax and lint errors
- Hover info
- Autocompletions
- Formatting (via [prettier](https://github.com/prettier/prettier))
- [Emmet](https://emmet.io/)
- 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](https://github.com/prettier/prettier))
- Symbols in Outline panel
- Autocompletions
- Go to definition
- Code Actions
### Using with preprocessors
#### Language specific setup
- [SCSS](docs/preprocessors/scss.md)
- [TypeScript](docs/preprocessors/typescript.md)
#### Generic setup
If a svelte file contains some language other than `html`, `css` or `javascript`, `svelte-vscode` needs to know how to [preprocess](https://svelte.dev/docs#svelte_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`).
```js
// 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.
```html
Hello, world!
div {
h1 {
color: red;
}
}
```
### 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`