Develop VSCode extension with Vue Reactivity API
Currently, most of the VSCode APIs are covered, and this project has been used in:
The documentation is complete, and the VueUse integration is also available.
However, the project is still in its 0.x and may have minor API changes. If you encounter any problems, please feel free to open an issue.
import { defineExtension, ref, useCommands, useStatusBarItem } from 'reactive-vscode'
import { StatusBarAlignment } from 'vscode'
export = defineExtension(() => {
const counter = ref(0)
useStatusBarItem({
alignment: StatusBarAlignment.Right,
priority: 100,
text: () => `$(megaphone) Hello*${counter.value}`,
})
useCommands({
'extension.sayHello': () => counter.value++,
'extension.sayGoodbye': () => counter.value--,
})
})Implementation with original VSCode API
import type { ExtensionContext } from 'vscode'
import { commands, StatusBarAlignment, window } from 'vscode'
export function activate(extensionContext: ExtensionContext) {
let counter = 0
const item = window.createStatusBarItem(StatusBarAlignment.Right, 100)
function updateStatusBar() {
item.text = `$(megaphone) Hello*${counter}`
item.show()
}
updateStatusBar()
extensionContext.subscriptions.push(
commands.registerCommand('extension.sayHello', () => {
counter++
updateStatusBar()
}),
commands.registerCommand('extension.sayGoodbye', () => {
counter--
updateStatusBar()
}),
)
}MIT License © 2024-PRESENT _Kerman
Source code in the ./packages/reactivity directory is ported from @vue/runtime-core. Licensed under a MIT License.
Source code in the ./packages/mock directory references the implementation of VSCode. Licensed under a MIT License.
The logo 
Part of the docs website is ported from VueUse. Licensed under a MIT License.