Skip to content

Volar Labs

Having a common framework for building editor tooling has many benefits. It allows us to share code, it allows us to share knowledge, and most importantly, it allows us to share the pain of building editor tooling.

Those pesky times where your mappings are off by one, or you’re not sure what files are being included in your project, or there’s a syntax error in your generated virtual code. We all know those times, and if you don’t, you probably will soon.

Volar Labs is a VS Code extension to help you debug your Volar-powered language server and client. It’s the editor tooling for the people who make the editor tooling.

A screenshot of Volar Labs, showing the mappings between the different parts of a file being inspected

Installation

Volar Labs is available on the VS Code Marketplace. You can install it by searching for volarjs-labs in the Extensions tab of VS Code, or by clicking here.

Features

  • List Volar Servers - See all the Volar servers running in your VS Code instance.
  • Inspect Project - See the files included in your project.
  • Inspect Virtual File - See the virtual source code generated by your server.
  • Virtual Source Maps - See the mappings between the virtual source code and the original source code.
  • TS Memory Usage - See how much memory TypeScript is using.
  • … and more!