https://github.com/kermanx/reactive-vscode

Vue Reactivity for VSCode Extension API
https://github.com/kermanx/reactive-vscode

composable extension-api extension-development reactivity vscode vue3

Last synced: 28 days ago
JSON representation

Vue Reactivity for VSCode Extension API

• Host: GitHub
• URL: https://github.com/kermanx/reactive-vscode
• Owner: kermanx
• License: mit
• Created: 2024-05-14T11:53:34.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-03-26T03:14:53.000Z (about 1 month ago)
• Last Synced: 2025-04-12T01:48:41.763Z (28 days ago)
• Topics: composable, extension-api, extension-development, reactivity, vscode, vue3
• Language: TypeScript
• Homepage: https://kermanx.github.io/reactive-vscode/
• Size: 1020 KB
• Stars: 698
• Watchers: 7
• Forks: 16
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - kermanx/reactive-vscode - Vue Reactivity for VSCode Extension API (TypeScript)
• awesome - kermanx/reactive-vscode - Vue Reactivity for VSCode Extension API (TypeScript)

README

        
# reactive-vscode

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]



**Develop VSCode extension with Vue Reactivity API**

- [**Documentation**](https://kermanx.github.io/reactive-vscode/)

- [**Why reactive-vscode**](https://kermanx.github.io/reactive-vscode/guide/why)

- [**All Functions**](https://kermanx.github.io/reactive-vscode/functions/)

- [**Examples**](https://kermanx.github.io/reactive-vscode/examples/)

### Project Status

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

- [Vue - Official ![downloads](https://img.shields.io/visual-studio-marketplace/d/Vue.volar.svg)](https://github.com/vuejs/language-tools)

- [Slidev for VSCode ![downloads](https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg)](https://github.com/slidevjs/slidev/tree/main/packages/vscode)

- [Iconify IntelliSense ![downloads](https://img.shields.io/visual-studio-marketplace/d/antfu.iconify.svg)](https://github.com/antfu/vscode-iconify)

The [documentation](https://kermanx.github.io/reactive-vscode/) is complete, and the [VueUse integration](https://kermanx.github.io/reactive-vscode/guide/vueuse.html) 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](https://github.com/kermanx/reactive-vscode/issues/new).

### Counter Example

```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--,

  })

})

```

 Implementation with original VSCode API 

```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()

    }),

  )

}

```

[More examples](https://kermanx.github.io/reactive-vscode/examples/).

### License

[MIT](./LICENSE) License © 2024-PRESENT [_Kerman](https://github.com/kermanx)

Source code in [the `./packages/reactivity` directory](https://github.com/kermanx/reactive-vscode/blob/main/packages/reactivity) is ported from [`@vue/runtime-core`](https://github.com/vuejs/core/blob/main/packages/runtime-core). Licensed under a [MIT License](https://github.com/vueuse/vueuse/blob/main/LICENSE).

Source code in [the `./packages/mock` directory](https://github.com/kermanx/reactive-vscode/blob/main/packages/core/src/mock) references the implementation of [`VSCode`](https://github.com/microsoft/vscode). Licensed under a [MIT License](https://github.com/microsoft/vscode/blob/main/LICENSE.txt).

The logo  is modified from [Vue Reactivity Artworks](https://github.com/vue-reactivity/art). Licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).

Part of the docs website is ported from [VueUse](https://github.com/vueuse/vueuse). Licensed under a [MIT License](https://github.com/vueuse/vueuse/blob/main/LICENSE).

[npm-version-src]: https://img.shields.io/npm/v/reactive-vscode?style=flat&colorA=080f12&colorB=1fa669

[npm-version-href]: https://npmjs.com/package/reactive-vscode

[npm-downloads-src]: https://img.shields.io/npm/dm/reactive-vscode?style=flat&colorA=080f12&colorB=1fa669

[npm-downloads-href]: https://npmjs.com/package/reactive-vscode

[bundle-src]: https://img.shields.io/bundlephobia/minzip/reactive-vscode?style=flat&colorA=080f12&colorB=1fa669&label=minzip

[bundle-href]: https://bundlephobia.com/result?p=reactive-vscode

[license-src]: https://img.shields.io/github/license/KermanX/reactive-vscode.svg?style=flat&colorA=080f12&colorB=1fa669

[license-href]: https://github.com/kermanx/reactive-vscode/blob/main/LICENSE

[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669

[jsdocs-href]: https://www.jsdocs.io/package/reactive-vscode