Editor Decoration

A simple example that adds decorations to the active editor depending on the configuration.

Used functions

• defineConfigs - Define configurations of an extension. See workspace.getConfiguration. You can use this function with vscode-ext-gen.
• useActiveEditorDecorations - Reactively set decorations on the active editor. See 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 ... */] : [],
  )
})

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