Hello Counter
A simple example that shows how many times the user has called the commands.
Used functions
- useCommands - Register multiple commands. See commands.registerCommand.
- useStatusBarItem - Reactive API for window.createStatusBarItem.
ts
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--,
})
})
ts
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()
}),
)
}