你的第一个扩展
在本主题中，我们将介绍构建扩展的基础概念。请确保您已安装 Node.js 和 Git。
首先，请使用 Yeoman 和 VS Code 扩展生成器 为 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 键，或通过命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）运行命令 Debug: Start Debugging。这将编译并在一个新的 Extension Development Host 窗口中运行您的扩展。
在新窗口的命令面板（⇧⌘P (Windows, Linux 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 视图来检查变量的值。Debug Console 允许您评估表达式。
您可以在 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 指南的好时机，以便您可以开始设计您的扩展用户界面，以遵循 VS Code 的最佳实践。