reactive-vscode

Develop VSCode extension with Vue Reactivity API

• Documentation
• Why reactive-vscode
• All Functions
• Examples

Project Status

Currently, most of the VSCode APIs are covered, and this project has been used in:

• Vue - Official
• Slidev for VSCode
• Iconify IntelliSense

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.

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

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.

Source code in the ./packages/mock directory references the implementation of VSCode. 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.