Visual Studio 扩展开发 (Day 2): 将 Visual Studio 扩展部署到暂存服务器和 GIT，通过持续集成

Akhil Mittal

5.00/5 (15投票s)

2017年2月14日

CPOL

12分钟阅读

25502

485

直接将 VS 扩展提交到 Git 仓库，并通过持续集成自动部署到暂存服务器

引言

本文是 Visual Studio 扩展开发系列文章 "创建你的第一个 Visual Studio VSIX 包" 的续篇。第一部分重点介绍了如何创建一个 Visual Studio 扩展来在 Windows 资源管理器中定位文件或文件夹。本文将阐述如何使你的 Visual Studio 扩展准备好进行部署（即如何通过 GIT 将扩展部署到暂存服务器，并将扩展发布到 Visual Studio 市场，使其可供公众使用）。

在本文中，我将解释如何将 Visual Studio 扩展直接提交到 GIT 仓库，并且一旦扩展被推送到 GIT 仓库，它将通过在 AppVeyor 上配置的持续集成自动部署到暂存服务器，然后在那里编译代码，并自动将相同的扩展更新到生产环境，即我们的 Visual Studio Gallery。

路线图

我将再次回顾 Visual Studio 扩展开发系列文章的路线图。该系列文章将分为三篇文章，如下所述，我们将更侧重于实际实现和动手操作，而不是过多的理论。

先决条件

本文的先决条件是运行系列文章上一部分创建的应用程序，或者一个正在运行的 Visual Studio 扩展示例应用程序。你还需要有一个 Github 账户。所以请创建一个。

在我们实际开始之前，我需要各位读者从这里下载并安装 Mads Kristensen 编写的 Extensibility tools。

本系列文章也深受 Mads Kristensen 在 Build 2016 上的演讲及其在 Visual Studio 扩展开发方面工作的启发。

在 GIT 上发布扩展

在 Visual Studio 中打开现有的文件定位器源代码。右键单击解决方案，你会看到 Extensibility Tools 选项，在其上下文菜单中有一个 "准备 GitHub..." 选项。选择该选项，如下图所示：

这将提示确认将添加与 GIT 相关的某些文件到解决方案。点击是继续。

当你点击是时，一个 Readme 文件和一个 changelog 文件将被添加到解决方案中，如下所示，并且还会将许多其他文件添加到你的代码所在的文件夹中。

如果你查看 Readme 文件，你会发现它足够智能，可以从清单文件中提取信息，并在其中添加相同的描述 "Helps to locate files and folder in windows explorer"（帮助在 Windows 资源管理器中定位文件和文件夹）。

ChangeLog 文件也非常重要，因为它向用户提供更新信息，指示项目的路线图、上次发布的版本中的功能以及近期将推出的功能。它还跟踪版本号信息。Changelog 还有助于为你自己创建一种文档，其中包含你的项目/扩展的详细信息。

让我们更新 ChangeLog 文件，使其对于我们的扩展更具描述性。

我们称之为版本号 1.0 和发布日期。由于这是初始发布，请提供文字说明这是初始发布以及其功能（即在 Windows 资源管理器中打开文件）。在路线图上，由于我们还没有计划任何内容，所以你可以指定 "Coming Soon…"（敬请期待），如下图所示。

当我们为 Github 准备好解决方案时，项目文件夹中也添加了一个许可证，所以现在我们有了许可证，并且可以将其添加到我们的扩展中。打开 source.extension.vsixmanifest，在那里我们可以看到许可证选项。

浏览位于其他 GIT 文件添加位置的许可证文件，选择许可证文件并将其添加为链接，如下图所示：

现在在 Visual Studio 的 Resources 文件夹中右键单击已添加的许可证文件并打开其属性，将 Build Action（生成操作）更改为 Content，并将 Include in VSIX option（在 VSIX 中包含选项）设置为 true，以便我们的许可证能够与 VSIX 扩展本身一起嵌入和分发。

现在扩展用户在安装扩展时就可以看到许可证了。

我们还需要更新 Readme 文件，因为该文件将在 Visual Studio gallery 中提供，用户可以从这些文件中获取有关扩展功能和使用方法的帮助。因此，我们需要在 readme 文件中添加一些描述和清晰的屏幕截图，以帮助用户更好地理解扩展。

在 Features（功能）部分添加文本来描述扩展，例如 "Open the selected file in Windows Explorer"（在 Windows 资源管理器中打开选定的文件）。功能 1 添加 "Locate files in Windows Explorer"（在 Windows 资源管理器中定位文件），并为其添加一些描述性文本，例如 "select the file or multiple files and right click"（选择文件或多个文件并右键单击），如下图所示：

现在在功能 1 下方的位置添加一张图片。

这将打开你想保存图片的文件夹，只需在源代码所在位置创建一个名为 images 的新文件夹，并将图片放在那里，它将自动以图片链接的形式添加到 Readme.md 中，如上图的 Readme 文件所示。同样，添加第二张图片显示已打开的文件夹，并为 Readme 文件添加一些描述。

现在解决方案已准备好推送到 GIT。右键单击解决方案，在上下文菜单中，选择 "Add Solution to Source Control"（将解决方案添加到源代码管理）选项，如下图所示：

当你点击此选项时，将显示一个对话框，用于选择源代码管理选项。

选择 Git 并点击 OK。系统会要求你在提交更改之前配置你的用户名和电子邮件地址。

在此处提供你的 Git 账户凭据。

如果你没有 GitHub 扩展，请从扩展和更新中下载，如下所示：

安装它，现在解决方案已准备好提交。

给你的仓库命名并发布到 Github。你的源代码将被推送到 Github，并创建一个与你发布时指定的名称相同的仓库。

现在点击你的仓库，你可以在 Git 上看到完整的源代码，以及我们为扩展提供的 readme 信息。

通过 Appveyor 进行持续集成构建

现在我们希望的是，一旦源代码发布到 Git，它就能自动编译并发布到 Visual Studio 扩展库。为此，我们将使用 Appveyor。右键单击解决方案，在 Extensibility Tools（扩展工具）下的上下文菜单中，选择 "Prepare for Appveyor"（准备 Appveyor）选项。

此选项会要求你添加 Appveyor.yml，点击 OK，它将被添加到你的解决方案中，如下图所示。这个 yml 文件是添加到解决方案的构建脚本。

再次提交并推送更改到 Git。

打开 Appveyor 网站并登录。你可以通过 Github 在此处登录。

当你通过 Github 账户登录后，你可以在 Appveyor 中看到你所有的 Github 项目。

现在搜索你的扩展项目。

在我的例子中，它是 "LocateFileInWindowsExplorer"，然后点击 ADD。它会打开一个新页面，你可以在其中点击 "New Build"（新建构建），如下图所示：

在此处开始新的构建意味着 Appveyor 现在将与 Github 进行通信，并且每当文件或代码发生更改或新的代码被推送到 GitHub 时，它都会自动开始构建 GitHub 上的代码（在发布之后）。你将看到如下控制台输出：

并且它表明我们的构建成功了，所以是一个绿色的构建。现在转到 Settings（设置），然后点击 Badges（徽章）。Github 有这些构建徽章。

在 Badges（徽章）选项中选择 Sample markdown code（示例 markdown 代码）。

转到 Visual Studio，再到 readme 文件，并用复制的徽章替换徽章信息。

现在再次发布代码。这次代码发布时，我们不必显式地在 Appveyor 上为我们的扩展启动构建，而是会自动启动，并且还会更新版本号，如下所示：

所以，你现在可以看到版本号已增加到 1.0.1。

当你现在转到 Appveyor 并点击 Artifacts（构件）时，你会看到构建成功后创建的扩展。

然后它被推送到 VSIX gallery，如下所示：

所以这个 VSIX gallery 是我们的暂存环境，所有由 Appveyor 编译的扩展都会自动推送到这个暂存环境。你可以下载你的扩展并进行测试。如果点击它，你还可以看到 readme 也附加在这个扩展上，如下图所示，这个 readme 将实际帮助用户理解和使用你的扩展。

将扩展下载到你的文件位置。

将扩展上传到 Visual Studio Gallery 和 Marketplace

现在，我们可以将扩展上传到 Visual Studio gallery。访问链接 visualstudiogallery.msdn.microsoft.com。在主页上，你会看到一个上传扩展的选项。选择 Upload（上传）选项。

在下一页，你需要提供一些详细信息，例如扩展类型。在我们的例子中，它更像一个工具，所以选择第一个选项（即 Tool（工具）），然后点击 Next（下一步）。

在下一个屏幕中，通过 Choose file（选择文件）选项浏览你下载的扩展并上传它，然后点击 Next（下一步）。

在下一个屏幕中，为扩展提供一些基本信息，例如类别、标签和成本类别。我将此扩展设置为 Free（免费），但你可以根据自己的需求选择成本选项。提供源代码控制 URL，即 Git 仓库 URL，如下图所示。在 description（描述）文本区域，你不必写描述。只需访问你的 Github 仓库，复制 Readme 文件内容并粘贴到此描述文本区域。点击底部的协议复选框，然后按 Contribute（贡献）按钮。

你的扩展将被上传到 Visual Studio gallery，并提示它将很快在 marketplace 上可用。

现在，复制你 Git 仓库的链接地址。

在 Visual Studio 中转到清单文件，并将 Git 仓库地址粘贴到 More Info URL（更多信息 URL）中，如下所示：

复制到 Changelog（更新日志）的链接地址（在 Git 仓库的 Readme 文件中），并将其粘贴到 Visual Studio 中清单文件的 Release notes（发布说明）选项中。

现在从 VSIX gallery 复制你的扩展的链接地址，并将其粘贴到 Readme 文件中提到从何处下载扩展的位置，如下图所示：

优化项目结构

现在还有一些小地方需要优化我们的解决方案。当你运行实验实例来测试扩展并在帮助菜单中的 "About Visual Studio"（关于 Visual Studio）选项中打开时，你会看到它被写为 LocateFolderCommandExtension，并带有一些我们没有提供的随机描述。那么它是从哪里来的呢？

在解决方案资源管理器中，你可以找到 VSPackage.resx 文件，其中包含上述扩展标题、描述，图标来自 Resources 文件夹中的 LocateFolderCommandPackage.ico，但现在我们不需要这些文件了，因为我们已经在清单文件中有了扩展的图标、标题和描述，所以可以删除它们。