This is the 13th day of my participation in Gwen Challenge

Recently I plan to write a VSCode plug-in. By the way, I will organize and share my study notes.

Hello world!

First of all, let’s start running a Hello world.

Make sure Visual Studio Code and node.js are installed on your computer, then open a command line window and install the scaffolding provided by vscode globally:

npm install -g yo generator-code
Copy the code

Switch path to your own working directory and generate project through scaffolding:

yo code
Copy the code

Follow the wizard to select the appropriate configuration:

To run the project, open the project folder with VSCode and press F5. A host window for debugging the plug-in appears. Use the shortcut key CTRL + Shift + P to enter Hello World in the command line input box. Run and you will see Hello World from my-first-extension displayed in the bottom right corner! “.

A simple VSCode plug-in is already developed!

Project analysis

The project catalog and related introduction are as follows:

My-first-extension │.eslintrc.json │. Vscodeignore │ changelog.md │ extension.js# The main logic code of the project│ jsconfig.json │ package-lock.json │ package# Project profile│ ├─ vscode │ Extensions. json │ launch.json# for configuration debugging└ ─test│ runTest. Js └ ─ suite. The extension test. Js index. JsCopy the code

Json and extension.js are the two files we are looking at.

package.json

Json in addition to some node project-related configuration, it also adds some configuration items related to VSCode project, such as engines, activationEvents, contributes, etc.

Plug-ins are not started by default in VSCode, so you need to configure the plug-in to explicitly enable it when an event occurs. This configuration item is activationEvents in package.json.

ActivationEvents has the following configuration options:

  • onLanguage: This plug-in is activated when a file for the specified language is opened
  • onCommand: When the corresponding command is invoked, the relevant plug-in is activated
  • onDebug: The plug-in is activated when debugging is enabled, and the following two cases are more granular
    • onDebugInitialConfigurations
    • onDebugResolve
  • workspaceContains: When opening a folder, activate the plug-in if there are matching files in the folder
  • onFileSystem: This plug-in is activated when a file or folder is opened using a protocol, such as FTP or SSH
  • onView: The plug-in is activated when the view with the specified ID is expanded
  • onUri: The plug-in is activated when its system-level Uri is opened
  • onWebviewPanel: this plugin is activated when VSCode needs to restore a webview that conforms to the viewType.
  • onCustomEditor: this plug-in is activated when VSCode needs to create a custom editor that conforms to the viewType.
  • *: this plug-in is activated when VSCode starts
  • onStartupFinished: the plug-in will be activated some time after VSCode starts. This has to do with*The activation event is similar, but does not slow down VSCode startup.

ActivationEvents in the Hello World project configures onCommand, which is activated when commands are configured. For details on how to use each configuration, see Activation Events.

In consideration of editor performance and user experience, activationEvents should not be configured as *.

contributes

Json contributes contributes to the configuration of the various extension capabilities of VSCode, as shown below:

  • configuration: The content configured in configuration is exposed to the user. The user can modify the exposed options from user Settings and Workspace Settings.
  • configurationDefaults: Configures the editor’s default values for a specific language. Changing this configuration overrides the default Settings the editor already provides for the language.
  • commands: Sets the command title and the command body. The command is then displayed in the command panel.
  • menus: Sets the command’s menu item for the editor or file manager.
  • keybindings: Determines the trigger rule for user input key combination.
  • languages: configure a language, introduce a new language, or enhance VSCode’s existing language support.
  • debuggers: configures VSCode’s debugger.
  • breakpointsGeneral debugger plugins have contributed breakpoints entry, where the plugin can set which languages can set breakpoints.
  • grammars: Configures TextMate syntax for a language.
  • themes: adds a TextMate theme for VSCode.
  • iconThemes: Provides the file icon theme.
  • productIconThemes: Provides a product icon theme.
  • snippets: Adds code snippets for the language.
  • jsonValidation: Adds a validator to the JSON file.
  • views: adds a view for VSCode.
  • viewsWelcome: Configures the welcome content for the custom view.
  • viewsContainers: Configures the view container of a custom view.
  • walkthroughs: provides a sample plug-in that opens automatically when the extension is installed, providing a convenient way to introduce users to the functionality of the extension.
  • problemMatchers: Configures the mode of the problem locator.
  • problemPatterns: Configures the name of the problem pattern that can be used in the problem locator.
  • taskDefinitions: Configures and defines an object structure that defines unique configuration tasks in the system.
  • colors: Configured colors can be used in the editor decorator of the status bar.
  • typescriptServerPlugins: configures the Typescript server plug-in for VSCode’s Javascript and Typescript support.
  • resourceLabelFormatters: Provides a resource label formatter that specifies how urIs are displayed anywhere in the workbench.
  • customEditors: Provides custom editor related configurations, including file types.

Entrance to the file

The extension.js file is the entry file configured in the main field of package.json. This file exports two functions: active and deactive.

module.exports = {
    activate,
    deactivate
}
Copy the code

When the activation criteria configured with activationEvents are met, the plug-in’s Activate event is executed, and the deactivate event provides an opportunity to perform cleanup before the plug-in is closed.

// introduce the 'vscode' module to call the relevant API
const vscode = require('vscode');

function activate(context) {
    // Use console to output diagnostics (console.log) and errors (console.error)
    // The following code is executed only once when your plugin is activated
    console.log('Congratulations, your extension "my-first-extension" is now active! ');
    
    // Now that the entry command is defined in the package.json file, call the registerCommand method
    // The parameters in registerCommand must be the same as the commands in package.json
    let disposable = vscode.commands.registerCommand('my-first-extension.helloWorld'.function () {
	// Write your code here, which will be called every time the command is executed
	vscode.window.showInformationMessage('Hello World from my-first-extension! ');
    });

    context.subscriptions.push(disposable);
}
Copy the code

The relevant data

VSCode official documentation

VSCode Chinese document

VSCode plug-in development overview

The last

If the article is helpful to you, please share, pay attention, collect!!

Emmmmm, if not, just give it a thumbs up