vscode插件开发中文文档教程(2)——您的第一个扩展

原文链接：Your First Extension
作者：Microsoft
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

您的第一个扩展

在本主题中，我们将教您构建扩展的基本概念。请确保您已安装 Node.js 和 Git。

首先，使用 Yeoman 和 VS Code Extension Generator 来生成一个准备开发的 TypeScript 或 JavaScript 项目。

如果您不想安装 Yeoman 以供后续使用，请运行以下命令：
```
npx --package yo --package generator-code -- yo code
```
如果您希望全局安装 Yeoman 以便轻松重复运行，请运行以下命令：
```
npm install --global yo generator-code
yo code
```

对于 TypeScript 项目，请填写以下字段：

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

在编辑器中打开 src/extension.ts 并按下 F5 或从命令面板 (Ctrl+Shift+P) 运行命令 Debug: Start Debugging。这将在新的 Extension Development Host 窗口中编译并运行扩展。

在新窗口中从命令面板 (Ctrl+Shift+P) 运行 Hello World 命令：

您应该看到 Hello World from HelloWorld! 通知弹出。成功！

如果您无法在调试窗口中看到 Hello World 命令，请检查 package.json 文件并确保 engines.vscode 版本与已安装的 VS Code 版本兼容。

开发扩展

让我们更改消息内容：

在 extension.ts 中将消息从 "Hello World from HelloWorld!" 更改为 "Hello VS Code"。
在新窗口中运行 Developer: Reload Window。
再次运行 Hello World 命令。

您应该看到更新后的消息。

这里有一些您可以尝试的想法：

在命令面板中为 Hello World 命令设置一个新名称。
贡献另一个命令，显示当前时间作为信息消息。贡献点是您在 package.json 扩展清单中进行的静态声明，用于扩展 VS Code，例如添加命令、菜单或键绑定到您的扩展。
将 vscode.window.showInformationMessage 替换为另一个 VS Code API 调用，以显示警告消息。

调试扩展

VS Code 的内置调试功能使调试扩展变得简单。通过点击某一行旁边的空白处设置断点，VS Code 将命中该断点。您可以在编辑器中悬停变量，或在左侧的 Run and Debug 视图中检查变量的值。调试控制台允许您评估表达式。

您可以在 Node.js 调试主题中了解更多关于在 VS Code 中调试 Node.js 应用程序的信息。

下一步

在下一个主题扩展剖析中，我们将更仔细地查看 Hello World 示例的源代码并解释关键概念。

您可以在以下链接找到本教程的源代码：https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample。扩展指南主题包含其他示例，每个示例都说明了不同的 VS Code API 或贡献点，并遵循我们在 UX 指南中的建议。

使用 JavaScript

在本指南中，我们主要描述如何使用 TypeScript 开发 VS Code 扩展，因为我们认为 TypeScript 为开发 VS Code 扩展提供了最佳体验。但是，如果您更喜欢 JavaScript，仍然可以使用 helloworld-minimal-sample 跟随教程。

UX 指南

现在也是回顾我们的 UX 指南的好时机，这样您可以开始设计扩展用户界面以遵循 VS Code 的最佳实践。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

vscode插件开发中文文档教程(2)——您的第一个扩展