你的第一个扩展
在本主题中，我们将教您构建扩展的基本概念。请确保您已安装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? Yes
# ? Bundle the source code with webpack? No
# ? 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))。这将在新的 Extension Development Host 窗口中编译并运行扩展。
从命令面板运行Hello World命令（⇧⌘P（Windows, Linux Ctrl+Shift+P））在新窗口中：
你应该会看到Hello World from HelloWorld!通知出现。成功！
如果您在调试窗口中看不到Hello World命令，请检查package.json文件，并确保engines.vscode版本与已安装的VS Code版本兼容。
开发扩展
让我们对消息进行更改：
- 将消息从“Hello World from HelloWorld!”更改为“Hello VS Code”在
extension.ts中。 - 在新窗口中运行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进行跟随。
用户体验指南
这也是一个很好的时机来回顾我们的UX指南，这样你就可以开始设计你的扩展用户界面，以遵循VS Code的最佳实践。