Get Started

Reactive VSCode is a library that helps you develop Visual Studio Code extensions with Vue's Reactivity API. We assume you are already familiar with the basic ideas of Vue's Reactivity API.

Read Why reactive-vscode for more information about why reactive-vscode is created.

Create a New Project

pnpm

pnpm create reactive-vscode

npm

npm init reactive-vscode@latest

yarn

yarn create reactive-vscode

Or you can add it to an existing project by installing the reactive-vscode package.

Package Exports

The package exports the following:

• Utility functions and types, like defineExtension
• Wrappers of VSCode APIs as composables, like useActiveTextEditor
• All exports from @vue/reactivity, like ref
• Exports that are useful for VSCode extension from @vue/runtime-core, like watchEffect

You can find all the implemented composables here. They will be documented in the future.

Extension Basics

Extension Manifest Non-Proprietary

Each VS Code extension must have a package.json as its Extension Manifest. Please visit the official documentation for more information.

Extension Entry File

Usually, the extension entry file is src/extension.ts. You can define your extension by using the defineExtension function:

import { defineExtension } from 'reactive-vscode'

export = defineExtension(() => {
  // Setup your extension here
})

We will introduce how to write the body of your extension in the next section.

Developing the Extension

1. Open a new terminal and run the following command:

pnpm

pnpm dev

npm

npm run dev

yarn

yarn dev

2. Non-Proprietary Inside the editor, press F5 or run the command Debug: Start Debugging from the Command Palette (Ctrl+Shift+P). This will run the extension in a new window.

Visit the VSCode Documentation for more information about debugging the extension.

---

Twoslash powered docs!

You can hover the tokens in code blocks to inspect their types. This is especially useful for details not covered in the docs.