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.
ts
import { defineConfigs, defineExtension, useActiveEditorDecorations } from 'reactive-vscode'
const { decorations } = defineConfigs('demo', { decorations: Boolean })
export = defineExtension(() => {
useActiveEditorDecorations(
{
backgroundColor: 'red',
},
() => decorations.value ? [/* ... Caclulated ranges ... */] : [],
)
})
ts
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)
}