01. 第一个vscode插件

[PDKSophia]

一、环境准备

✅ nodejs
✅ npm
✅ yeoman
✅ generator-code

为了降低开发门槛，微软做了一个 Yeoman 代码生成命令，可以很方便的生成插件开发需要的模板代码，可以通过以下命令安装：

npm install -g yo generator-code

二、初始化 Demo 插件

当上面的安装完毕之后，只需要进入你开发目录文件夹，通过脚手架生成一个开发 vscode 插件的项目。

yo code

根据提示信息填写相关内容

这时候我们的 vscode 插件项目就 OK 了～ 接下来我们看看如何运行起来！

三、文件说明

项目中两个重要的文件我们需要看一下：extension.ts 和 package.json

3.1 extension.ts

该文件是入口文件，下面我们写一段简单的 demo 代码

此段代码意思为：注册一个 beehive.toastDemo 事件，当触发此事件会显示一段 message

import * as vscode from 'vscode'
export function activate(context: vscode.ExtensionContext) {
  console.log('your extension "sugar-demo-vscode" is now active!')
  let disposable = vscode.commands.registerCommand('beehive.toastDemo', () => {
    vscode.window.showInformationMessage('toastDemo touched !')
  })
  context.subscriptions.push(disposable)
}
export function deactivate() {}

3.2 package.json

该文件配置项太多，建议去官方文档翻阅

关键是 : activationEvents 和 contributes 这两个属性，关于 activationEvents 的意思和注意已经在上图说明

下面讲一下 contributes 相关信息，contributes 配置项是整个插件的贡献点，也就是说这个插件有哪些功能。contributes 字段可以设置的 key 也基本显示了 vscode 插件可以做什么。

• configuration：通过这个配置项我们可以设置一个属性，这个属性可以在 vscode 的 settings.json 中设置，然后在插件工程中可以读取用户设置的这个值，进行相应的逻辑。
• commands：命令，通过 cmd+shift+p 进行输入来实现的。
• menus：通过这个选项我们可以设置右键的菜单
• keybindings：可以设置快捷键
• languages：设置语言特点，包括语言的后缀等
• grammars：可以在这个配置项里设置描述语言的语法文件的路径，vscode 可以根据这个语法文件来自动实现语法高亮功能
• snippets：设置语法片段相关的路径

四、运行 vscode 插件

点击此 Debug Icon，或者是 vscode 菜单栏：Run -> Start Debugging

当我们点击下 Run Extension 时，会开一个本地 vscode 窗口

我们在新开的 vscode 窗口中输入 : cmd + shift + P

然后输入我们注册的事件：beehive.toastDemo，然后我们按下回车，就会执行我们写的事件回调了！

至此，我们的第一个简单 Demo 完成！