This repo demonstrates the ability to inject Svelte into a VS Code Webview, primiarly for use with a custom editor.
It's similar to the work done on VSCode Webview React, though using Svelte instead.
It's very barebones, and demonstrates a simple example of binding data to a field in a json-based file (example.customData) and the ability to write data to that file.
You can run this project by doing the following two things:
- Run
npm install
in the terminal in VS Code - Press F5 to start debugging the extension
- The main sauce of this is that the
tasks.json
file defines a pre-build step that compiles the Svelte files and outputs them to the extension build directory before launching the extension. - We then inject that script into the HTML output in
customDataEditor.ts
The debugging experience right now is pretty painful! You've got to fully build and rebuild the app to test things, and debugging in general doesn't seem to work well. However, it works!
This was developed as part of a larger project to build a game data editor in VS Code. You can read more about that project here:
Part 1: Why?
Part 2: Custom Editors, Webviews, and Svelte
Part 3: Getting Data into Svelte
Part 4: Editing Data in Svelte