![](https://i-blog.csdnimg.cn/direct/a9578950e1e04678a99c2d25c62e17c0.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Monaco Editor
如何使用 Monaco Editor, Monaco 环境搭建,API 使用方法。
hawk2014bj
这个作者很懒,什么都没留下…
展开
-
React 中如何使用 Monaco
Monaco 功能非常强大,API 也比较复杂,后面后陆续看看它的 API 如何使用。原创 2024-07-04 22:20:15 · 295 阅读 · 0 评论 -
Monaco 使用 InlineCompletionsProvider
AI 代码助手最近太火爆,国内有模型厂商都有代码助手,代码助手是个比较典型的 AI 应用,主要看前端,后端的模型都差不多,国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件,本文通过 Monaco 实现一个多行代码提示,通过 monaco.languages.registerInlineCompletionsProvider 实现即可,Monaco 的 API 特别丰富,就是文档差点儿。在调用的后端的时候,要用节流,请求就太多了,模型受不了。原创 2024-07-07 00:15:27 · 263 阅读 · 0 评论 -
Monaco 使用 CompletionItemProvider
Monaco 中 CompletionItemProvider 为代码进行提示时提供数据,和很相似只是显示方式不一样,一个是行内一个是弹框。先看一下显示效果:provideCompletionItems 需要实现两个方法。原创 2024-07-13 18:54:48 · 133 阅读 · 0 评论 -
Monaco 使用 CodeActionProvider
Monaco 中的 CodeAction 会在当前代码行上方添加一个💡,点击💡时出现一个命令列表,名列列表可以点击,在 VSCode 中很常见的就是代码出现问题,点击会给出修改建议。CodeActionProvider 中,实现 provideCodeActions,定义 CodeAction 并返回。原创 2024-07-09 11:59:36 · 141 阅读 · 0 评论 -
Monaco 使用 CodeLensProvider
通过调用 API 注册 LensProvider,点击时触发 Command,首先要注册命令,通过 editor.addCommand () 方法进行注册。三个参数分别为快捷键、处理实现方法 和 上下文。点击时添加 Provider,同时删除上一个 Provider, 否则会出现重复提示。registerCodeLensProvider 提供两个函数。最终效果,点击事件发生时,在当前代码行上加一行文字并可以点击。原创 2024-07-08 17:42:03 · 221 阅读 · 0 评论 -
Monaco 使用 DeclarationProvider
Monaco 中使用 DeclarationProvider,Declaration(声明) 是定义,就像方法的定义,Definition(定义) 是实现,例如 function 的实现。注册 DeclarationProvider 和 注册 DefinitionProvider 接口参数和返回值都是一致的。在方法上点击 Definition。返回 Definition。实现代码, 返回值为。原创 2024-07-14 21:55:53 · 35 阅读 · 0 评论 -
Monaco 使用 DefinitionProvider
DefinitionProvider 可以弹出方法定义,效果如下,按住 command + 鼠标左键,弹出方法说明。点击时 Monaco Editor 会调用注册函数,注册函数返回文件地址和需要显示的位置,实现代码如下。返回对象 Location, 包含显示文件以及位置信息。原创 2024-07-11 15:01:46 · 207 阅读 · 0 评论 -
Monaco 使用 ColorProvider
调色板是 Monaco-Editor 中一个特别的组件,通过两个方法实现呼出调色板,provideColorPresentations 显示调色窗口,provideDocumentColors 监听页面的变更,如果是色值(根据正则去判断)就在字符串前添加颜色块。Manco 中可以使用调色板对色值进行修改,首先看一下调色版效果。原创 2024-07-12 17:30:27 · 98 阅读 · 0 评论