VS Code 插件开发中文文档

# 你的第一个插件

在本小节中，我们会教你一些基础概念，请先安装好Node.js和Git，然后安装Yeoman和VS Code Extension Generator：

npm install -g yo generator-code
1

这个脚手架会生成一个可以立马开发的项目。运行生成器，然后填好下列字段：

yo code

# ? 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
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

在命令面板(Ctrl+Shift+P)中输入Hello World命令。

如果你看到了Hello World提示弹窗，恭喜你成功了！

# 开发插件

现在让我们稍稍改动一下弹窗显示的内容：

  • 将项目文件extension.ts中的Hello World改为Hello VS Code
  • 重新加载开发窗口
  • 再次运行Hello World命令

你应该就能看到显示的消息更新了：

请浏览你的项目目录和代码，然后进行下面的小练习：

  • 为命令面板中的Hello World换一个名字
  • 配置一个新的命令：打开一个提示弹窗，显示当前时间
  • 用显示警告信息的VS Code API替换原本的vscode.window.showInformationMessage

# 调试插件

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

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

# 下一步

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

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

# 使用 Javascript

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

← 解析插件结构 →