在 30 分钟或更短的时间内，在 VS Code 市场中推出“产品”

我的团队今天正式发布了VS Code 的扩展。哇，发布一个产品真的能让你学到很多东西。

为 VS Code 构建扩展并将其发布到市场的过程出乎意料地愉快，更重要的是，这是一次宝贵的学习经历。因此，我想分享一种方法，让任何技能水平的人都能构建和发布自己的扩展——一个可以立即供数百万 VS Code 用户使用的迷你“产品”。

如果您以前从未构建过扩展，那么设计自己的主题是熟悉构建 VS Code 扩展所需的工具和流程的好方法。

本快速教程将指导您从打开 VS Code 到在应用市场发布您的第一个主题的全过程。如果您已经熟悉某些步骤，请直接跳到下一节。

颜色主题入门

VS Code 拥有大量开箱即用的主题，您可以通过命令打开Preferences: Color Theme可用主题菜单来访问，例如 Light+、Dark+、Monokai、Red 等。如果您需要更多自定义选项，VS Code 市场中有数千个主题可供下载。

我建议尝试几个不同的主题。主题是你所有开发过程的背景——软件开发魔力的幕布。主题可以给你灵感（或者反过来让你感到沮丧或无聊）。所以，主题虽然不起眼，但真的很重要。

构建 VS Code 主题所遵循的基本工作流程可以概括为三个关键步骤：

1. 使用扩展生成器为您的扩展创建框架
2. 通过添加颜色自定义来设计您的扩展程序
3. 通过创建 Microsoft 帐户和发布者配置文件将扩展发布到市场

计时器现在开始！

设置您的环境

要为 VS Code 制作扩展，您需要安装以下工具：

• Node.js
• 约曼
• Visual Studio Code 扩展生成器

Node.js 是一个流行的开源 JavaScript 运行时，它在浏览器之外执行 JavaScript。VS Code 开箱即用地支持 JavaScript 和 TypeScript，并支持 Node.js 调试。您需要安装 Node.js 才能在 VS Code 中以调试模式运行应用程序。如果您还没有 Node，请查看不同的安装程序。在不同平台上安装 Node 的方法有很多，但最直接的方法是使用Node 网站上的官方安装程序。

你可以通过打开终端并输入 来检查 Node 是否已安装node -v。同时，请确保npm已安装 Node 包管理器（用于处理 Node 工具的包安装）npm -v。

安装 Node 后，您可以安装 Yeoman 和 Visual Studio Code 扩展生成器。这两个工具将自动使用必要的文件构建扩展的基本框架。

Yeoman被称为“Web 脚手架工具”。它可以轻松访问庞大的生成器生态系统，从而快速启动项目。Visual Studio Code 扩展生成器将指导您完成扩展文件结构的布局过程。

要同时安装 Yeoman 和 VS Code 扩展生成器，您可以使用npmNode 的包管理器。打开终端并输入：

npm install -g yo generator-code

一旦安装了扩展生成器，您就可以开始构建颜色主题扩展。

为你的扩展搭建脚手架

在终端中，导航到要创建扩展的目录。扩展生成器将在此目录中创建一个新文件夹，其中包含构建可运行扩展所需的所有文件。要运行 Yeoman 和 VS Code 扩展生成器，请输入：

yo code

扩展生成器现在会询问您创建新扩展所需的一系列问题。

生成器可以帮助创建几种类型的扩展。我们将构建一个颜色主题，因此请选择该选项。

您想创建哪种类型的扩展？新颜色主题

下一个问题是关于TextMate主题的。TextMate 规则会更改语法和颜色设置。配置 TextMate 规则是一项更高级的技能，需要了解 TextMate 的语法。在您熟悉 TextMate 之前，请先从头开始。

您要导入或转换现有的 TextMate 颜色主题吗？不，请重新开始。

现在是时候为您的扩展程序命名了。命名是吸引用户兴趣和采用的关键。我的配色主题采用了Code Time 扩展程序中的蓝色，并以我们的吉祥物Cody命名。

你的扩展程序叫什么名字？Cody Blue

您的扩展程序的标识符默认为您的扩展程序的名称，但全部小写，并将连字符替换为空格。

你的扩展程序的标识符是什么？cody-blue

接下来，您可以写一个主题的简短描述并选择一个向用户显示的名称。

你的扩展程序的描述是什么？深蓝色主题

你的主题显示给用户的名字是什么？Cody Blue

最后，选择一个基础主题。您将在基础主题的默认设置基础上构建您的主题。

选择基本主题：深色

回答完最后一个问题后，生成器将在使用扩展程序标识符命名的文件夹中创建以下文件：

├── .vscode
│   └── launch.json
├── themes
│   └── Cody Blue-color-theme.json
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── vsc-extension-quickstart.md

这些文件各自起什么作用？

该.vscode文件夹包含launch.json一个文件，用于配置如何为项目启动调试器。该.vscodeignore文件确定安装扩展程序时忽略哪些文件。我们暂时可以忽略这些文件和文件夹，因为它们的默认设置就可以了。

该文件vsc-extension-quickstart.md包含一些关于如何开始设计和构建主题扩展的说明。值得快速阅读一下。

README.md您可以在应用市场或 GitHub 代码库中添加任何您希望用户阅读的描述或文本。同样，CHANGELOG.md在更新扩展程序时，您也可以在这里手动记录功能变更。

然而，最重要的文件是package.json和color-theme.json。package.json包含您的所有扩展设置。color-theme.json包含您的所有颜色自定义，并且是您设计主题的地方。

选择主题的颜色自定义

要开始编辑您的扩展，请在 VS Code 中打开您的扩展项目。

要预览和调试您的扩展程序，请点击Function + F5“扩展程序开发主机”窗口中的“运行”按钮。“扩展程序开发主机”允许您在单独的窗口中运行扩展程序，从而轻松调试并查看扩展程序的运行情况。要退出调试模式，只需关闭新窗口即可。

尝试在扩展开发主机窗口中运行未编辑的扩展。

使用扩展生成器，我选择基本主题为“黑暗”，如下所示：

要调整颜色，请转到themes扩展程序文件夹中的主题文件。主题文件是一个 JSON 文件，其结构如下：your-extension-name-color-theme.json。

在 JSON 文件的顶部，你会看到一个名为“This colors.is where you will make most of your edits”（这是你大部分编辑操作的地方）的部分。“colors”部分提供了一些默认颜色。

现在让我们删除它们，这样您就可以使用自己的颜色。

可以进行两种类型的自定义：工作台自定义和语法自定义。工作台自定义会更改编辑器及其视图的颜色，而语法自定义会影响编辑器中源代码的外观。

现在，让我们专注于进行工作台定制，它涵盖了 VS Code 最突出的功能。

在主题文件的 部分中添加以下几行colors。这些设置会更改编辑器的主要部分，例如标题栏、菜单栏、活动栏、侧边栏和状态栏。

// title bar (macOS)
"titleBar.activeBackground": "#384357", 
"titleBar.activeForeground": "#afafaf",
"titleBar.inactiveBackground": "#29303f",
"titleBar.inactiveForeground": "#afafaf",

// menu bar (PC/Linux users)
"menu.background": "#384357", 
"menu.foreground": "#afafaf",

// activity bar
"activityBar.background": "#384357", 
"activityBar.foreground": "#00B4EE",
"activityBar.inactiveForeground": "#afafaf",

// side bar
"sideBar.background": "#384357", 
"sideBar.foreground": "#afafaf",
"sideBarTitle.foreground": "#00B4EE",
"sideBarSectionHeader.background": "#384357",
"sideBarSectionHeader.foreground": "#afafaf",

// status bar
"statusBar.background": "#384357",
"statusBar.foreground": "#afafaf",
"statusBar.noFolderBackground": "#384357",
"statusBar.noFolderForeground": "#afafaf",
"statusBar.debuggingBackground": "#384357", 
"statusBar.debuggingForeground": "#afafaf",
"statusBarItem.hoverBackground": "#29303f",

// editor 
"editor.background": "#191e27",
"editorLineNumber.foreground": "#afafaf",
"editorLineNumber.activeForeground": "#00B4EE",

// editor groups and tabs
"editorGroupHeader.tabsBackground": "#14181f"

颜色主题 JSON 文件只是一个键/值对的列表。键是您要自定义的功能，值是您要分配给该功能的十六进制颜色代码。生成的主题文件应如下所示：

您会注意到，输入颜色的十六进制代码后，如果再次将鼠标悬停在十六进制代码上，VS Code 会显示一个颜色选择器。弹出窗口还会告诉您正在更改的功能将如何影响编辑器的外观。

尝试选择您自己的值来更新您的配色方案。

要查看新颜色的实际效果，请再次点击Function + F5在扩展开发主机窗口中运行该扩展。

上述更改应如下所示：

想看看其他主题都做了哪些定制？不妨看看Shades of Purple，并浏览其GitHub 仓库，获取更多灵感。

想要更多更改？VS Code 文档列出了所有可自定义的功能。从集成终端、通知提示框到下拉菜单，您可以编辑所有内容。您可以随意添加任何其他您想要的更改。

将主题扩展发布到 VS Code 市场

对主题的自定义设置满意后，您可以将扩展发布到 VS Code 市场。市场是展示您的主题的绝佳方式，以便其他 VS Code 用户能够找到并安装您的主题。

首先，更新你的README主题，让用户了解你的主题。你的主题README将会出现在 VS Code 扩展市场中。

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

npm install -g vsce

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

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

创建帐户后，您将自动重定向到名为“管理发布商和扩展”的页面。

您可以选择上传您的扩展程序，然后该扩展程序将在 VS Code 市场中可用。只需运行vsce package并上传生成的VSIX文件即可。该VSIX文件包含安装和运行扩展程序所需的所有信息。

但是，如果您想从命令行发布（我建议这样做，因为这样更容易将更新推送到您的扩展），您将需要创建一个 Azure DevOps 组织。

为此，请点击导航栏右上角的您的姓名或电子邮件。这将带您进入创建新组织的页面。点击“创建新组织”。

下一个窗口将允许您为 Azure DevOps 组织创建一个名称。

创建组织后，点击导航栏右上角的头像。向下滚动并点击“安全”。

点击“个人访问令牌”并创建一个新令牌。选择以下设置：

现在您将看到一个访问令牌。请复制它，因为您将无法再次看到它。

现在，您可以将之前创建的发布者名称与 关联起来vsce。在终端中输入：

vsce login (publisher name) 

接下来，vsce系统会要求您提供通过 Azure DevOps 组织创建的个人访问令牌。出现提示时，请输入该令牌。

再次在终端中，导航到包含扩展文件的文件夹。要最终发布扩展，请输入：

vsce publish

您将收到一条警告，提示您没有存储库。请按照提示暂时忽略此警告。

大功告成！发布后不久，vsce您将收到一个链接，可以在扩展市场中查看您的扩展程序。

您还可以返回发布者管理器页面查看扩展程序的状态。

做一些最后的润色

为你的扩展程序添加一个图标，并创建一个 GitHub 仓库，以便其他人可以查看源代码，这是一个好习惯。你需要一个 GitHub 仓库来添加图标。

首先，从您的扩展文件夹创建一个存储库并将其推送到 GitHub（或其他存储库托管服务）。

找到您的存储库的 URL 并将以下代码片段添加到package.json：

   "repository": {
        "type": "git", 
        "url": "https://github.com/geoffstevens8/cody-blue"

要添加图标，请images在您的扩展程序文件夹中创建一个名为 的文件夹。在此文件夹中添加您想要用作图标的图片。图标应为 PNG 格式，尺寸至少为 128x128。我选择了主题中的纯色。

接下来，将以下键/值对添加到package.json：

"icon": "images/icon.png"

再次发布之前，请务必在中增加版本号package.json。完成后，只需运行即可再次发布vsce publish。

想查看我的主题吗？您可以在应用市场中查找我的主题，也可以在GitHub上查看源代码。

让世界知道

最后，如果您想让全世界知道您的第一个迷你“产品”或扩展发布，您可以通过推特或在 Product Hunt 上发布来获得帮助。

下面介绍如何创建一个简单链接，以便您的朋友和网络可以轻松共享消息。

从以下开始：https://twitter.com/intent/tweet?text=

=添加文本后，请确保将所有空格替换为%20—，如下例所示。

https://twitter.com/intent/tweet?text=Hey,%20VS%20Code%20users,%20get%20project%20and%20time%20reports%20and%20other%20metrics%20for%20free,%20right%20in%20your%20editor%20with%20the%20Code%20Time%20extension—launching%20today

现在乐趣开始了——继续检查您的扩展网页，看看您获得了多少下载量！

如果您喜欢本教程，请查看我的团队刚刚推出的扩展：Code Time。