hawk2014bj
这个作者很懒,什么都没留下…
展开
-
Monaco 使用 NewSymbolNameProvider
Monaco 中这个 newSymbol 是个新功能,VSCode 都没看到这个功能(可能是需要开启),当重命名变量名时,可以返回更多的选项,像是为 AI 准备的。先看一下这个效果,右键点击函数名选择 “重命名”,列表会显示自定义函数返回的名称列表。通过 registerNewSymbolNameProvider 注册自定义函数。返回 NewSymbolName,newSymbolName 是新变量的名称。实现 provideNewSymbolNames 返回 Symbol 列表。原创 2024-07-27 14:34:04 · 162 阅读 · 0 评论 -
Monaco 使用 CompletionItemProvider
Monaco 中 CompletionItemProvider 为代码进行提示时提供数据,和很相似只是显示方式不一样,一个是行内一个是弹框。先看一下显示效果:provideCompletionItems 需要实现两个方法。原创 2024-07-13 18:54:48 · 400 阅读 · 0 评论 -
Monaco 使用 DocumentFormattingEditProvider
在 Monaco 通过 registerDocumentFormattingEditProvider 方法注册处理函数,实现 provider 方法。代码实现如下,如果要格式化代码,需要做代码解析,生成语法树,并进行换行等处理。这里只是个简单的示例。文档格式化,是 VSCode 比较常用的功能,在文档上点击右键选择格式化文档。有需要的同学可以参考 Prettier 的 Html Formatter。TextEdit 包含两个字段:格式化后的代码和代码区域。provider 方法返回格式化好的代码。原创 2024-07-16 17:08:04 · 148 阅读 · 0 评论 -
Monaco 使用 ImplementationProvider
Monaco 使用 ImplementationProvider 实现 “跳转实现”,“跳转实现” 是指右键点击关键字并选择 “转到实现”,例如点击 Interface 的名字,可以跳转的实现 Class 的位置,这个和Definition / Declaration 类似,具体跳转到哪里由代码实现。实现 provideImplementation,根据选中的关键字,跳转到目标位置,跳转信息保存在 Definition。返回跳转位置信息,Location 对象中定义文件链接和位置信息。原创 2024-07-23 14:55:55 · 216 阅读 · 0 评论 -
Monaco 使用 ReferenceProvider
Monaco ReferenceProvider 是指引用跳转,用户可以右键点击变量名称,可以跳转列表进行选择,选择之后跳转到对应位置的功能。通过 registerReferenceProvider 注册 ReferenceProvider 实现函数。实现 provideReferences 并返回可跳转位置。原创 2024-07-29 13:52:12 · 211 阅读 · 0 评论 -
Monaco 使用 SelectionRange
Monaco 可以自定义选择范围,通过 registerSelectionRangeProvider 注册 selectionRangeProvider 处理函数。实现 provideSelectionRanges 并返回选择范围。返回位置信息 SelectRange。原创 2024-08-01 18:41:02 · 166 阅读 · 0 评论 -
Monaco 使用 CodeLensProvider
通过调用 API 注册 LensProvider,点击时触发 Command,首先要注册命令,通过 editor.addCommand () 方法进行注册。三个参数分别为快捷键、处理实现方法 和 上下文。点击时添加 Provider,同时删除上一个 Provider, 否则会出现重复提示。registerCodeLensProvider 提供两个函数。最终效果,点击事件发生时,在当前代码行上加一行文字并可以点击。原创 2024-07-08 17:42:03 · 260 阅读 · 0 评论 -
Monaco 使用 DefinitionProvider
DefinitionProvider 可以弹出方法定义,效果如下,按住 command + 鼠标左键,弹出方法说明。点击时 Monaco Editor 会调用注册函数,注册函数返回文件地址和需要显示的位置,实现代码如下。返回对象 Location, 包含显示文件以及位置信息。原创 2024-07-11 15:01:46 · 232 阅读 · 0 评论 -
Monaco 使用 CodeActionProvider
Monaco 中的 CodeAction 会在当前代码行上方添加一个💡,点击💡时出现一个命令列表,名列列表可以点击,在 VSCode 中很常见的就是代码出现问题,点击会给出修改建议。CodeActionProvider 中,实现 provideCodeActions,定义 CodeAction 并返回。原创 2024-07-09 11:59:36 · 181 阅读 · 0 评论 -
Monaco 使用 OnTypeFormattingEditProvider
首先需要自定义需要配置的语言,例如 mySpecialLanguage。原创 2024-07-28 14:35:31 · 171 阅读 · 0 评论 -
Monaco 使用 SemanticTokensProvider
Monaco 中可以对关键字进行高亮的自定义,通过提供关键字位置信息和关键字颜色进行实现,先看一下效果,这里自定了 zzz 为关键字,背景色为绿色。通过 registerDocumentSemanticTokensProvider 进行注册。原创 2024-07-21 12:17:44 · 343 阅读 · 0 评论 -
Monaco 使用 DocumentHighlightProvider
代码实现如下, 代码有个 DocumentHighlightKind 枚举类,包括 Text、Read 和 Write,从效果上来看没有啥区别。Monaco 默认就有这个功能,可以根据具体需求进行定制。通过 registerDocumentHighlightProvider 进行注册。实现 provideDocumentHighlights 方法,返回 DocumentHighlight 数组。原创 2024-07-17 19:02:29 · 205 阅读 · 0 评论 -
Monaco 使用 InlineCompletionsProvider
AI 代码助手最近太火爆,国内有模型厂商都有代码助手,代码助手是个比较典型的 AI 应用,主要看前端,后端的模型都差不多,国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件,本文通过 Monaco 实现一个多行代码提示,通过 monaco.languages.registerInlineCompletionsProvider 实现即可,Monaco 的 API 特别丰富,就是文档差点儿。在调用的后端的时候,要用节流,请求就太多了,模型受不了。原创 2024-07-07 00:15:27 · 350 阅读 · 0 评论 -
Monaco 使用 SymbolProvider
Monaco 中提供一个搜索符号的功能,可以快速跳转到指定符号的位置,可以通过实现 SymbolProvider 实现自定义的 Symbol,如下图,function1 是自定义的符号,当进入符号列表时可以看到 “a1"。通过 registerDocumentSymbolProvider 注册自定义 Symbol 方法。实现 provideDocumentSymbols 并返回 Symbols 列表。DocumentSymbol 包含的主要属性。原创 2024-07-19 15:51:17 · 190 阅读 · 0 评论 -
Monaco 使用 TypeDefinitionProvider
Monaco 中的 TypeDefinitionProvider 和 ImplementationProvider、DefinitionProvider 类似,右键点击变量名称,现在 “选择转到类型定义”, 跳到指定位置。通过 registerTypeDefinitionProvider 添加 TypeDefinitionProvider 处理方法。实现 provideTypeDefinition 并返回 Definition。Definition 中定义了跳转位置。原创 2024-08-03 20:19:05 · 193 阅读 · 0 评论 -
Monaco 使用 LinkedEditingRangeProvider
Monaco LinkEdit 功能是指同时修改同样的字符串,例如在编辑 Html 时,修改开始标签时会同时修改闭合标签。Monaco 支持自定义需要一起更新的字符串列表。首先,通过 registerLinkedEditingRangeProvider 注册 LinkEdit 处理函数。修改对应配置信息, linkEditing 默认为关闭状态,需要在配置中进行开启。实现 provideLinkedEditingRanges 并返回位置信息。返回需要同步修改的位置信息。原创 2024-07-26 13:38:04 · 244 阅读 · 0 评论 -
Monaco 使用 InlayHintsProvider
Monaco 中使用 InlayHints,InlayHints 可以在指定位置添加一段提示,如下图,可以看到参数名字名字显示在参数值左侧。VSCode 中 InlayHints 默认是关闭,需要在设置中打开。实现 provideInlayHints 并返回 InlayHintList,InlayHintList 对象中包含 InlayHint[] 字段。InlayHint 中包含两个必填字段 label 和 position,分别为 Hint 的描述和位置信息。原创 2024-07-24 18:10:37 · 124 阅读 · 0 评论 -
Monaco 使用 RenameProvider
Monaco 重命名是编辑器标配,可以重命名变量名称。重命名包括两部分,首先是列出 Rename 的名称,第二步是重命名后文字和对应位置信息,用于替换。先看一下效果:通过 registerRenameProvider 注册 RenameProvider 的处理函数。右键变量名称点击重命名,resolveRenameLocation 返回名称,provideRenameEdits 返回最终更新文字和对应的位置信息。原创 2024-07-30 23:59:57 · 168 阅读 · 0 评论 -
Vue3 中如何使用 Monaco
启动项目很顺利,没啥坑。代码传到资源中了,有需要可以下载。原创 2024-08-06 17:27:35 · 193 阅读 · 0 评论 -
Monaco 使用 LinkProvider
通过 registerLinkProvider 注册 LinkProvider。实现 Provider 方法,并返回 LinkList。原创 2024-07-25 14:19:26 · 210 阅读 · 0 评论 -
Monaco 使用 ColorProvider
调色板是 Monaco-Editor 中一个特别的组件,通过两个方法实现呼出调色板,provideColorPresentations 显示调色窗口,provideDocumentColors 监听页面的变更,如果是色值(根据正则去判断)就在字符串前添加颜色块。Manco 中可以使用调色板对色值进行修改,首先看一下调色版效果。原创 2024-07-12 17:30:27 · 161 阅读 · 0 评论 -
Monaco 使用 HoverProvider
Monaco 中自定义 Hover,Hover 效果是指当鼠标移动文字上展示出提示效果,就像页面上的 Tooltip 效果。通过 registerHoverProvider 注册 Hover 触发时的处理方法。返回 Hover 内容和 Hover 显示位置。接口中提供了 4 个参数,前两个参数比较重要。原创 2024-07-22 16:10:56 · 266 阅读 · 0 评论 -
Monaco 使用 DeclarationProvider
Monaco 中使用 DeclarationProvider,Declaration(声明) 是定义,就像方法的定义,Definition(定义) 是实现,例如 function 的实现。注册 DeclarationProvider 和 注册 DefinitionProvider 接口参数和返回值都是一致的。在方法上点击 Definition。返回 Definition。实现代码, 返回值为。原创 2024-07-14 21:55:53 · 226 阅读 · 0 评论 -
Monaco 使用 FoldingRangeProvider
Monaco 中支持代码折叠功能,FolderRangeProvider 是一个通知功能,编辑文档会根据大括号的范围进行折叠,也就是可折叠区域都是以左大括号开始,右大括号结束,当折叠区域发生变更时,内部方法会被调用。registerFoldingRangeProvider 可以返回折叠区域,返回的区域会编辑器左侧进行展示。通过 registerFoldingRangeProvider 进行注册,实现 Provider 方法。原创 2024-07-18 21:39:02 · 235 阅读 · 0 评论 -
Monaco 使用 SignatureHelpProvider
Monaco 中 SignatureHelpProvider 是方法提示说明,当敲入方法名时,系统会提示方法名称和对应的参数信息。通过 registerSignatureHelpProvider 实现 SignatureHelpProvider 处理函数。实现 signatureHelpTriggerCharacters 和 provideSignatureHelp。原创 2024-08-02 11:53:13 · 231 阅读 · 0 评论 -
React 中如何使用 Monaco
Monaco 功能非常强大,API 也比较复杂,后面后陆续看看它的 API 如何使用。原创 2024-07-04 22:20:15 · 591 阅读 · 0 评论