Skip to content

Editor Decoration

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

Used functions

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