Logo

菜单

发布于 2026-01-06 0 阅读
0

如何创建自己的 VS Code 扩展包 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

如何创建自己的 VS Code 扩展包

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我之前写过关于如何在 30 分钟或更短时间内创建自己的 VS Code 主题扩展的文章，但您是否知道构建自己的扩展包也非常简单？

扩展包是一种将通常一起安装的其他扩展程序捆绑在一起的扩展程序。例如，您无需逐个查找和安装Live Share、Live Share Audio和Team Chat ，只需下载Live Share 扩展包，即可一键安装所有这些扩展程序。如果您想要卸载该扩展包，卸载操作也会自动移除所有已安装的扩展程序。

我自己也做了一些，你可能会觉得有用：

为什么你应该创建扩展包

如果您厌倦了管理一整套 VS Code 扩展程序，那么扩展包是改善您、您的团队以及更广泛的开发社区的工作流程的绝佳方式。

轻松共享：扩展包可以轻松地与其他开发者共享，无论他们是你的团队成员还是社区成员。扩展包是回馈 VS Code 社区并帮助其他人发现新工具的简单方法。

更佳的组织方式：扩展包还可以帮助您跟踪自己的开发环境，就像一个更公开的设置同步版本，任何人都可以在任何机器上进行复制。您还可以根据需要禁用和启用扩展包来控制扩展程序。

现在让我们来尝试建造一个！

构建您的扩展包

如果您之前从未开发过扩展程序，则需要设置开发环境。您需要安装：

在不同的平台上安装 Node 的方法有很多种，但最直接的安装方法是使用Node 官网提供的官方安装程序。

要安装 Yeoman 和 Visual Studio Code 扩展生成器，请运行：

npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode

如果您想了解更多关于这些工具的信息，可以参考我之前文章中的“搭建环境”部分（见下文）。这大概需要5分钟时间。

thegeoffstevens

30 分钟或更短时间内即可在 VS Code 应用市场发布“产品”。

杰夫·史蒂文斯 ・ 2019年3月7日

#vscode #编程 #学习

安装好这三个工具后，打开终端，导航到项目目录，然后运行：

yo code
Enter fullscreen mode Exit fullscreen mode

您将看到以下问题，这些问题将有助于构建扩展包的框架。

您想创建哪种类型的扩展？新建扩展包
将当前已安装的扩展添加到扩展包？否
您的扩展名称是什么？扩展名称
您的扩展标识符是什么？扩展名称
您的扩展描述是什么？正在创建测试包！

完成上述步骤后，您的终端界面应与下图类似：

终端显示已完成的 yo 代码提示

回答完这些问题后，将创建一个具有以下文件结构的项目：

├── .vscode
│   └── launch.json
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── vsc-extension-quickstart.md
Enter fullscreen mode Exit fullscreen mode

如果您有兴趣，请继续阅读vsc-extension-quickstart.md，快速了解扩展程序是如何创建的。

要开始自定义扩展包，请导航至[此处package.json]，您将在此处添加扩展程序的唯一标识符，这些扩展程序将包含在您的扩展程序包中。您将看到一个占位符键/值对：

"extensionPack": [ 
        "publisher.extensionName"
    ]
Enter fullscreen mode Exit fullscreen mode

接下来，在 VS Code 应用商店中找到一些你认为可以组成一个扩展包的实用扩展。每个扩展都有一个唯一的标识符，格式为 `<extension_id>` publisher.extensionName，你可以在 VS Code 应用商店的扩展下载页面找到它。在页面右侧的“更多信息”部分，你会看到包含这个唯一标识符的部分。

以下是Code Time的示例，其唯一标识符为softwaredotcom.swdc-vscode。

VS Code Marketplace 上的更多信息选项卡

根据需要向extensionPack数组中添加任意数量的扩展package.json。

例如，我的效率工具包看起来是这样的：

"extensionPack": [ 
        "softwaredotcom.swdc-vscode", 
        "cosminalco.pomodoro", 
        "burkeholland.simple-timer", 
        "Gruntfuggly.todo-tree", 
        "alefragnani.Bookmarks", 
        "sleistner.vscode-fileutils", 
        "streetsidesoftware.code-spell-checker", 
        "Shan.code-settings-sync", 
        "alefragnani.project-manager"
    ]
Enter fullscreen mode Exit fullscreen mode

添加完唯一标识符后，你就快完成了！让我们做一些最后的润色，让你的扩展包更加完善，更能打动你的粉丝。

GitHub 仓库链接

我建议在你的扩展包中添加一个 GitHub 代码仓库。这样做有助于完善你的 GitHub 个人资料，并方便其他下载你扩展包的开发者轻松提交 pull request 和 bug 报告。

首先在扩展文件夹中初始化一个 Git 仓库git init，然后将项目推送到 GitHub。此外package.json：

"repository": {
        "type": "git", 
        "url": "https://github.com/username/extension-repo"
Enter fullscreen mode Exit fullscreen mode

设计一个引人注目的图标

我还建议在您的扩展程序包中添加一个图标，以便其他人能够在他们的编辑器和应用商店中识别您的扩展程序。

图标尺寸必须至少为 128x128 像素。我所有的图标都是用Figma制作的，Figma 是一款非常棒的免费设计工具。您应该将图片添加到项目文件夹中，并添加以下内容package.json：

"icon": "icon.png"
Enter fullscreen mode Exit fullscreen mode

编写一份描述性的 README 文件和变更日志。

您的 README 文件将在扩展市场中显示，因此它是描述您的扩展包解决的问题、您创建它的灵感以及所包含的扩展程序的绝佳方式。

我喜欢在每个扩展程序旁边附上其运行截图，并附上指向各个扩展程序的链接。如果您想查看示例，可以点击此处查看我的效率包的 README 文件，点击此处查看我的最佳深色主题包的README 文件。

同样，更新更新日志对您和下载您资源包的开发者都很有帮助。您可以展示当前版本新增了哪些扩展。如果您将来决定添加更多扩展并推送更新，更新日志可以帮助您跟踪资源包的变更情况。

整理你的项目

最后，我建议vsc-extension-quickstart.md在发布前删除所有无关文件！

发布您的扩展包

要发布您的扩展程序，您需要安装Visual Studio Code Extensions，这是一个用于打包、发布和管理扩展程序的命令行工具。再次打开终端并运行：

npm install -g vsce
Enter fullscreen mode Exit fullscreen mode

访问 VS Code 应用市场的最快方法是在 VS Code 应用市场的管理页面上创建Microsoft 帐户和发布者配置文件。您可以在此处创建发布者配置文件，以便将您的扩展程序添加到应用市场。

创建发布者后，请务必返回到扩展包并编辑该package.json文件，使用您新创建的发布者名称添加"publisher”: “publisher-name”新的键/值对。

"publisher”: “your-publisher-name”
Enter fullscreen mode Exit fullscreen mode

现在您可以选择上传扩展程序，上传后即可在 VS Code 应用商店中找到它。导航到包含扩展程序包的目录，然后运行命令vsce package，即可创建一个VSIX文件。该VSIX文件包含安装和运行扩展程序包所需的所有信息。将生成的VSIX文件上传到您之前创建的发布者管理页面。

你完成了！

如果您想使用更高级的工作流程进行发布，可以直接从命令行发布，但您需要创建一个 Azure DevOps 组织。您可以在我之前提到的文章中了解更多相关信息（大约在“将主题扩展发布到 VS Code 应用市场”部分的中间部分）。

一旦您的延期申请获得批准（这个过程应该只需要几分钟），请务必与您的朋友分享这个消息！

欢迎关注SRC——一份专为开发者打造的新闻简报。

文章来源：https://dev.to/thegeoffstevens/how-to-create-your-own-vs-code-extension-pack-nab
如何撰写一份出色的 README ...
Express 中的错误处理