Editor Decoration

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

Used functions

• defineConfig - Define configurations of an extension. @see {@linkcode workspace.getConfiguration}
• useActiveTextEditor - Reactive API for window.activeTextEditor.
• useEditorDecorations - Reactively set decorations on the given editor. @see {@linkcode TextEditor.setDecorations}

Reactive VSCode

import { defineConfig, defineExtension, useActiveTextEditor, useEditorDecorations } from 'reactive-vscode'

const config = defineConfig<{ decorations: boolean }>('demo')

export = defineExtension(() => {
  const editor = useActiveTextEditor()
  useEditorDecorations(
    editor,
    {
      backgroundColor: 'red',
    },
    () => config.decorations ? [/* ... 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)
}