用 Vue 响应式写 VSCode 拓展Reactive VSCode 将 Vue 响应式引入了 VSCode 拓展开发

VSCode 提供了具有 C# 特色的拓展 API，使用起来并不十分方便。Reactive VSCode 项目将 VSCode 的拓展 API 用 Vue 的响应式 API 封装，提供了类似于 VueUse 的接口，能极大地提高拓展的开发效率和可维护性。

例子

使用 Reactive VSCode 实现根据文件内容给某几行添加背景色：

import { defineConfigs, defineExtension, useActiveEditorDecorations } from 'reactive-vscode'

const { decorations } = defineConfigs('demo', { decorations: Boolean })

export = defineExtension(() => {
  useActiveEditorDecorations(
    {
      backgroundColor: 'red',
    },
    () => decorations.value ? [/* ... Caclulated ranges ... */] : [],
  )
})

使用原始的 VSCode API （超级长）

import type { ExtensionContext } from 'vscode'
import { window, workspace } from 'vscode'

const decorationType = window.createTextEditorDecorationType({
  backgroundColor: 'red',
})

function updateDecorations(enabled: boolean) {
  window.activeTextEditor?.setDecorations(
    decorationType,
    enabled ? [/* ... Caclulated ranges ... */] : [],
  )
}

export function activate(context: ExtensionContext) {
  const configurations = workspace.getConfiguration('demo')
  let decorationsEnabled = configurations.get<boolean>('decorations')!

  context.subscriptions.push(workspace.onDidChangeConfiguration((e) => {
    if (e.affectsConfiguration('demo.decorations')) {
      decorationsEnabled = configurations.get<boolean>('decorations')!
      updateDecorations(decorationsEnabled)
    }
  }))
  context.subscriptions.push(window.onDidChangeActiveTextEditor(() => {
    updateDecorations(decorationsEnabled)
  }))

  updateDecorations(decorationsEnabled)
}

更多例子可以在这里找到。

优势

文档优秀 - 该项目的文档按主题编写，非常适合初学 VSCode 拓展开发
直观的状态管理 - 非常多原本复杂的逻辑现在只是一个 watchEffect
轻松收集 Disposables - VSCode API 的大部分方法都会返回 Disposable，收集它们曾经十分困难
打包提交小 - 若直接引入 Vue，如果不引入 @vue/runtime-core 则无法使用 watch API。Reactive VSCode 专门单独抽取了此类 API，避免了不必要的体积

项目状态

可以生产使用。目前已经使用在：

Slidev for VSCode (124K downloads)
Iconify IntelliSense (1.4M downloads)

所有封装好的函数可以在这里找到。几乎所有 VSCode API 都有对应的封装，如有遗漏欢迎提 issue 指出，非常感谢！

目前还在计划编写额外的 Mock API，但还需较长时间。

欢迎访问 Reactive VSCode 文档和 GitHub 仓库了解更多！