hawk2014bj的博客

Monaco 中这个 newSymbol 是个新功能，VSCode 都没看到这个功能（可能是需要开启），当重命名变量名时，可以返回更多的选项，像是为 AI 准备的。先看一下这个效果，右键点击函数名选择 “重命名”，列表会显示自定义函数返回的名称列表。通过 registerNewSymbolNameProvider 注册自定义函数。返回 NewSymbolName，newSymbolName 是新变量的名称。实现 provideNewSymbolNames 返回 Symbol 列表。

Monaco 中 CompletionItemProvider 为代码进行提示时提供数据，和很相似只是显示方式不一样，一个是行内一个是弹框。先看一下显示效果：provideCompletionItems 需要实现两个方法。

在 Monaco 通过 registerDocumentFormattingEditProvider 方法注册处理函数，实现 provider 方法。代码实现如下，如果要格式化代码，需要做代码解析，生成语法树，并进行换行等处理。这里只是个简单的示例。文档格式化，是 VSCode 比较常用的功能，在文档上点击右键选择格式化文档。有需要的同学可以参考 Prettier 的 Html Formatter。TextEdit 包含两个字段：格式化后的代码和代码区域。provider 方法返回格式化好的代码。

Monaco 使用 ImplementationProvider 实现 “跳转实现”，“跳转实现” 是指右键点击关键字并选择 “转到实现”，例如点击 Interface 的名字，可以跳转的实现 Class 的位置，这个和Definition / Declaration 类似，具体跳转到哪里由代码实现。实现 provideImplementation，根据选中的关键字，跳转到目标位置，跳转信息保存在 Definition。返回跳转位置信息，Location 对象中定义文件链接和位置信息。

Monaco ReferenceProvider 是指引用跳转，用户可以右键点击变量名称，可以跳转列表进行选择，选择之后跳转到对应位置的功能。通过 registerReferenceProvider 注册 ReferenceProvider 实现函数。实现 provideReferences 并返回可跳转位置。

Monaco 可以自定义选择范围，通过 registerSelectionRangeProvider 注册 selectionRangeProvider 处理函数。实现 provideSelectionRanges 并返回选择范围。返回位置信息 SelectRange。

通过调用 API 注册 LensProvider，点击时触发 Command，首先要注册命令，通过 editor.addCommand () 方法进行注册。三个参数分别为快捷键、处理实现方法 和 上下文。点击时添加 Provider，同时删除上一个 Provider， 否则会出现重复提示。registerCodeLensProvider 提供两个函数。最终效果，点击事件发生时，在当前代码行上加一行文字并可以点击。

DefinitionProvider 可以弹出方法定义，效果如下，按住 command + 鼠标左键，弹出方法说明。点击时 Monaco Editor 会调用注册函数，注册函数返回文件地址和需要显示的位置，实现代码如下。返回对象 Location， 包含显示文件以及位置信息。

Monaco 中的 CodeAction 会在当前代码行上方添加一个💡，点击💡时出现一个命令列表，名列列表可以点击，在 VSCode 中很常见的就是代码出现问题，点击会给出修改建议。CodeActionProvider 中，实现 provideCodeActions，定义 CodeAction 并返回。

首先需要自定义需要配置的语言，例如 mySpecialLanguage。

Monaco 中可以对关键字进行高亮的自定义，通过提供关键字位置信息和关键字颜色进行实现，先看一下效果，这里自定了 zzz 为关键字，背景色为绿色。通过 registerDocumentSemanticTokensProvider 进行注册。

代码实现如下， 代码有个 DocumentHighlightKind 枚举类，包括 Text、Read 和 Write，从效果上来看没有啥区别。Monaco 默认就有这个功能，可以根据具体需求进行定制。通过 registerDocumentHighlightProvider 进行注册。实现 provideDocumentHighlights 方法，返回 DocumentHighlight 数组。

AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。在调用的后端的时候，要用节流，请求就太多了，模型受不了。

Monaco 中提供一个搜索符号的功能，可以快速跳转到指定符号的位置，可以通过实现 SymbolProvider 实现自定义的 Symbol，如下图，function1 是自定义的符号，当进入符号列表时可以看到 “a1"。通过 registerDocumentSymbolProvider 注册自定义 Symbol 方法。实现 provideDocumentSymbols 并返回 Symbols 列表。DocumentSymbol 包含的主要属性。

Monaco 中的 TypeDefinitionProvider 和 ImplementationProvider、DefinitionProvider 类似，右键点击变量名称，现在 “选择转到类型定义”， 跳到指定位置。通过 registerTypeDefinitionProvider 添加 TypeDefinitionProvider 处理方法。实现 provideTypeDefinition 并返回 Definition。Definition 中定义了跳转位置。

Monaco LinkEdit 功能是指同时修改同样的字符串，例如在编辑 Html 时，修改开始标签时会同时修改闭合标签。Monaco 支持自定义需要一起更新的字符串列表。首先，通过 registerLinkedEditingRangeProvider 注册 LinkEdit 处理函数。修改对应配置信息, linkEditing 默认为关闭状态，需要在配置中进行开启。实现 provideLinkedEditingRanges 并返回位置信息。返回需要同步修改的位置信息。

Monaco 中使用 InlayHints，InlayHints 可以在指定位置添加一段提示，如下图，可以看到参数名字名字显示在参数值左侧。VSCode 中 InlayHints 默认是关闭，需要在设置中打开。实现 provideInlayHints 并返回 InlayHintList，InlayHintList 对象中包含 InlayHint[] 字段。InlayHint 中包含两个必填字段 label 和 position，分别为 Hint 的描述和位置信息。

Monaco 重命名是编辑器标配，可以重命名变量名称。重命名包括两部分，首先是列出 Rename 的名称，第二步是重命名后文字和对应位置信息，用于替换。先看一下效果：通过 registerRenameProvider 注册 RenameProvider 的处理函数。右键变量名称点击重命名，resolveRenameLocation 返回名称，provideRenameEdits 返回最终更新文字和对应的位置信息。

启动项目很顺利，没啥坑。代码传到资源中了，有需要可以下载。

通过 registerLinkProvider 注册 LinkProvider。实现 Provider 方法，并返回 LinkList。

调色板是 Monaco-Editor 中一个特别的组件，通过两个方法实现呼出调色板，provideColorPresentations 显示调色窗口，provideDocumentColors 监听页面的变更，如果是色值（根据正则去判断）就在字符串前添加颜色块。Manco 中可以使用调色板对色值进行修改，首先看一下调色版效果。

Monaco 中自定义 Hover，Hover 效果是指当鼠标移动文字上展示出提示效果，就像页面上的 Tooltip 效果。通过 registerHoverProvider 注册 Hover 触发时的处理方法。返回 Hover 内容和 Hover 显示位置。接口中提供了 4 个参数，前两个参数比较重要。

Monaco 中使用 DeclarationProvider，Declaration（声明） 是定义，就像方法的定义，Definition（定义） 是实现，例如 function 的实现。注册 DeclarationProvider 和 注册 DefinitionProvider 接口参数和返回值都是一致的。在方法上点击 Definition。返回 Definition。实现代码, 返回值为。

Monaco 中支持代码折叠功能，FolderRangeProvider 是一个通知功能，编辑文档会根据大括号的范围进行折叠，也就是可折叠区域都是以左大括号开始，右大括号结束，当折叠区域发生变更时，内部方法会被调用。registerFoldingRangeProvider 可以返回折叠区域，返回的区域会编辑器左侧进行展示。通过 registerFoldingRangeProvider 进行注册，实现 Provider 方法。

Monaco 中 SignatureHelpProvider 是方法提示说明，当敲入方法名时，系统会提示方法名称和对应的参数信息。通过 registerSignatureHelpProvider 实现 SignatureHelpProvider 处理函数。实现 signatureHelpTriggerCharacters 和 provideSignatureHelp。

Monaco 功能非常强大，API 也比较复杂，后面后陆续看看它的 API 如何使用。