I am participating in the 2022 Spring Recruitment series of activities – project experience review, click to view the details of the activity

Create a file template by hand with a vscode plugin from 0

Need to think

  • Why develop such a Vscode plug-in?

  • The purpose of the plug-in?

  • The final result of the plug-in presentation?

The introduction

Here is the final result of the plug-in: right-click the folder through the right mouse button, in the directory, to produce a template file!

The remaining two questions will come later.

Below begin our road to enter a pass!

The installation

To start the installation, type in the command, select JavaScript instead of TypeScript

npm install -g yo generator-code
yo code
Copy the code

Start debugging

1. Start the debugging console

Press F5 to generate a vscode debug console for a new extension development host

2. Perform debugging

In the new vscode debug console, open the command panel

  • Win:ctrl + shift + p
  • MAC:command + shift + p

Enter the Hello World

Embarrassed to find that our version of vscode is too low…

If not, skip this step at 👇👇👇 below!

3. Handle vscode version issues (episode)

If your vscode does not have this prompt, skip this step!

Let’s upgrade

Failed to upgrade

Run the following two commands to exit and restart vscode

Note that the second command ends with its own vscode location

sudo chown -R $USER ~/Library/Caches/com.microsoft.VSCode.ShipIt

xattr -dr com.apple.quarantine /Users/xxx/Visual\ Studio\ Code.app
Copy the code

Click Check for Updates again and you can see that the update is being downloaded

It also shows that updates are being downloaded

After a while, here, it shouldn’t take more than 20 minutes to update.

When clicked, vscode automatically restarts, exits, and starts again.

You can see that vscode has been updated.

After this small episode, continue our vscode plug-in development.

4. Continue debugging

Starting at F5, you can see hello world, and it says Hello world, click on it.

  • Why is there a Hello World? Can you change it?

    This is ok and is defined in the package.json file in the folder

    Then we can change the title name, like myVscode

    You can see that Hello World is no longer there, it’s now myVscode

  • Continue to click after action

    You can see that on the extension development host you get the result Hello World from Hello World!

    • Why is this result obtained? Can you modify it?

    • Yes, it does, because it was prompted by the extension.js file in our folder.

    • Try to modify

      We can try to modify the content and get a new prompt.

      Note: all debugging now starts from F5, open the extension development host’s vscode, then open the command line window, type and execute myVscode

      You can see the new hints that we’ve changed.

      You can also change the prompt, which is now info, or you can change it to error

Extended dissection

1. Three key points

  • Activate the event

  • Contribution to the point

  • VS Code API

Json and extension.js files

2.package.jsonSome fields in the

  • Name: indicates the name of the extension

  • Publisher: Extends the publisher name

    .

    is your unique ID for this extension.

    Currently, there is no such field in our package.json, so we can add this field by ourselves first, which will be required for later release

    "Publisher ":" XXX ", // my own idCopy the code

  • ActivationEvents Activates events

  • Contributes contribution points

  • Engines. Vscode specifies the lowest version of the VS Code API that the extension depends on

3. Extended call process:

By calling the activation event activationEvents, enter the entry file corresponding to Mian, find the Activate function, and then call vscode’s registerCommand to call the internal method of the function.

Note that require(‘vscode’) introduces the package “@types/vscode”.

Make the plugin

1. Add the configuration

Modify contribution points in package.json

  "contributes": {
    "commands": [
      {
        "command": "hello-world.helloWorld",
        "title": "myVscode"
      }
    ],
    "menus": {
      "explorer/context": [
        {
          "command": "hello-world.helloWorld",
          "group": "navigation",
          "when": "explorerResourceIsFolder"
        }
      ]
    }
  },
Copy the code

So that our myVscode only exists in the folder’s right-click menu and is displayed at the top.

  • Continue debugging, then open any folder on the extension development host’s vscode, right-click to see myVscode and execute.

2. Create a template

  • Create a SRC directory as shown in the following figure

  • Write file code

    Since no plug-ins are installed, Commonjs is used directly

    • src/template/index.js

      const myTemplate = ` 
             `

    module.exports = myTemplate
Copy the code

    • src/index.js

      const myTemplate = require('./template/index')

const config = {
  myTemplate: myTemplate
}

module.exports = config
Copy the code

    Template words, we can customize here personalized own template

3. Write plug-in code

Here we return to the extension.js file again

  • The introduction of the module

    To introduce the FS module of Node, and we wrote our own config file

    const fs = require('fs')
const config = require('./src/index')
Copy the code

  • Write plug-in code

    Here the code shows, I put the picture, I write the code is not very good, you can use their own way to write look, and write their own more helpful to understand 🎊

    Note: we return a value when we execute the command. In this case, I use args. It would be nice to have a console like Chrome for how to view the contents of args.

    It happens to be in vscode! Here we open up the vscode debug console

    After executing our command on vscode of the extension development host, we can see what arg arguments we printed!

    And our file has been created!

At this point our plug-in development is complete! 🚀 🚀 🚀

Next, pack and send!

release

packaging

  • The installation

    NPM install -g vsCE

    Execute the vsce package command to get a vsix-ended file

release

The process of issuing version is more troublesome, but also please practice together.

  • Gets a personal access token

    You can create an organization on Azure DevOps by logging into your account on this website.

    Note: The organization name does not have to be the same as the publisher name

    After selecting the personal access Token, click On New Token and fill in the relevant information, you will get the Token

    Note: remember to copy tokens!!

  • Creating a publisher

    We need to create a publisher, just fill in your Name

    Note: We need to add the Publisher field to our package.json

    Vsce login < Publisher name> will let you enter the Token information you just copied

  • An expansion

    Finally, we publish the extension, so vsce publish!

    Embarrassed to find that our Hello-world has been occupied 😭

    The name field in package.json can only be changed to hello-world2.

  • Viewing publication Results

    At this point we already have a published project on our release page! And we have our hello-world2 in the vscode library

  • use

    I can’t wait to install my own plugin and use it.

    For the files in your project, right click to execute myVscode and the file we created appears successfully!

End scatter flowers 🎉 🎉 🎉

conclusion

This project is about manually developing a version of our own Vscode plug-in.

  • Why develop such a Vscode plug-in?

    First, try: for me, it is a relatively new thing, I am curious about this field, dare to try!

    Second, it is tedious: every time in the project, we have to create a new document and make a new one exactly the same. Automation to improve work efficiency!

  • The purpose of the plug-in?

    To improve their own some extra experience, to overcome a lot of seemingly difficult things, in fact, only with the heart to study, can be solved!