Skip to main content

​
Overview

The vscode.window namespace provides functions for interacting with the VS Code window, including showing messages, creating UI elements, accessing editors and terminals, and managing user input.

​
Active Editors

​
activeTextEditor

The currently active text editor or undefined. 
const activeTextEditor: TextEditor | undefined
Example: 
import * as vscode from 'vscode';

const editor = vscode.window.activeTextEditor;
if (editor) {
  const document = editor.document;
  const selection = editor.selection;
  const text = document.getText(selection);
  console.log(`Selected text: ${text}`);
}

​
visibleTextEditors

All currently visible text editors. 
const visibleTextEditors: readonly TextEditor[]

​
Showing Messages

​
showInformationMessage

Show an information message to users. 
function showInformationMessage(
  message: string,
  ...items: string[]
): Thenable<string | undefined>
Example: 
const result = await vscode.window.showInformationMessage(
  'Do you want to continue?',
  'Yes',
  'No'
);

if (result === 'Yes') {
  // User clicked Yes
}

​
showWarningMessage

Show a warning message. 
function showWarningMessage(
  message: string,
  ...items: string[]
): Thenable<string | undefined>
Example: 
vscode.window.showWarningMessage(
  'This action cannot be undone',
  'Proceed',
  'Cancel'
);

​
showErrorMessage

Show an error message. 
function showErrorMessage(
  message: string,
  ...items: string[]
): Thenable<string | undefined>
Example: 
try {
  // Some operation
} catch (error) {
  vscode.window.showErrorMessage(
    `Operation failed: ${error.message}`
  );
}

​
User Input

​
showInputBox

Show an input box to ask the user for input. 
function showInputBox(
  options?: InputBoxOptions
): Thenable<string | undefined>
Example: 
const name = await vscode.window.showInputBox({
  prompt: 'Enter your name',
  placeHolder: 'John Doe',
  validateInput: (value) => {
    return value.length === 0 ? 'Name cannot be empty' : null;
  }
});

​
showQuickPick

Show a selection list allowing the user to choose one or more items. 
function showQuickPick(
  items: string[] | Thenable<string[]>,
  options?: QuickPickOptions
): Thenable<string | undefined>
Example: 
const frameworks = ['React', 'Vue', 'Angular', 'Svelte'];
const selected = await vscode.window.showQuickPick(frameworks, {
  placeHolder: 'Select a framework',
  canPickMany: false
});

if (selected) {
  console.log(`Selected: ${selected}`);
}

​
Terminal Management

​
createTerminal

Create a new terminal instance. 
function createTerminal(
  options?: TerminalOptions
): Terminal
Example: 
const terminal = vscode.window.createTerminal({
  name: 'My Extension',
  cwd: '/path/to/directory'
});

terminal.show();
terminal.sendText('npm install');

​
activeTerminal

The currently active terminal or undefined. 
const activeTerminal: Terminal | undefined

​
terminals

All opened terminals. 
const terminals: readonly Terminal[]

​
Output Channels

​
createOutputChannel

Create a new output channel for logging. 
function createOutputChannel(
  name: string
): OutputChannel
Example: 
const outputChannel = vscode.window.createOutputChannel('My Extension');
outputChannel.appendLine('Extension activated');
outputChannel.show();

​
Progress Indication

​
withProgress

Show progress in the UI while running a task. 
function withProgress<R>(
  options: ProgressOptions,
  task: (progress: Progress<{ message?: string; increment?: number }>) => Thenable<R>
): Thenable<R>
Example: 
await vscode.window.withProgress(
  {
    location: vscode.ProgressLocation.Notification,
    title: 'Loading data',
    cancellable: true
  },
  async (progress, token) => {
    progress.report({ increment: 0 });
    
    for (let i = 0; i < 100; i++) {
      if (token.isCancellationRequested) {
        return;
      }
      await delay(50);
      progress.report({ increment: 1, message: `${i}% complete` });
    }
  }
);

​
Status Bar

​
createStatusBarItem

Create a status bar item. 
function createStatusBarItem(
  alignment?: StatusBarAlignment,
  priority?: number
): StatusBarItem
Example: 
const statusBarItem = vscode.window.createStatusBarItem(
  vscode.StatusBarAlignment.Right,
  100
);

statusBarItem.text = '$(check) Ready';
statusBarItem.tooltip = 'Extension is ready';
statusBarItem.show();

​
Events

​
onDidChangeActiveTextEditor

Fires when the active text editor changes. 
const onDidChangeActiveTextEditor: Event<TextEditor | undefined>
Example: 
vscode.window.onDidChangeActiveTextEditor(editor => {
  if (editor) {
    console.log(`Switched to: ${editor.document.fileName}`);
  }
});

​
onDidChangeTextEditorSelection

Fires when the selection in an editor changes. 
const onDidChangeTextEditorSelection: Event<TextEditorSelectionChangeEvent>

​
Best Practices

Check for Active Editor

Always verify activeTextEditor is not undefined before using it

Dispose Resources

Dispose terminals, output channels, and status bar items when no longer needed

Use Appropriate Messages

Use info, warning, or error messages based on the severity

Progress for Long Tasks

Show progress indication for operations that take more than a second

Build docs developers (and LLMs) love

Get started for freeTalk to us