Editor and Document

Editors and documents are the core of the VS Code extension development. In this guide, we will learn how to interact with the editor and document.

The Active Editor

The active editor is the one that currently has focus or, when none has focus, the one that has changed input most recently. The useActiveTextEditor and useActiveNotebookEditor composable can be used to get the active text editor.

import { defineExtension, useActiveNotebookEditor, useActiveTextEditor, watchEffect } from 'reactive-vscode'
import type { ExtensionContext } from 'vscode'

export = defineExtension(() => {
  const textEditor = useActiveTextEditor() 
  const notebookEditor = useActiveNotebookEditor() 

  watchEffect(() => {
    console.log('Active Text Editor:', textEditor.value)
    console.log('Active Notebook Editor:', notebookEditor.value)
  })
})

Visible Editors

The useVisibleTextEditors and useVisibleNotebookEditors composable can be used to get the visible text editors.

import { defineExtension, useVisibleNotebookEditors, useVisibleTextEditors, watchEffect } from 'reactive-vscode'

export = defineExtension(() => {
  const textEditors = useVisibleTextEditors()
  const notebookEditors = useVisibleNotebookEditors()

  watchEffect(() => {
    console.log('Visible Text Editors:', textEditors.value)
    console.log('Visible Notebook Editors:', notebookEditors.value)
  })
})

Get Editor Document

• TextEditor.document is the document associated with this text editor.
• NotebookEditor.notebook the notebook document associated with this notebook editor.

The document will be the same for the entire lifetime of this text editor or notebook editor.

import { computed, defineExtension, useActiveTextEditor } from 'reactive-vscode'
import type { ExtensionContext } from 'vscode'

export = defineExtension(() => {
  const textEditor = useActiveTextEditor()
  const document = computed(() => textEditor.value?.document) 
})

Document Text

The useDocumentText composable can be used to get the text of the active document.

import { computed, defineExtension, useActiveTextEditor, useDocumentText } from 'reactive-vscode'
import type { ExtensionContext } from 'vscode'

export = defineExtension(() => {
  const textEditor = useActiveTextEditor()
  const document = computed(() => textEditor.value?.document)
  const text = useDocumentText(document) 
})

The returned text is settable, which means you can update the text of the document.

import { computed, defineExtension, ref, useActiveTextEditor, useDocumentText, watchEffect } from 'reactive-vscode'
import type { ExtensionContext } from 'vscode'

export = defineExtension(() => {
  const editor = useActiveTextEditor()
  const text = useDocumentText(() => editor.value?.document)

  // Reactive, may be set from other places
  const name = ref('John Doe')

  watchEffect(() => {
    text.value = `Hello, ${name.value}!`
  })
})

Editor Decoration

The useEditorDecorations composable can be used to add decorations to the editor.

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

export = defineExtension(() => {
  const editor = useActiveTextEditor()
  useEditorDecorations(
    editor,
    { backgroundColor: 'red' }, // Or created decoration type
    () => [/* Dynamic calculated ranges */] // Or Ref/Computed
  )
})

See TextEditor.setDecorations for more information. To create a decoration type, use window.createTextEditorDecorationType.

Editor Selections

The following 4 composable can be used to get and set the selections of editors.

• useTextEditorSelections - All selections in the text editor.
• useTextEditorSelection - The primary selection in the text editor.
• useNotebookEditorSelections - All selections in the notebook editor.
• useNotebookEditorSelection - The primary selection in the notebook editor.

See their docs for more information. Note that useTextEditorSelections and useTextEditorSelection also support an acceptKind option to filter the change kind which has triggered this event (See TextEditorSelectionChangeKind).

Editor Viewport

The following 3 composable can be used to get the viewport information of editors.

• useTextEditorViewColumn - The view column of the text editor.
• useTextEditorVisibleRanges - The visible ranges of the text editor.
• useNotebookEditorVisibleRanges - The visible ranges of the notebook editor.

See their docs for more information.