0%
起步：第一个插件
本篇文档中，我们会向你介绍构建插件的基本概念。请确保你已经安装了 Node.js 和 Git。
首先，使用 Yeoman 和 VS Code 插件生成器 来创建一个 TypeScript 或 JavaScript 项目。
- 如果你不想安装 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? Yes
# ? Bundle the source code with webpack? No
# ? 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，或者按下 Ctrl + Shift + P 打开命令面板并运行命令 Debug: Start Debugging，这将在一个新的调试窗口 Extension Development Host 运行插件。
在新窗口的命令面板中运行 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 命令一个新的名字。
- 在 contribute 配置项 中提供一个新的命令，在信息提示中显示当前时间。Contribute 配置项是在 插件声明文件
package.json中编写的静态配置，以扩展 VS Code 的功能，例如添加命令、配置菜单，或者是为你的插件添加键位绑定。
- 使用其它 VS Code API 替换
vscode.window.showInformationMessage，来显示一个警告消息。
调试插件
VS Code 内置的调试功能让插件调试工作变得十分简单。你可以点击一行代码左侧的位置来设置断点，VS Code 会激活断点。你可以在编辑器或左侧的运行和调试 Run and Debug区域的每个变量上悬停来查看变量的值。你可以在调试控制台中调试表达式。
你可以在 Node.js 调试主题 中查看更多关于在 VS Code 中调试 Node.js 程序的内容。
接下来
在下一篇文档插件结构解析中，我们会走近 Hello World 例子的源代码，并为你解释其中的核心概念。
你可以在 https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample 中找到本文档中的源代码。而插件指南中包含了其它的示例，讲解了很多包含 VS Code 或者是 contribution 配置项的不同示例，它们均遵循我们在 用户体验指南 中的设计建议。
使用 JavaScript
在这篇指南中，我们主要描述如何使用 TypeScript 来构建 VS Code 插件，因为我们相信 TypeScript 会为开发者提供最佳的开发体验。然而如果你更喜欢 JavaScript，你仍然可以参考这个例子 helloworld-minimal-sample。
用户体验指南
看到这里，相信你对插件有一个初步的了解。现在刚好适合重新向你介绍用户体验指南。依照用户体验指南，你可以参考 VS Code 的最佳实践，来设计你的插件的用户界面。