reactive-vscode
v1.0.0-beta.2TypeScript
Develop VSCode extension with Vue Reactivity API
0/weekUpdated 1 months agoMITUnpacked: 294.2 KB
Published by _Kerman
npm install reactive-vscodereactive-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
- Why reactive-vscode
- All Functions
- Examples
$3
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.
$3
``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: () => 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 = Hello ${counter}
item.show()
}
updateStatusBar()
extensionContext.subscriptions.push(
commands.registerCommand('extension.sayHello', () => {
counter++
updateStatusBar()
}),
commands.registerCommand('extension.sayGoodbye', () => {
counter--
updateStatusBar()
}),
)
}
`
$3
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 Reactivity 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.
[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