你的第一个扩展
在本主题中,我们将教你构建扩展的基础概念。请确保你已安装 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 将命中该断点。你可以将鼠标悬停在编辑器中的变量上,或使用左侧的运行和调试视图检查变量的值。调试控制台允许你评估表达式。
你可以在 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 的最佳实践。