如

如何构建和发布你自己的扩展到 VS Code Marketplace

2025-06-11

如何构建和发布你自己的扩展到 VS Code Marketplace

在Twitter上关注我，很高兴接受您对主题或改进的建议/Chris

本文是系列文章的一部分，这是第一部分。

在 VS Code 中创建代码片段或颜色主题固然很好，但如果您创建了一些非常棒的代码，想要展示给朋友，或者更好的是，分享给社区，那该怎么办呢？为此，我们有 Visual Studio Marketplace。在本文中，我们将构建一个扩展，并将其直接引入 Marketplace，供人们在 VS Code 中下载——您很快就可以成为一名扩展创建者了。

本文将涵盖以下内容：

  • 搭建扩展项目脚手架
  • 编写扩展，在这种情况下，它是关于编写代码片段
  • 将扩展发布到 Visual Studio Marketplace

好的，我们在系列文章“代码片段创建”的第一篇文章中创建了一个代码片段。

是时候迈出下一步了，让我们与世界分享我们的创作。那么，我们该怎么做呢？其实主要分为三个步骤：

当然，每个步骤都包含许多子步骤，但别担心，我会详细解释它们，以便您在阅读完本文后可以站起来像这样庆祝：

资源

我们将要展示的是如何根据 Snippets 模板创建扩展，但您可以创建更多的扩展，因此，阅读完本文后，您可以通过以下链接了解更多信息：

搭建扩展项目脚手架

有一个脚手架工具，可以让你一秒钟就创建一个项目。安装脚手架工具只需输入：

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

要搭建一个扩展项目，我们只需要输入：

yo code
Enter fullscreen mode Exit fullscreen mode

上述操作会触发一个对话框，你需要做出一些选择。让我们展示每个屏幕，看看我们需要选择什么：

我们上面有很多选择，但让我们选择New Code Snippets

接下来，我们会出现一个对话框，要求我们选择从文件夹导入现有代码片段还是创建新代码片段：

我们选择新建，然后按下return键即可。接下来的步骤是为我们的扩展命名。它会在 Visual Studio 市场中显示，所以我们给它起个好听的名字，例如：

接下来的问题是identifier。我们只需按下return键。这意味着name和identifier将是同样的事情：

还有其他问题，你以为已经完成了吗？下一个问题是询问你description扩展程序的版本。这会显示给用户，所以请确保它引人注目，让他们想要安装它。不过，你可以在之后更改它：

下一步是输入publisher。现在你可能在想：我对发布者一无所知，它想从我这里得到什么？好吧，现在先给发布者想个好听的名字，我们稍后会创建一个发布者，并在 Visual Studio 市场注册，一切等着瞧吧 :)

上面您可以看到它已经输入了chris noring发布者的值，这是因为我之前已经创建了一个发布者，而您还没有，所以现在只需在这里输入一些内容。

对话流程的下一步是输入语言 ID，这表示此代码片段适用于哪种语言。我们输入javascript或typescript，记住要像说明中说的那样用小写字母输入：

完成此操作后，您实际上就完成了。它应该列出构建扩展所需的所有文件，如下所示：

扩展项目剖析

好的，现在我们有了项目，让我们看看我们实际得到了什么：

我们的项目由以下部分组成（从顶部开始）：

  • /snippets/snippets.json，这是我们创建代码片段的地方，也是我们大部分时间花费的地方
  • README.md，其中包含有关您项目的信息。您需要更改此处的信息才能将扩展发布到 Visual Studio 市场。那么我应该在这里输入什么信息呢？您应该告诉用户安装此扩展后，他们可以使用哪些命令。如果您能向用户提供所有不同版本的历史记录及其包含的内容，那就更好了。这将向用户表明您致力于不断改进扩展。
  • ../.yo-rc.json，现在这个文件在项目之外，它几乎包含发布者名称，不需要更改它
  • package.json，包含一些关于项目的元信息。这里重要的是，version随着项目的不断改进，在更新和重新发布项目时，更改属性并增加其值。

好的，现在我们对哪些文件是重要的以及如果需要我们应该去哪里进行更改有了更多的了解。

创建我们的代码片段

信不信由你，但这其实很简单。我们已经在本系列的第一篇文章中解释了如何创建代码片段，这里再次提供链接作为 TODO 链接提醒。我们只展示一些代码片段的屏幕截图，如下所示：

好的，现在我们有了一个代码片段。接下来我们来尝试一下。

测试我们的代码片段

要试用代码片段，我们需要安装它。安装步骤如下：

  • 运行 package命令
  • 从命令窗口安装它
  • 在合适的文件中尝试一下

好的，让我们首先package在终端中运行该命令。等一下，我们需要一个依赖项才能执行此操作：

npm install -g vsce
Enter fullscreen mode Exit fullscreen mode

通过运行上述命令，我们安装了vsce所需的可执行文件。我们需要该可执行文件来运行诸如package和 之类的命令publish。

打包并安装

好的，我们已经运行了上述命令，并且我们准备好package创建一个安装文件：

啊，直接报错，是不是启动不正常？其实，这挺有用的，它告诉我们，这个扩展的用户值得拥有更好的体验，他们值得拥有一个精心设计、经过深思熟虑的 README 文件，里面会详细介绍这个扩展。所以，让我们去看看 README.md 文件，给它点赞吧。

这里写了很多内容，但实际上需要修改的是This is the README顶部类似 的文本。修改后，我们可以尝试package重新运行命令。编辑 README 文件时，我只想简单说一下。我的看法是，最好给它一个初始描述，并保留像Features和 这样的标题Release Notes。Features在我看来，应该描述所有可用的命令及其功能。Release Notes应该包含每个版本发布的历史记录及其影响，例如更正错误或添加代码片段。

一旦我们对 README 感到满意，我们就可以尝试package再次运行该命令：

vsce package
Enter fullscreen mode Exit fullscreen mode

它会抱怨我们缺少repository中的属性package.json。实际上，我们不需要存储库来实现这一点，不过有存储库总是好的。我们可以继续点击y。现在它应该会显示已创建安装文件，如下所示：

有了这样的文件后，我们就可以本地安装扩展了。这样我们就可以试用一下扩展，确保一切正常。要安装它，我们需要打开一个命令窗口。前往“视图”=>“命令面板”。然后输入“VSIX”。它会显示以下内容：

让我们选择该命令。系统会弹出一个文件选择对话框，要求你选择最近创建的vsix文件。之后，VS Code 会在窗口底部显示一条信息，询问你是否要重新加载 VS Code。点击后，yes你的 IDE 就可以进行测试了。

尝试一下

我们刚刚将代码片段安装到 VS Code 中。由于此代码片段适用于 TypeScript，因此我们需要创建一个.ts文件来查看它。例如，我们创建一个文件app.ts，其结果如下：

如果你看到了上面的内容，那就说明你的代码片段已经按预期运行了，是时候给自己一个赞了。我们离 Visual Studio Marketplace 和开发者名声又近了一步 ;)

发布我们的片段

好的，我们现在终于迎来了期盼已久的时刻。是时候发布这个扩展了，开始在 Visual Studio 市场里看到你的名字了:)

注册发布者

还记得我们在搭建扩展项目时，系统提示我们输入发布者名称吗？现在是时候实际创建发布者了。那么该怎么做呢？

我们需要创建一个带有 Visual Studio Team Service链接的帐户，并将其链接到 VSTS。创建帐户后，我们需要获取访问令牌

访问令牌创建

在终端中发布扩展程序时，需要访问令牌vsce。我们可以前往 VSTS 页面，点击右上角的配置文件，然后选择菜单选项“安全”，来创建访问令牌。到达那里后，我们需要执行以下操作：

  • 选择“个人访问令牌”。

  • 下一步是选择创建一个新的这样的令牌。

  • 为其指定一个合适的name和expiration date，这一点很重要，organization您需要在下拉菜单中选择All accessible organizations，否则它将无法正常工作。下一个重要字段是Scopes。在这里，您可以选择custom defined或full access。如果您只是尝试一下，请先尝试 ，full access但请确保稍后撤销该令牌，并选择custom defined并将其设置为您可以获得的最低权限。通常，您只希望它能够拥有Extensions和Marketplace访问权限。

因此，完成整个访问令牌创建过程后，我们应该有一个可以复制到剪贴板的访问令牌。

确保将其复制到合适的位置以供以后检索，关闭对话框后它将不会再次显示。

更新令牌

你的令牌迟早会失效。发生这种情况时，请重新生成令牌并在终端中运行以下命令：

vsce publish -p <token>
Enter fullscreen mode Exit fullscreen mode

这将使用您的新令牌，以便您下次发布时只需输入：

vsce publish
Enter fullscreen mode Exit fullscreen mode

发布

好了，终于可以运行发布命令了。现在运行：

vsce publish
Enter fullscreen mode Exit fullscreen mode

这应该会将我们的扩展发送到 Visual Studio Marketplace。在终端中运行该命令，应该会显示如下内容：

享受劳动成果

Visual Studio Marketplace 更新需要几分钟时间。假设几分钟过去了，我们访问 Visual Studio Marketplace 的 URL。如果您等不及，可以访问https://marketplace.visualstudio.com/manage/publishers/<publisher name>它，它应该会显示一个包含您的扩展名的条目，并显示“正在验证您的扩展”。好了，让我们看看我们的创建：

您现在应该感到非常自豪。您的扩展程序已经完美呈现，可供全世界使用。让我们通过在 Visual Studio Code 的“扩展”选项卡下搜索它来验证这一点：

就是这样，你输入了扩展名，Visual Studio Code 就显示出来。你为自己的扩展感到自豪。我们再来看看详情页，也就是我们在 README 中写的内容：

就是这样。这只是开始。现在出发，创建扩展吧，我知道你能行！

改进扩展

为了改善人们对您的扩展程序的看法，您需要做两件主要的事情，它们是：

  • 添加存储库
  • 添加预览 gif

添加存储库

要添加仓库，请在 GitHub 上创建一个。完成后，我们将package.json以下内容添加到文件中：

"repository": {
"type": "git",
"url": "https://github.com/softchris/node-snippets.git"
}
Enter fullscreen mode Exit fullscreen mode

就是这样，它现在会显示在扩展页面上，人们将能够点击进入你的仓库，查看你是如何构建的，以及你是否希望通过提交 PR 来获得帮助

添加预览 GIF

如果你之前下载过扩展程序，你可能会注意到，有些扩展程序非常专业，还附带了一段介绍代码片段的视频。这段视频其实是 GIF 动图，在 Markdown 中添加 GIF 动图其实很简单：

![alt text](images/node-snippets.gif "Using the snippet")
Enter fullscreen mode Exit fullscreen mode

注意上面我们是如何引用目录的image。它会通过查看你的仓库并期望找到该image目录来解决这个问题。这就是为什么你需要设置仓库才能使其正常工作。没有仓库，就没有预览图像。

您的市场现在看起来应该是这样的：

以上是still image因此它不会在此博客文章中以动画形式展示它，但它会真正起作用。

我建议使用 Camtasia 或一些免费选项制作所需的视频，然后在录制完成后将其转换为 gif。

概括

综上所述，我们了解到以下内容：

  • 使用脚手架创建扩展项目
  • 向我们的项目添加一些代码片段
  • 在本地测试我们的代码片段，以确保在发布之前能够正常工作
  • 通过安装vsce和生成access token
  • 在 Visual Studio Marketplace 中欣赏我们美丽的创作
  • 通过 VS Code 搜索并找到我们的扩展程序

走出去，向社区展示你的实力。想告诉我吗？发推文给 @chris_noring 就行。

我的片段

我目前正在维护一些代码片段扩展程序。欢迎大家提供反馈：
我的扩展程序

链接链接：https://dev.to/itnext/how-you-can-build-and-publish-your-own-extension-to-vs-code-marketplace-2pjl
Devto 翻译
PREV
将你的 React 应用组织成模块
NEXT
使用 Docker 设置 Node 的分步指南 了解如何在 Docker 容器内设置 Node JS