为 xmake 开发 VSCode 编辑器插件

见解分享

2024-01-22 05:44:26

今天我们一起来看一看 xmake-vscode 插件的开发过程。

最近打算给 xmake 写一些 IDE 和编辑器的集成插件，发现 vscode 的编辑器插件比较容易上手的，就先研究了下 vscode 的插件开发流程，并且完成了 xmake-vscode 插件的开发。

我们先来看几张最后的效果图：

[图片]

要实现上面的效果，其实并不复杂，首先我们先来简单介绍下，vscode 是微软公司开发的一款文本编辑器，它可以同时支持多种编程语言。它的一个突出特点是采用了拓展形式的扩展机制，使得我们能很方便的通过编写扩展代码来实现我们自己的功能和接口。

首先，我们先来说说 vscode 插件的开发流程，我们这里主要会用到 typescript 来编写插件代码。

安装插件开发环境

npm install -g yo
npm install -g generator-code

创建插件项目

yo code

选择插件类型

Web Extension (Typescript)

输入插件名称

xmake-vscode

安装插件依赖

npm install

开始编写插件代码

src/extension.ts

在 extension.ts 文件中，我们可以定义插件的激活事件和一些初始化逻辑。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

	// 注册一个命令
	let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
		// 显示一个信息框
		vscode.window.showInformationMessage('Hello World!');
	});

	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}