reactive-vscode

reactive-vscode

Develop VSCode extension with Vue Reactivity API

• Documentation
• Why reactive-vscode
• All Functions

Counter Example

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 { StatusBarAlignment, commands, 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()
    }),
  )
}

More examples.

License

MIT License © 2024-PRESENT _Kerman

Source code in the ./packages/reactivity directory is ported from @vue/runtime-core. Licensed under a MIT License.

The logo is modified from Vue Reactity Artworks. Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Part of the docs website is ported from VueUse. Licensed under a MIT License.