编辑器装饰

一个简单的示例，根据配置为活动编辑器添加装饰。

使用的函数

• defineConfigs - 定义一个扩展的配置。参见 workspace.getConfiguration。 你可以将此函数与 vscode-ext-gen 搭配使用。
• useActiveEditorDecorations - 响应式地为活动编辑器设置装饰。参见 window.activeTextEditor。

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)
}