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

Hope is a good thing, maybe the best of things. And no good thing ever dies.

preface

Visual Studio Code is a lightweight but powerful source Code editor released by Microsoft in 2015. Developed based on Electron, Visual Studio Code supports Windows, Linux and macOS operating systems. With built-in support for JavaScript, TypeScript, and Node.js and rich support for other languages and extensions, it’s super powerful. VS Code is a free, open source, modern and lightweight Code editor. It supports syntax highlighting, intelligent Code completion, custom shortcuts, brackets matching and color differentiation, Code snippets, Code comparison Diff, GIT commands, and other features in almost all major development languages. And optimized for web development and cloud application development. VS Code offers powerful extensions, updates are timely, and features are rich and powerful

Preparing the development environment

Before you start, make sure you have Node.js and Git installed

Install Yeoman and VS Code Extension Generator globally

npm install -g yo generator-code
Copy the code

start

Generate local projects using officially provided scaffolding

yo code
Copy the code

Personally, I think the process is quite clear. We just need to follow the instructions step by step, as shown below:

The main steps

The first step requires us to choose what type of plug-in to create? As shown above, we have 10 plug-in types to choose from.

For the first time, we’re going to follow the official example and we’re going to pick the first one and create a TypeScript plug-in

Enter the plug-in name as prompted: first-blood

Main steps:? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? first-blood ? What's the identifier of your extension? mamba ? What's the description of your extension? my first extension! ? Initialize a git repository? No ? Bundle the source code with webpack? Yes ? Which package manager to use? npmCopy the code

Open the project

cd mamba
code .
Copy the code

Once we open our edits, we’ll see our first plug-in development code

Here’s the point. Now run our plugin directlyAccording to the keyboardF5A developer window reopens.

Press Shift + Command + P, type the command title Hello, and click on it

Next, you will see the prompt message in the lower right corner, which means that we have succeeded 👏👏👏 🤙 port

Hello World from first-blood!Copy the code

This is our first plug-in, which is pretty simple, and then we debug and release it. I won’t expand on this, but you can go directly to the official VS Code documentation.

The attached:

  • The official documentation
  • debugging-the-extension
  • Publishing Extensions

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏

Welcome to follow my wechat public account and exchange technology and life together. Search 🔍 : “Fifty years later” on wechat.