Common Capabilities

Common capabilities are a core feature in any plug-in. Common capabilities include but are not limited to:

  • Register commands, configuration, shortcut keys, context menu
  • Store workspace or global data
  • Display prompt information
  • withQuick PickCollecting User input
  • The local file selector is invoked so that the user selects the file
  • usingProgress APIDisplays the operation progress for a long time

The general capabilities are as follows:

  • Commands: Commands play an extremely important role in how VS Code works. You will execute the Command from the Command Palette, bind shortcut, or right-click menu, and for a plug-in, you should do the following:

    • Register and execute commands through the vscode.com MANds API
    • throughcontributes.commandsMake the Contribution Point to make the order inCommand PaletteAvailable in the

  • Configuration: A plugin for user configuration (which is common), you can through contributes. The configuration implementation plug-in configuration item statement (contributes. Defines the plug-in configuration information such as the configuration fields, as well as a default value, Users can realize the workspace configuration or global configuration, you can refer to ESLint plugin configuration), and then through the workspace. The getConfiguration interface for users to actual configuration values

  • Keybindings: a plug-in that can add custom keys, see contributes keybindings

  • Context Menu: The plugin can add custom Menu items, see contribute. Menus

  • Data Storage: There are 4 ways to store Data in the extension context.

    • ExtensionContext.workspaceState: Workspace (workspace) field, stored as key-value pairs, byVS CodeBe responsible for management. When the workspace is opened again, the stored data is restored.
    • ExtensionContext.globalState: globally, stored as key-value pairsVS CodeBe responsible for management. When either plug-in is activated, the stored data is restored. The plug-in synchronously reads key-value pair data and passessetKeysForSyncMethod to assign values asynchronously
    • ExtensionContext. StoragePath: workspace (workspace) domain, can work for a space to specify a storage paths (a local directory), when we need to provide a working space larger data storage (such as files), the function is very useful
    • ExtensionContext globalStoragePath: LAN, can specify a storage path for global space (a local directory), when we need to share large data between different plug-ins (such as files), when the function is very useful

  • Display Notifications: Notifications are used by almost all plug-ins, VS Code provides 3 apis for different levels of Notifications:

    • window.showInformationMessage
    • window.showWarningMessage
    • window.showErrorMessage

  • QuickPick: The Vscode.QuickPick API provides users with some options to choose from. Developers can easily obtain the user’s choices

  • File selection (the File Picker) : through vscode window. ShowOpenDialog interface allows the user to select local File

  • Output Channel (the Output Channel) : Output Panel (the Output Panel) is a collection of a series of OutputChannel, can through the window. The createOutputChannel implementation

  • Progress: The Progress can be shown to the user through the vscode.Progress interface, and the ProgressLocation method can be used to specify where to display the Progress

Theme (Theming)

Themes affect the look and feel of VS Code, including the color palette of VS Code and Code in the editor. We can use this feature to do the following:

  • Change the color scheme of the edit area code
  • changeVS CodeInterface color matching
  • Added custom file ICONS

In VS Code, there are three types of themes:

  • Color Theme: the Color of the UI component and the Color of the text character. See the method for creating the main Color ThemeColor Theme Guide, you can also refer to this exampleColor Theme Sample

    • colors: marks the control color of the UI component
    • tokenColors: marks the color and style of the edit areaSyntax Highlight GuideFor more information
    • semanticTokenColors: Enhanced version of edit area highlighting, see detailsSemantic Highlight Guide

  • File icon theme: The file type and name correspond to the specified icon (picture).File Icon Theme GuideAre there details on how to create a file icon theme

  • Product Icon Theme Guide describes how to create a Product Icon Theme for the UI, Side bar, Activity bar, status bar, etc

Declarative Language Features

Declarative Language Features include basic programming Language text editing capabilities, such as bracket matching, automatic indentation, and syntax highlighting. This is done declaratively, without writing any code. However, the declaration language feature does not support advanced features such as syntax hints and debug. We can use this feature to do the following:

  • Bind common JavaScript syntax snippets to a plug-in
  • informVS CodeA new programming language
  • The syntax of adding or replacing a programming language
  • throughgrammar injectionExtend existing grammars

Programmatic Language Features

Programmatic Language Features offer richer language features such as Hovers, jump to definition, error diagnosis, intellisense, and CodeLens (see article). These features can be implemented by calling the vscode.languages.* interface, but can also be implemented by writing a Language Server. We can use Programmatic Language Features to do the following:

  • Hover to demonstrate the use of an API
  • Report spelling errors in source code through error diagnostics
  • Register a new HTML-style tool
  • Provides a powerful, context-aware intelligent cue
  • Provides folding, breadcrumb functionality for a language

Workbench Extensions

Workbench Extensions can be used to extend VS Code’s Workbench, extend the right mouse button, and even create a custom Explorer through VS Code’s TreeView API (if you want a more custom user interface, Through the Webview API). We can do the following with Workbench Extensions:

  • Added a custom context menu behavior to the file browse menu
  • In the sidebar (Side Bar) added a new interactive tree view (TreeView)
  • Define a newActivity Barview
  • inStatus BarDisplay new information
  • Custom content rendering via Webview API

VS CodeProvides a series of apis to help developers inWorkbench(Title Bar,Activity Bar,Side Bar,Panel,Editor Group,Status Bar) to add your own components, for example:

  • Activity Bar:Azure App ServicePlugin added oneView Container
  • Side Bar: Added one to the built-in NPM plug-inTree View
  • Editor Group: The built-in Markdown plugin has been addedWebview
  • Status BarThe VSCodeVim plugin has been addedStatus Bar ItemYou can display the Status Bar with text or ICONS and execute commands when clicked. See an example of the Status Barstatusbar-sample)

Debugging

You can use VS Code’s Debugging functionality to write a Debugger Extension that uses VS Code’s Debugging interface to implement some kind of Debugger. We can use this feature to do the following:

  • throughDebug Adapter implementation 将VS CodeDebugger UI and a debugger link
  • Added debugging support for a language
  • Provides automatic debugging configuration information completion

On the other hand, VS Code provides a series of Debug Extension apis that can be used to automate debugging, which can be used to do the following:

  • Debug tasks are started with a dynamic debug configuration
  • Trace the life cycle of a debug task
  • Create and manage breakpoints programmatically

Extension Guidelines

To help developers write plug-ins that fit VS Code’s style, VS Code provides Extension Guidelines to help developers learn VS Code plug-in development best practices

Restrictions

Plug-ins cannot access the DOM of VS Code interface and cannot change VS Code’s interface by writing their own CSS or HTML. VS Code manages plug-ins through the Extension Host process to prevent plug-ins from tampering with the interface and possibly affecting performance and stability.

Related articles

  • VS Code Plug-in Development Tutorial (1) Overview

  • VS Code plug-in Development Tutorial (2

  • VS Code Plug-in Development Tutorial (3

  • VS Code Plug-in Development Tutorial (4

  • VS Code plug-in development tutorial (5) Using Command

  • VS Code Plugin development Tutorial (6) Color Theme overview

  • VS Code plug-in development tutorial (7) Tree View

  • VS Code Plug-in Development Tutorial (8) Webview

  • Build a Custom Editor

  • VS Code Plug-in Development Tutorial (10

  • Language Server Extension Guide Language Server Extension Guide