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.