尝试以扩展 VS Code 中的代理模式!

你的第一个扩展

在本主题中,我们将教授你构建扩展的基本概念。请确保你已安装 Node.jsGit

首先,使用 YeomanVS 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))。这将编译并运行扩展,并在新的 Extension Development Host 窗口中。

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

你应该看到显示“Hello World from HelloWorld!”的通知。成功!

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

开发扩展

让我们更改消息

  1. extension.ts 中将消息从“Hello World from HelloWorld!”更改为“Hello VS Code”。
  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 或贡献点,并遵循我们 用户体验指南中的建议。

使用 JavaScript

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

用户体验指南

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