VS Code 插件开发文档

Appearance

查看英文原始文档

你的第一个插件 ​

在本小节中，我们会教你一些基础概念，请先安装好Node.js和Git

然后安装Yeoman和VS Code Extension Generator来创建一个可用于开发的 JS 或者 TS 项目：

  • 如果你只是想临时用一下 Yeoman，请使用下列命令
bash
npx --package yo --package generator-code -- yo code
  • 如果你希望在全局重复使用 Yeoman，请使用下列命令
bash
npm install --global yo generator-code

yo code

对于 Typescript 项目，请填写以下表单：

bash
# ? 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`

完成后进入 VS Code，按下F5，你会立即看到一个扩展开发宿主窗口，其中就运行着插件。

在命令面板(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的一部分，用于配置插件启动命令、用户可更改的插件配置，可以理解为插件的主要配置文件。是插件清单package.json中用于拓展 VS Code 的静态声明。
  • 用显示警告信息的VS Code APIvscode.window.showInformationMessage替换原本的文本

调试插件 ​

VS Code 内置的调试功能已经非常方便了，在代码序号的左侧空白处点击一下，VS Code 就会设下断点，进入调试模式后将鼠标悬停于变量上显示变量值，或是在调试侧边栏中检查变量值，此时，你还可以用调试控制台直接对表达式求值。

有关 Node.js 调试的部分，请参考Node.js 调试部分。

下一步 ​

在下个主题解析插件结构中，我们会大致看一下Hello World示例的源码，然后解释一些关键的概念。

本节教程的源码可参考https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample。 此外，插件指引章节还包含其他示例代码，每个例子都对应着不同的 VS Code Api 和发布内容配置。

使用 Javascript ​

在本指南中，我们主要使用 TypeScript 开发 VS Code 插件，因为我们认为 TS 是开发插件的最佳实践。如果你想使用 JS，我们也同样提供了源码helloworld-minimal-sample

交互指南 ​

你也可以适时使用我们的交互指南，使用VS Code中的最佳实践来设计插件的交互界面