An exciting new feature that shipped with Visual Studio Code 1.44 is support for Custom Editors.
Custom editors let extensions provide custom editing experiences using HTML, CSS, and JavaScript in place of VS Code’s normal text based editor. Custom editors support both text based files and binary files, and enable some neat new scenarios such as wysiwyg editors, previews, and even image editors!
The true power behind Custom Editors is the fact that these editors have both read and write support, and offer way more than simply “an alternate view of a certain file type”. Changes in the original source file are immediately reflected in the custom editor, and vice versa.
I’m quite excited for the Custom Text Editors feature, as it opens up a ton of possibilities. Here’s a few examples the docs hint at:
- Previewing assets, such as shaders or 3D models, directly in VS Code.
- Creating WYSIWYG editors for languages such as Markdown or XAML.
- Offering alternative visual renderings for data files such as CSV or JSON or XML.
- Building fully customizable editing experiences text files.
~
An example editor is vscode-asciiflow2, a tool to easily draw ASCII diagrams. Thanks to the Custom Editor API it can be used directly inside of Visual Studio Code
~
To get started with creating your own Custom Editor, be sure to check this video:
Custom Editor API →
Custom Editor Examples →vscode-asciiflow2 →
💁♂️ For a project I’m working on I’ve created a “Pump Configurator” in React. It allows a user to visually define the tanks and pumps layout of a Petrol Station (see video below). The generated configuration is stored as JSON. If we wanted, we could use the Custom Editors API to bring this editor into VS Code.