您的第一个扩展程序
在本主题中，我们将教您构建扩展程序的基本概念。请确保您已安装 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 或从命令面板运行 Debug: Start Debugging 命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。这将在新的扩展程序开发主机窗口中编译并运行扩展程序。
在新窗口中从命令面板运行 Hello World 命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）
您应该会看到弹出“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 将会命中该断点。您可以将鼠标悬停在编辑器中的变量上，或使用左侧的运行和调试视图检查变量的值。调试控制台允许您评估表达式。
您可以在Node.js 调试主题中了解有关在 VS Code 中调试 Node.js 应用程序的更多信息。
后续步骤
在下一个主题扩展程序剖析中，我们将仔细研究 Hello World 示例的源代码并解释关键概念。
您可以在以下位置找到本教程的源代码：https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample。扩展程序指南主题包含其他示例，每个示例都说明了不同的 VS Code API 或贡献点，并遵循我们在用户体验指南中的建议。
使用 JavaScript
在本指南中，我们主要描述如何使用 TypeScript 开发 VS Code 扩展程序，因为我们认为 TypeScript 为开发 VS Code 扩展程序提供了最佳体验。但是，如果您更喜欢 JavaScript，仍然可以按照 helloworld-minimal-sample 进行操作。
用户体验指南
这也是回顾我们的用户体验指南的好时机，这样您就可以开始设计您的扩展程序用户界面，以遵循 VS Code 的最佳实践。