Skip to content

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

bash
pnpm create reactive-vscode
bash
npm init reactive-vscode@latest
bash
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:

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:

ts
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:
bash
pnpm dev
bash
npm run dev
bash
yarn dev
  1. 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.