您的第一个扩展

在本主题中，我们将教您构建扩展的基本概念。确保安装了Node.js和Git，然后使用以下命令安装Yeoman和VS Code Extension Generator：

npm install -g yo generator-code

生成器构建了一个可供开发的 TypeScript 或 JavaScript 项目。运行生成器并填写 TypeScript 项目的一些字段：

yo code

# ? 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。这将在新的扩展开发主机窗口中编译并运行扩展。

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

您应该会看到Hello World from HelloWorld!显示的通知。成功！

开发扩展

让我们对消息进行更改：

  1. 将消息从“Hello World from HelloWorld!”更改为“Hello World” 到 中的“Hello VS Code extension.ts”
  2. 在新窗口中运行Developer: Reload Window 。
  3. 再次运行命令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 或贡献点，并遵循我们的UX 指南中的建议。

使用 JavaScript

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

用户体验指南

这也是查看我们的用户体验指南的好时机，以便您可以开始设计扩展用户界面以遵循 VS Code 最佳实践。

11/1/2023