如何为Visual Studio Code创建扩展包

介绍 (Introduction)

Extension Packs in Visual Studio Code are useful when you want to install a collection of related extensions. In this article, you’ll create an Extension Pack so you can share your collection of extensions with other developers.

当您要安装相关扩展的集合时，Visual Studio Code中的扩展包非常有用。在本文中，您将创建一个扩展包，以便可以与其他开发人员共享扩展集。

安装工具 (Installing the Tools)

To get started creating an Extension Pack, you will need to install the Yeoman scaffolding CLI tools as well as the code generator for VS Code. You can install Yeoman with the following command.

要开始创建扩展包，您将需要安装Yeoman脚手架CLI工具以及VS Code的代码生成器。您可以使用以下命令安装Yeoman。

npm install -g yo
npm install -g yo

Then, you can install the code generator tools for VS Code extensions like so.

然后，您可以像这样为VS Code扩展安装代码生成器工具。

npm install -g generator-code
npm install -g生成器代码

生成新的扩展项目 (Generating a New Extension Project)

With the correct tools installed, you are now ready to generate a new Extension Pack project. You can start this process by running the following command.

安装了正确的工具后，您现在即可生成新的扩展包项目。您可以通过运行以下命令来启动此过程。

yo code
哟代码

You will quickly be prompted to choose what type of extension you are creating. In this case, choose New Extension Pack.

很快将提示您选择要创建的扩展类型。在这种情况下，选择New Extension Pack 。

After that, you will be asked several different questions about your extension such as the name, identifier, and description. After answering all of the questions, you will receive confirmation that your project has been generated.

之后，系统将询问您有关扩展名的几个不同问题，例如名称，标识符和描述。回答所有问题后，您将收到确认已生成项目的确认。

After opening the new project in VS Code, you’ll want to take a look at the package.json file. Pay specific attention to the extensionPack property.

在VS Code中打开新项目后，您将需要查看package.json文件。请特别注意extensionPack属性。

Inside of this property is where you will list each of the extensions that should be included in your Extension Pack. For each extension, you’ll need to include the publisher and the name of the extension in the following format.

在此属性的内部，您将列出扩展包中应包括的每个扩展。对于每个扩展，您需要以以下格式包括发布者和扩展名称。

<author>.<extension-name>

将扩展添加到扩展包 (Adding Extensions to Your Extension Pack)

For demo purposes, we’ll open up the Debugger for Chrome extension in the marketplace.

出于演示目的，我们将在市场上打开Debugger for Chrome扩展程序。

You can search on that page to find the information you need, but there is an even easier way. If you look at the url for the extension, the last bit of text after “itemName=” is exactly what you need: msjsdiag.debugger-for-chrome.

您可以在该页面上搜索以找到所需的信息，但是还有一种更简单的方法。如果查看扩展名的URL，则“ itemName =”之后的最后msjsdiag.debugger-for-chrome文本正是您所需要的： msjsdiag.debugger-for-chrome 。

From there, you can copy that text and add it directly into your package.json file.

从那里，您可以复制该文本并将其直接添加到package.json文件中。

You can follow that same process to include as many extensions as you want.

您可以按照相同的过程添加所需的扩展名。

有用的扩展包 (Helpful Extension Packs)

It might be worth doing a bit of research to see what extension packs already exist before creating your own. You can start by opening up the Code Marketplace. If you scroll down to the bottom you’ll see a button to filter by Extension Packs.

在创建自己的扩展包之前，可能需要进行一些研究以查看哪些扩展包已经存在。您可以从打开代码市场开始。如果向下滚动到底部，您将看到一个按扩展包过滤的按钮。

After clicking on that link, you’ll immediately be taken to a list of the most popular extension packs for VS Code.

单击该链接后，您将立即进入VS Code最受欢迎的扩展包列表。

For example:

例如：

Node.js Extension Pack
Node.js扩展包

Angular Essentials extension pack.
Angular Essentials扩展包。

结论 (Conclusion)

Creating an extension pack for Visual Studio Code is pretty easy. They provide all of the scaffolding, so all you have to do is add the list of extensions to be included.

为Visual Studio Code创建扩展包非常容易。它们提供了所有脚手架，因此您要做的就是添加要包括的扩展列表。