本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

您的第一个扩展

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

首先,使用YeomanVS Code Extension Generator来生成一个准备好开发的TypeScript或JavaScript项目。

  • 如果您不想为以后安装 Yeoman,请运行以下命令:

    npx --package yo --package generator-code -- yo code
    
  • 如果你希望全局安装 Yeoman 以方便多次运行,可以运行以下命令:

    npm install --global yo generator-code
    
     代码
    

对于一个 TypeScript 项目,请填写以下字段:

# ? 您想创建什么类型的扩展? 新扩展 (TypeScript)
# ? 您的扩展名称是什么? HelloWorld
### 按 <Enter> 选择以下所有选项的默认值 ###

# ? 你的扩展的标识符是什么?helloworld
# ? 你的扩展的描述是什么?留空
# ? 初始化一个git仓库?Y
# ? 使用哪个打包器?未打包
# ? 使用哪个包管理器?npm

# ? 你想用Visual Studio Code打开新文件夹吗?用`code`打开

在编辑器中,打开src/extension.ts 并按 F5 或在命令面板中运行命令 调试:开始调试 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。这将编译并在一个新Windows中运行扩展 扩展开发主机

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

你应该看看来自HelloWorld的Hello World!通知显示。成功!

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

开发扩展

让我们更改消息:

  1. 将消息从 "Hello World from HelloWorld!" 改为 "Hello VS Code" 在扩展.ts输入:.
  2. 运行 开发者:重新加载Windows 在新Windows中。
  3. 运行命令 Hello World 再次。

你应该会看到更新后的消息显示出来。

这里有一些你可以尝试的事情的建议:

  • Hello World 命令在命令面板中取一个新名字。
  • 贡献 另一个命令,该命令在信息消息中显示当前时间。贡献点是你在package.json 扩展清单 用于扩展 VS Code,例如向扩展添加命令、菜单或键绑定。
  • 替换vscodeWindows显示信息消息 与另一个 VS Code API 调用以显示警告消息。

调试扩展

VS Code 内置的调试功能使调试扩展变得容易。点击行旁边的 gutter 设定断点,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 的最佳实践。