我是如何构建它的：VS Code 扩展的剖析

我为什么要建造它

我构建了一个 VS Code 扩展，可以将代码部署到 GitHub Pages。我一直想构建一个 VS Code 扩展，但一直没有找到合适的理由或时间。现在我在 GitHub 的 DevRel 工作，终于有机会实现了！微软 VS Code 团队举办了一个简历网站研讨会，参与者可以将用 HTML 和 CSS 构建的简历部署到 GitHub Pages。

我与 VS Code 团队合作创建了一个 VS Code 扩展，使您无需离开 IDE 即可将静态网页（Jekyll 或 HTML）快速部署到 GitHub Pages。

我最喜欢的两件事是产生积极的影响和尝试我从未使用过的技术！

它是如何构建的

初始设置

VS 代码生成器

为了为我的 VS Code 扩展设置模板，我使用以下命令安装了 VS Code 扩展生成器和 Yeoman：

npm install -g yo generator-code

VS Code 扩展剖析

VS Code 基本概念

• 激活事件：您的扩展程序变为活动的事件。
• 贡献点：您在package.json 扩展清单中所做的用于扩展 VS Code 的静态声明。
• VS Code API：一组您可以在扩展代码中调用的 JavaScript API。

扩展配置文件

VS Code 扩展包括以下三个配置文件：

• Tasks.json 定义了项目中的 VS Code 任务。就我的特定用例而言，我不需要修改此文件。
• tsconfig.json 是目录中的一个文件，指示项目中 TypeScript 的使用。
• launch.json 配置 VS Code 调试。虽然我没有更新此部分，但 Burke Holland 更新了此文件。他添加了这段代码，以便当人们在浏览器中使用 Visual Studio Code 作为编辑器时，此扩展可以运行。

扩展清单

扩展清单是一个 package.json 文件。它包含脚本、devDependencies、VS Code 发布器、VS Code 激活事件和 VS Code 贡献组件。在下面的屏幕截图中，我使用贡献组件定义了名为“extension.deployToGitHubPages”的命令。

扩展入口文件

我的 VS Code 扩展的入口点是 extension.js。在这个入口文件中，我导入了自己创建的两个类：credentials 和 repositories。credentials 文件负责处理身份验证，以便 GitHub API 能够访问用户的仓库。repositories 文件负责获取用户的仓库，并将所选的仓库发布到 GitHub 页面。

与 GitHub 交互

验证

我需要一个访问令牌来调用 API 来检索仓库并将代码部署到 GitHub Pages。我使用 vscode.authentication 对象为每个会话生成一个新的访问令牌。附加到该对象的 getSession 方法返回一个访问令牌。请注意，GitHub 的访问令牌具有不同级别的权限（称为范围）。我需要这个令牌才能让我的应用程序访问用户、仓库和工作流。

VS Code 快速选择

vscode.QuickPick API 使我能够轻松收集用户输入或让用户从多个选项中进行选择。

• 显示选项列表 - 扩展程序发出 GET 请求以检索最近创建的 10 个存储库的列表，并将这些选项加载到 QuickPick 对话框中。
• 响应用户的选择 - 扩展根据用户的选择发出 POST 请求，将所选存储库发布到 GitHub Pages。

部署到 GitHub Pages

为了部署到 GitHub Pages，我使用 Octokit 进行了 API 调用。如上所述，该 API 调用是一个 POST 请求，其参数包括用户的登录信息、所选的仓库和默认分支。如果成功，应用程序将返回一条消息，表明您的 GitHub Actions 正在构建和部署您的网站。

如何使用

我在这篇博文中写了有关使用 GitHub 扩展的内容。

开放贡献

说实话，我没有投入太多时间去开发这个扩展。它还有改进的空间。我欢迎大家贡献代码来帮助我改进 README 文件和工作流程，而且我使用 any 关键字的方式有点尴尬。欢迎在这个仓库中提交 issue 和 pull request：https://github.com/blackgirlbytes/vscodeextension-deploy-to-gh-pages

在下面的评论中告诉我您维护或贡献的开源项目！