基于Monaco Editor实现在线版Copilot

前言

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

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

Copilot

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

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

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

除了Copilot,还有很多类似的产品,如CodeWhispererCodeGeeX通义灵码iFlyCode ...

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

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

实现Monaco Editor中的Copilot

  • 上手体验

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

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

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

  1. 编辑器展示出灰色的补充代码,并支持Tab键插入补全代码;

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

  2. 生成代码的核心API

    因为是核心技术就不过多透露了,我也不懂,涉及人工智能就不展开了,这里提供几种方案:

    1. 利用现有的生成式对话大模型 ,制定prompt引导生成想要的返回形式 ,可以按照定义角色-能力-任务-示例 这样的prompt模板让大模型生成更准确的内容
    2. 使用现有模型自己部署,推荐模型:CodeGenCodeGeeX

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

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

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

    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的registerInlineCompletionsProviderprovideInlineCompletionsAPIs。

结语

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

相关推荐
然我34 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子38 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹42 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss