preface

VSCode is being opened more and more every day, sometimes not even for writing code. Because there are all kinds of plugins:

  • For example, we can “feed” the leek box plugin in VSCode
  • For example, we could hire a programmer encourager to accompany us to write code — rainbow ass wife
  • We can also play a game in VSCode to touch fish – small overlord

In fact, VSCode’s plug-in is also developed by Javascript, you front-end developers want to try to develop a plug-in?

Series of tutorials

Plan can not catch up with change, iteration at any time, welcome to leave a message

  • Create a new plugin using scaffolding ☑️
  • This section describes package.json configuration
  • TreeView
  • WebView
  • Listen for code input
  • Release the plug-in to the market

Install the official scaffolding for VSCode plug-in

npm install -g yo generator-code
Copy the code

Use scaffolding

yo code
Copy the code

After it runs, it asks us a few questions in a row

New plug-in Project

  1. What template do you want to create:

    1. TS based plug-in

    2. Js-based plug-in

    3. Color theme

    4. Language support

    5. Code snippet

      .

Just choose 1 or 2 according to your preference, we still need to answer some more questions

  1. Name of the plug-in
  2. The plugin ID will eventually be concatenated with your developer account. For example, Da Shuai’s developer account is ezshine, which will eventually be spliced intoEzshine. Plug-in id
  3. Introduction to plug-ins
  4. Whether to enable type check
  5. Initialize git repository (you don’t have to open it, you can open it manually later)
  6. Choose to use NPM or YARN to manage dependencies

After scaffolding new project is completed, we can CD to the project directory and use code. Open the directory in vscode

Run and debug the plug-in project

Now press F5 or go to Run > Start Debugging from the menu to Run and debug the plug-in.

Scaffolding’s new plug-in project registers an activation command called Hello World by default

We use CTRL (CMD) + shift + p to call out VSCode’s command panel and enter the activation command

After entering, we can see the output from the plug-in project code.

Pay attention to the big handsome doing full stack

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 865 likes
  • 🔥2020 update, Vue probe the effects of dragging cards 940 likes
  • 🔥 reveal Vue3 official teaching material animation production process, an article to teach you to do code demo GIF! 84 great
  • 🔥 Create an arcade joystick with Vue for 60 likes