Extension

It's simple to create a VSCode extension with reactive-vscode. You just need to define your extension code inside the defineExtension function, and export the returned activate and deactivate functions.

import { defineExtension } from 'reactive-vscode'

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

TypeScript Configuration

VSCode extensions should be CommonJS modules. Since export = statement is not allowed in ESM, you need to add this in your tsconfig.json to make TypeScript happy if you use a Bundler like tsup.

{
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "module": "Preserve"
  }
}

Or you can avoid the export = statement in this way:

import { defineExtension } from 'reactive-vscode'
const { activate, deactivate } = defineExtension(() => {
  // Your extension code here
})
export { activate, deactivate }

The Setup Function

Like the setup function in Vue 3, the setup function in reactive-vscode is a function that defines how your extension should behave. When the extension is activated, this function will be called once.

You can do these things in the setup function:

• Register commands (via useCommand or useCommands)
• Register views (covered in the next section)
• Define other (reactive) logics (via watchEffect or watch, etc.)
• Use other composables (like useActiveTextEditor)

Here is an example:

import { defineExtension, useCommand, useIsDarkTheme, useLogger, watchEffect } from 'reactive-vscode'
import { window } from 'vscode'
import { useDemoTreeView } from './treeView'

export = defineExtension(() => {
  const logger = useLogger('Reactive VSCode')
  logger.info('Extension Activated')
  logger.show()

  useCommand('reactive-vscode-demo.helloWorld', () => {
    window.showInformationMessage(message.value)
  })

  const isDark = useIsDarkTheme()
  watchEffect(() => {
    logger.info('Is Dark Theme:', isDark.value)
  })

  useDemoTreeView()
})

The Extension Context

The extension context can be imported from reactive-vscode. It is a global shallowRef that contains the ExtensionContext object.

import { extensionContext } from 'reactive-vscode'

extensionContext.value?.extensionPath

A common use case is to get the absolute path of some resources in your extension. In this case, you can use useAbsolutePath as a shortcut.