“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

background

Recently, I have been studying the application scenarios of vscode plug-ins in performance improvement. In addition, I output some positive practical application-oriented small products in the team (40+ front end team), helping team members reduce repetitive work and focus more on code quality and business, which has been recognized by the majority of team members. Taking advantage of the recent popularity, output some articles to record, the general chapter is as follows (will be added later) :

  1. Create a Hello World application
  2. How is the plug-in template code generated?
  3. Plug-in mechanism and vscode plug-in capabilities boundaries
  4. Vscode tree structure details
  5. Vscode virtual documentation in detail
  6. Vscode configuring listening and how to implement custom listening?
  7. Actual combat: vscode plug-in enhancement: code snippet generator
  8. Use vsCode to generate typescript declarations for the swagger API
  9. Vscode: Generate interface request template Service according to Swagger API
  10. Vscode builds and distributes

PS: Interested in efficiency improvement, welcome to exchange.

The body of the

Create the Hello World application

In Vs Code plug-in development, it’s common to start with a Hello World. Let’s build a Hello World application from zero and see what it does when it initializes the project. Before you start, make sure you have Node.js and Git installed.

1. Install the CLI tool

npm install -g yo generator-code
Copy the code

The next article will explain what yo and generator-code are.

2. Initialize the project

Execute the following naming, for the project template selection, support JS/TS language, whether to initialize Git, whether to use webpack and other ability initialization.

yo code
Copy the code

3. Open the extended host window

Open the project in the editor and execute F5. An extender host window opens for compiling and running the extender.

The important thing to note here is that you need to look at the package.json configuration file and look at the property “main”: “./out/extension.js”, whether the corresponding target file exists, if not, run NPM compile to compile the file, otherwise the extension execution will not find the entry file.

4. Run the cli

After initializing the project, we can see in the package.json configuration file that the name has been registered as follows:

The file describes: registered aHello WorldWhen the plugin is activated, the command is executed:Hello WorldCommand. How does that work?

Registering the Hello World command to the command palette (⇧⌘P) will see the corresponding interaction in the extension host window.

Second, application life cycle

I started the Hello World app, so how does it work? The entry executable for the project is the SRC /extension.ts file, so let’s see what’s done here.

Import * as vscode from 'vscode'; import * as vscode from 'vscode'; Export function activate(context: Vscode.extensioncontext) {// Register command: Hello - world. The helloWorld, This command must first in the package. The json to define the let the disposable = vscode.com mands. RegisterCommand (' hello - world. The helloWorld, () = > {/ / callback function after the rename vscode. Window. ShowInformationMessage (' Hello World from Hello World! '); }); / / the context subscription naming context. Subscriptions. Push (the disposable); } export function deactivate() {}Copy the code

conclusion

By creating a Hello World application, you can see that the process is as follows:

  1. Install the named line utility yo and generator-code

  2. Project creation via Yo Code

  3. Project execution creates a new extension host window

  4. There are activate and deactivate lifecycle functions for application startup

  5. Named line registration requires configuration of file life in package.json, and registration and subscription in context

    Next: we will explain in detail what NPM install -g yo generator-code does when the project is initialized.