create-vscode-editor

Create VS Code Editors

Easily create custom VS Code editors, using React for the UI.

WARNING: This project is not ready for production use. Proceed with caution

This is an opionated VS Code extension generator with the following features out of the box:

• You use React to build the Editor UX
• Editors will automatically work in all VS Code distributions:
  • VS Code desktop
  • github.dev
  • vscode.dev
  • Github Codespaces
• VS Code run/debug integration
• Automated publishing to the VS Code Marketplace
• HMR support for the editor coming soon

Checkout the Tldraw VS Code editor extension, that others and I built. This code is extracted from the Tldraw repo.

Example editors built with this project:

• Make your own customized Tldraw editor for VS Code

Install and Run

• yarn create vscode-editor my-editor
• cd my-editor
• yarn start
• VS Code will auto open
• Run the extension by Pressing F5 or selecting Run -> Start Debugging
• Open an .editor file (see examples/) from the newly launch VS Code window. You should see the placeholder drawing editor:

Customizing Editor

• Do the Install and Run from above
• Iterate on your custom editor by
  • Changing the code in editor/src
  • Use Command+R to reload the extension after you make changes to the editor code (HMR coming soon)
  • Rinse and repeat

Share Your Extension

• Create an extension installer, you can share directly to people
  • yarn package
  • The installer will be created in the out folder
  • People can then use the installer by going to the extension window and choosing Install from VSIX...
  • 
• Coming soon: automated publishing to the Marketplace. For now you can use the workflow where you upload the .vsix installer file

Todos

• Switch out Tldraw for a much simpler editor example. Make sure it's somewhat compelling and matches the vision of the project.
• Make sure setup instructions are accurate

Future Work

• Add tests
  • For the generator
  • To the template to provide ready to go VS Code extension testing for editors
• Add instructions and scripts for publishing automatically to the Marketplace
• Add hot reloading to both the extension and editor app. Switch from esbuild to Vite (uses esbuild anyway)
• Optimize editor instance launch times. Feels like >1sec right now on github.dev, vscode.dev, Codespaces
  • It's much faster on desktop but still not code editor level fast. Tldraw itself might need some optimizing for initialization speed.
  • Can we PWA functionality to cache the frontend?
• Make bidirectional document syncing patch based. This is important for github.dev, vscode.dev, and Codespaces as it reduces network traffic between the extension host and extension browser clientxw.
• Make patching underlying model patch based
• Make the project evolvable. Currently users would have to generate fresh project to get the latest. Instead they should just be able to update the dependency via yarn/npm.
• Provide some optional useful editor building infrastructure
• An undo/redo manager
• An app data model
• Multiplayer framework or Live Share integration
• Utilities for maintaining file formats with best practices for being easily evolvable/serializable.
• Add CLI support for flags for language ts/js and UI frameworks other than react like vue
• Use a proper CLI framework for the generator

This folder contains the source for the tldraw VS Code extension.

Developing

1. Install dependencies

• Run yarn from the root folder

2. Build @tldraw/tldraw

• Run yarn start from the root folder.

3. Start the editor

In the root folder:

• Run yarn start:vscode.

This will start the development server for the vscode/editor project and open the vscode/extension folder in a new window.

In the vscode/extension window, open the terminal and run:

• Install dependencies (yarn)
• Start the VS Code debugger (Menu > Run > Start Debugging)

Open a .editor file or create a new .editor file from the command palette.

Publishing

To publish, chat with the team on the Discord channel.

• Install vsce globally
• Run vsce login tldraw-org and sign in

In the vscode/extension folder:

• Run yarn vscode:publish

Implementation References

• yarn create
• Yarn Create & Yarn 1.0
• VS Code Marketplace Manager
• Web Extensions Guide
  • Test Your Web Extension
  • Web Extension Testing
  • An example custom editor that does work as a Web Extension
    • https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
    • https://github.com/hediet/vscode-drawio
• VS Code Extension API/Landing Page
• Getting Started
• Custom Editor API
• github.com/microsoft/vscode-extension-samples
• Extensions Guide -> Webviews
• Publishing Extensions