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 create reactive-vscode
npm init reactive-vscode@latest
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
- Open a new terminal and run the following command:
pnpm dev
npm run dev
yarn dev
- 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.