你的第一个扩展

在这个主题中，我们将教你构建扩展的基本概念。请确保你安装了node.js和Git，然后安装Yeoman和VS Code Extension Generator：

  1. npm install -g yo generator-code

generator可以给准备开发的TypeScript和JavaSript项目搭建脚手架。运行generator并填写一些字段用于生成TypeScript项目：

  1. yo code
  3. # ? What type of extension do you want to create? New Extension (TypeScript)
  4. # ? What's the name of your extension? HelloWorld
  5. ### Press <Enter> to choose default for all options below ###
  7. # ? What's the identifier of your extension? helloworld
  8. # ? What's the description of your extension? LEAVE BLANK
  9. # ? Initialize a git repository? Yes
  10. # ? Bundle the source code with webpack? No
  11. # ? Which package manager to use? npm
  13. # ? Do you want to open the new folder with Visual Studio Code? Open with `code`

然后，在vscode编辑器里面，按F5。这将编译你的项目并在新的扩展开发主机(Extension Development Host)窗口运行你的插件。

在新窗口使用快捷键 Ctrl+ shift + P 打开命令面板（Command Palette）并输入Hello World命令：

视频见官网：https://code.visualstudio.com/api/get-started/your-first-extension/launch.mp4

你应该看到提示 Hello World from HelloWorld! 出现。成功啦！

开发扩展（Developing the extension）

让我们更改一下刚才运行扩展输出的提示信息：

  1. 在 extension.ts 中找到字符串 “Hello World from HelloWorld!” 并改为 “ Hello VS Code ”
  2. 在新窗口中运行Developer: Reload Window重新加载窗口（这样你刚才的更改才能生效）。
  3. 再次运行命令Hello World。

你应该看到更新后的消息显示了。

视频见官网：https://code.visualstudio.com/api/get-started/your-first-extension/reload.mp4

以下是一些适合你尝试的创意：

  • 在命令面板中给Hello World命令起个新名字。
  • 贡献(Contribute)另一个命令，在信息消息中显示当前时间。贡献点(Contribution points)是你在package.json扩展表(Extension Manifest)中为扩展 vscode而做出的静态声明，例如向扩展添加命令、菜单或按键绑定。
  • 用另一个vscode API替换vscode.window.showInformationMessage以显示警告消息。

调试扩展（Debugging the extension）

vscode的内置调试功能便于调试扩展。通过单击行号左侧的位置设置断点，vscode将会在断点处停留。你可以在编辑器中的变量上悬停鼠标，或使用左侧的”运行”视图(Run view) 来检查变量的值。调试控制台允许你查看表达式的值(evaluate expressions)。

视频见官网： https://code.visualstudio.com/api/get-started/your-first-extension/debug.mp4

你可以在Node.js Debugging Topic 中学到更多的调试技巧。

后续步骤（Next steps）

在下一个主题，扩展剖析，我们将更仔细地查看Hello World扩展的源代码，并解释关键概念。

你可以在https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample找到此教程的源代码。扩展指南主题包含其他示例，每个例子都说明了不同的 vscode API 或 Contribution Point，并遵循我们的扩展指南中的建议。

使用 JavaScript（Using JavaScript）

在此指南中，我们主要描述用 TypeScript 来开发vscode扩展，因为我们相信 TypeScript 为开发vscode扩展提供了最佳体验。但是，如果你更喜欢 JavaScript，你仍然可以跟着这个例子学习 —> helloworld-miniaml-sample。

扩展指南（Extension Guidelines）

这也是研究我们的扩展指南的好时机，因此你可以以遵循 VS 代码的最佳实践的方式设计扩展。