💻 我发布了自己的 Visual Studio Code 扩展包，你也可以这样做！简介 我的扩展包 如何创建你的扩展包 向你的扩展包添加扩展 运行/测试你的扩展包 发布你的扩展 结论

2025-06-07

💻我发布了自己的 Visual Studio Code 扩展包，您也可以这样做！

介绍

我的扩展包

如何创建扩展包

向你的包中添加扩展

运行/测试你的扩展包

发布你的扩展

结论

介绍

Visual Studio Code 开箱即用，功能丰富，而且看起来已经很棒了。不过，你还是想让它感觉像家一样，像你的家一样🏡。

为此，您可以安装扩展程序、主题和图标。人们可能会忘记安装了哪些扩展程序，或者安装了太多扩展程序，然后发现卸载它们很麻烦。

也许你的整个团队都在使用 Visual Studio Code，而你想与团队分享你的扩展。它还能帮助新同事顺利入职。

您正在使用Remove Development扩展，并且想要在远程设置上安装许多扩展。

正如您所说，扩展包可以在很多方面提供帮助，让您的生活更轻松、更高效。

我的扩展包

出于以上所有原因，我发布了我的扩展包。LampeWebDev的扩展包。
如果你想拥有我经常使用的主题、图标和扩展，那就安装这个扩展包吧！只需更改颜色和图标主题，就可以了！

如何创建扩展包

要求

您需要在计算机上安装、nodejs和。这些安装高度依赖于您的操作系统。npmgitVisual Studio Code

生成扩展包模板

Visual Studio Code 团队提供了丰富的 Visual Studio Code 扩展开发工具。如果您需要开发 Visual Studio Code 扩展，不妨考虑使用这些工具。

您需要安装两个 npm 包。第一个是 yoeman（npm 包名为yo），第二个是generator-code包。Yoeman 是一个帮助您启动新项目的 npm 包。Yoeman 需要所谓的生成器。这些生成器就像 yoeman 的新启动选项，您可以随时调用它们。

  • 安装所需的软件包
npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode

根据您的设置，您可能需要使用sudo管理员权限运行此命令。

  • 不，你可以打电话告诉 yoeman 来启动 Visual Studio Code 扩展
yo code
Enter fullscreen mode Exit fullscreen mode
  • 现在您需要选择New Extension Pack。Yoeman 现在会提出问题。您可以在下面的示例中看到它们。

向你的包中添加扩展

找出唯一的扩展名

有两种方法可以做到这一点。一种是在浏览器中，另一种是在 Visual Studio Code 的扩展选项卡中。唯一的包名称由名称和包名称组成，中间用点分隔。<AuthorName>.<PackageName>

  • 当你在 Visual Studio Code 中打开扩展的页面时，你将在包名称右侧看到唯一的包名称

  • 当您转到Visual Studio Code Marktplace并搜索您正在寻找的扩展并转到扩展的详细信息页面时，您可以在地址栏中看到唯一的名称。

将扩展添加到 package.json 文件

现在您已经知道并复制了扩展程序的唯一名称，您需要package.json通过 yoeman 打开扩展包生成文件夹中的文件。在该package.json文件中，您需要搜索extensionPack密钥。此密钥必须是包含唯一扩展程序名称的字符串数组。

它看起来应该是这样的：

{
    ...
    "extensionPack": [
        "robbowen.synthwave-vscode",
        "laurenttreguier.vscode-simple-icons",
        "visualstudioexptteam.vscodeintellicode",
        ...
    ],
    ...
}
Enter fullscreen mode Exit fullscreen mode

添加您希望在扩展包中拥有的所有扩展。

运行/测试你的扩展包

我们需要检查我们的扩展程序是否真的会被安装。为此，我们需要一个已填充并保存的package.json文件。您可以点击F5，或者点击CTRL+SHIFT+P并输入Debug: start debugging。

您将看到一个新的 Visual Studio Code 窗口，当您导航到扩展选项卡时，您应该会看到您的扩展包以及包中引用的扩展。检查一切是否正常。

Remote Development在WSL 或 SSh 等会话中，此步骤对我来说不起作用。

编辑 README.md 和 CHANGELOG.md

编写 readme 文件是个好习惯。我这里喜欢创建一个列表，列出所有用到的扩展名，并添加链接。

我创建了一个小模板：

# <Name of the Extension>

## Included Extensions

### Theme and Icons

 - [Name of the Extension](LINK)
 - ...

### Generic

 - [Name of the Extension](LINK)
 - ...

### Framework Specific

 - [Name of the Extension](LINK)
 - ...
Enter fullscreen mode Exit fullscreen mode

变更日志不仅可以帮助其他人了解已发生的变化，还可以帮助您记住自己所作的更改。

这是我的模板：

# Change Log

All notable changes to the "<PACKAGE NAME>" extension pack will be documented in this file.

## [X.Y.Z]

- Changed something

## [0.0.1]

- Initial release
Enter fullscreen mode Exit fullscreen mode

不要忘记保存这两个文件。

发布你的扩展

现在我们知道您的扩展程序正在运行，我们需要发布它！

所需账户

您将需要一个。您可以在此处Microsoft account for this创建一个。

之后，您需要创建一个 Microsoft 帐户，然后导航到发布管理页面。点击此处。如果您尚未创建发布者，则需要在此处创建一个新的发布者。您可以在两个地方找到您的发布者名称。

打开package.json扩展包文件夹中的文件，并在 键下添加此发布者名称publisher。对我来说，它看起来像这样

    "publisher": "lampewebdev",
Enter fullscreen mode Exit fullscreen mode

整理你的package.json文件

1.0.0如果您愿意，请将版本更改为。

图标可以概括一切，即使你不是设计师也能创建图标。网上有很多 Logo 生成器。我喜欢用Hatchful。创建你的 Logo，并将 png 或 jpeg 文件放入你的扩展包文件夹。你也需要把这个文件添加到package.json文件中。

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

将你的软件包发布到在线仓库是一个好习惯。你可以在 Github、GitLab、BitBucket 或你的私人 git 仓库上进行此操作，只要它可以通过 git URL 访问即可。

复制你的 git URL 并打开package.json。我们需要在那里添加以下条目：

  ...
  "repository": {
        "type": "git",
        "url": "<GIT_URL>"
    },
  ...
Enter fullscreen mode Exit fullscreen mode

创建vsix文件

vsix 是文件扩展名，指定该文件是 Visual Studio 代码扩展，我们现在需要创建该扩展。

我们需要安装另一个 npm 包。它叫做vsce

npm install -g vsce
Enter fullscreen mode Exit fullscreen mode

您可能需要sudo管理员权限才能进行vsce全局安装。

现在在终端中导航到您的扩展包文件夹并运行以下命令：

vsce package
Enter fullscreen mode Exit fullscreen mode

该命令将创建一个新文件。

将您的扩展程序上传到市场

现在我们需要将文件上传到市场。点击此处。点击+ New Extension，将出现一个下拉菜单。点击 Visual Studio Code，将打开一个模态窗口，您需要将 vsix 文件拖放到该模态窗口中并上传。

现在市场会完成剩下的工作！几分钟后，您将在版本号旁边看到一个绿色的勾号。这意味着您的扩展包现已成功发布！

您可以点击扩展名称，这将带您进入扩展的公共包！

就这样！您现在已经发布了扩展包！

结论

为您的团队配备一个扩展包可能会是一件有益的事情，您应该考虑为您和您的团队创建一个。

此外，如果您经常更换工作站或在远程环境中工作，这可以让您立即启动并运行。

您可以查看我的扩展：LampeWebDev 的扩展包
您可以在这里查看代码：lampewebdevs-extension-pack

如果你能帮我做以下事情，那就太有帮助了！
去Twitch关注我！只要有几个人能这么做，这对我来说就意味着一切！❤❤❤😊

👋问好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

文章来源：https://dev.to/lampewebdev/i-released-my-own-visual-studio-code-extension-pack-and-here-is-how-you-can-too-5g87
Devto 翻译
PREV
🚄Node On Rails：查找后端服务器：探索 NestJS 第 1 部分！
NEXT
🤑🥳😎 深入 YouTube 技术大师的洞里，或者如何识别骗子