aral / svelte-vscode-web

Unofficial port of svelte language tools extension to VSCode Web

Svelte VSCode Web Extension

This is an unofficial port of the Svelte VSCode extension to VSCode web. Web extensions can run in both standalone vscode and browser-based web vscode (used in e.g. github.dev, github1s.com, vscode.dev...). Web extensions have some limitations.

Supported features

• All builtin language features should be working - syntax highlighting, definition navigation, auto completions...
• Typescript 4.4.4 bundled in with autocompletion across files
• Prettier formatter

Unsupported features

Templating engines (pug, cofeescript...) and styling engines (sass, less...) aren't currently supported. Importing Svelte components from typescript isn't supported either.

See it in action in github.dev here (Install the recommended extension when asked)

This is still a work in progress, feel free to create issues in the project repo.

repo readme:

I started from the web extension starter template but switched to esbuild.

The official language tools repo is vendored but currently unmodified and has some small changes marked with a WEBEXT comment

Typescript support is preconfigured

Marketplace extension url: https://marketplace.visualstudio.com/items?itemName=asafamr.svelte-web

bootstrap with

npm install
npm run bootstrap

start esbuild watch with npm run dev-watch

then either:

run in vscode with F5 (debug with electron dev tools - ctrl+shift+I) or

run in browser with npm run run-in-browser (debug with browser dev tools)

compile minified with npm run compile - this also writes some bundle size info to txt files

LICENSE: MIT