@types/vscode

TypeScript definitions for Visual Studio Code

1.78.0
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 6 years ago

What is @types/vscode?

@types/vscode provides TypeScript definitions for the Visual Studio Code (VSCode) API, enabling developers to write extensions for VSCode with type safety and IntelliSense support.

What are @types/vscode's main functionalities?

Creating Commands

This feature allows you to create custom commands that can be executed from the command palette. The code sample demonstrates how to register a command that shows a 'Hello World!' message.

const vscode = require('vscode');

function activate(context) {
  let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
    vscode.window.showInformationMessage('Hello World!');
  });
  context.subscriptions.push(disposable);
}

exports.activate = activate;

Creating Status Bar Items

This feature allows you to create items in the status bar. The code sample demonstrates how to create a status bar item with custom text and an icon.

const vscode = require('vscode');

function activate(context) {
  let myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
  myStatusBarItem.text = '$(beaker) My Extension';
  myStatusBarItem.show();
  context.subscriptions.push(myStatusBarItem);
}

exports.activate = activate;

Creating Webviews

This feature allows you to create webviews, which are custom HTML/CSS/JS-based views within VSCode. The code sample demonstrates how to create a simple webview that displays 'Hello from Webview'.

const vscode = require('vscode');

function activate(context) {
  let disposable = vscode.commands.registerCommand('extension.openWebview', function () {
    const panel = vscode.window.createWebviewPanel(
      'webview',
      'My Webview',
      vscode.ViewColumn.One,
      {}
    );
    panel.webview.html = getWebviewContent();
  });
  context.subscriptions.push(disposable);
}

function getWebviewContent() {
  return `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webview</title>
  </head>
  <body>
    <h1>Hello from Webview</h1>
  </body>
  </html>`;
}

exports.activate = activate;

Other packages similar to @types/vscode

Installation

npm install --save @types/vscode

Summary

This package contains type definitions for Visual Studio Code (https://github.com/microsoft/vscode).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/vscode.

Additional Details

Last updated: Thu, 04 May 2023 00:03:01 GMT
Dependencies: none
Global values: none

Credits

These definitions were written by Visual Studio Code Team, and Microsoft.

FAQs

What is @types/vscode?

Is @types/vscode well maintained?

Package last updated on 04 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install