基于Monaco Editor实现在线版Copilot

前言

Monaco Editor，这款由微软精心打造的代码编辑器，不仅是VSCode的核心组件，更是提供了与VSCode相似的丰富功能。因此，你在VSCode中所能享受到的编辑体验，理论上在Monaco Editor中也能得到实现，包括VSCode的插件功能。

本文主要讲述了Copilot插件 的功能作用，并讲解如何将这种生成代码的形式复刻在Monaco Editor代码编辑器当中，实现了在线网页版的Copilot

Copilot

作为程序员的你可能已经听说或者正在使用像Copilot这样的IDE插件。

具体来说，它可以在当前光标处自动生成补全代码，包括但不限于以下几种场景：

根据光标所处的上下文 ，自动生成补全代码并在编辑器中显示
根据写的注释，自动生成相应代码；
根据已有代码生成测试代码 。

除了Copilot，还有很多类似的产品，如CodeWhisperer、CodeGeeX、通义灵码、iFlyCode ...

我自己使用Copilot进行开发确实能提高日常工作效率。它能够减少开发过程中的心智负担，让我能更专注于业务分析和需求开发。

目前，很少有网页运行的代码编辑器具有这样的功能。想要在现有的业务系统代码编辑器中实现可用的代码生成能力 ，还需要进行特殊的调整和模型训练。

实现Monaco Editor中的Copilot

上手体验

百闻不如一见，何不先行体验: copilot.codeasily.net

该项目处于demo阶段，服务器有流量限制，请酌情体验试用

实现Copilot 需要解决关键的两个部分：

编辑器展示出灰色的补充代码，并支持Tab键插入补全代码；

这个功能很好处理，就是利用Monaco Editor 提供的API：monaco.languages.registerInlineCompletionsProvider 以及provideInlineCompletions 就能实现代码提示，与VSCode 体验一致
生成代码的核心API

因为是核心技术就不过多透露了，我也不懂，涉及人工智能就不展开了，这里提供几种方案：
1. 利用现有的生成式对话大模型 ，制定prompt引导生成想要的返回形式 ，可以按照定义角色-能力-任务-示例 这样的prompt模板让大模型生成更准确的内容
2. 使用现有模型自己部署，推荐模型：CodeGen、CodeGeeX

这里只展开第1步进行讲解，只涉及Monaco Editor，可以在官网的Playground调试

打开playground的示例Monaco Editor (microsoft.github.io)

左边的代码框替换成以下代码就可以实时查看效果：

php 复制代码

monaco.languages.registerInlineCompletionsProvider("javascript", {
	provideInlineCompletions: async function (model, position, context, token) {
		return Promise.resolve({
			items: [
				{
					insertText: "cument.addEventListener('",
					range: new monaco.Range(position.lineNumber, 3, position.lineNumber, "cument.addEventListener('".length)
				},
			]
		})
	},
	freeInlineCompletions(arg) {
	}
});

const myEditor = monaco.editor.create(document.getElementById("container"), {
	value: '//start type "doc"\n',
	language: "javascript",
	wordBasedSuggestions: false,
	inlineSuggest: {
		enabled: true,
		showToolbar: 'onHover',
		mode: 'subword',
		suppressSuggestions: false,
	},
});

上述代码实例演示了如何在Monaco Editor中实现代码自动补全功能。就像我们在VSCode中使用Copilot插件一样，当我们开始键入代码时，它会自动提示可能的代码补全选项。这个功能的实现主要依赖于Monaco Editor的registerInlineCompletionsProvider和provideInlineCompletionsAPIs。

结语

Copilot 还有一个重要功能，就像chatGPT 一样的对话框。它可以根据编辑器中选中的代码片段快速地进行代码解释、说明和优化 。这种独立的对话式界面功能不需要大量的模型训练，适合于用户提供线索获取更准确结果的情况。此功能可以在后续加入。