Monaco 使用 SymbolProvider

最新推荐文章于 2024-07-30 23:59:57 发布

原创最新推荐文章于 2024-07-30 23:59:57 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#monaco #reactjs

Monaco Editor 使用专栏收录该内容

26 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Monaco 中提供一个搜索符号的功能，可以快速跳转到指定符号的位置，可以通过实现 SymbolProvider 实现自定义的 Symbol，如下图，function1 是自定义的符号，当进入符号列表时可以看到 “a1"。
在这里插入图片描述
通过 registerDocumentSymbolProvider 注册自定义 Symbol 方法。

在这里插入图片描述
实现 provideDocumentSymbols 并返回 Symbols 列表

DocumentSymbol 包含的主要属性

实现代码如下

export function documentSymbolProvider(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEdit

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hawk2014bj

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Monaco 使用 SemanticTokensProvider

hawk2014bj的博客

07-21

548

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

Monaco 使用 InlineCompletionsProvider

hawk2014bj的博客

07-07

703

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

参与评论您还未登录，请先登录后发表或查看评论

关于monacoEditor--registerCompletionItemProvider的一些问题

qq_15686015的博客

03-15

2668

最近在搞一个在线python编辑代码的功能，因为平时都在用vscode在码代码所以就用了monacoEditor作为在线代码的库。目前为止遇到的问题都来自于自动完成建议项这功能，在这里记录下方便以后查看，有遇见类似问题的朋友也可以参考下。

mysql kindediter_Monaco Editor 使用入门

weixin_29970399的博客

01-19

828

以前项目是用ace编辑器的，但是总有些不敬人意的地方。前端事件看见的VS Code编辑器Monaco Editor准备更换下，下面介绍一些使用中遇到的一点问题。代码提示1.项目引用import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';项目中引用了editor.api.js，但是这个文件不包含一些默认的语言和插件，所以在使用...

Monaco 使用 CodeActionProvider

hawk2014bj的博客

07-09

419

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

Monaco 使用 HoverProvider

hawk2014bj的博客

07-22

739

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

Monaco 使用 OnTypeFormattingEditProvider

hawk2014bj的博客

07-28

319

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

Monaco 使用 RenameProvider

hawk2014bj的博客

07-30

284

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

【JavaScript源代码】JS代码编译器Monaco使用方法.docx

12-30

在本文中，我们将探讨如何使用Monaco Editor来实现这些功能。首先，Monaco Editor支持多种编程语言，包括JavaScript，它还提供了一个缩略地图功能，方便开发者快速定位代码。尽管其体积相对较大，但提供的功能强大...

精选资源

用于 React 的 Monaco Editor - 在任何 React 应用程序中使用 monaco-editor

06-08

@monaco-editor/react · Monaco Editor for React · 在任何 React 应用程序中使用 monaco-editor，无需使用 webpack（或 rollup/parcel/etc）配置文件/插件:high_voltage: 多模型编辑器已经支持；享受它 :party_...

精选资源

monaco-react:适用于React的Monaco编辑器-在任何React应用程序中使用monaco编辑器，而无需使用webpack（或rollupparceletc）配置文件插件

04-03

适用于React的Monaco编辑器·可在任何应用程序中使用，而无需使用webpack （或rollup / parcel / etc / etc）配置文件/插件 :high_voltage: 已经支持；好好享受 :party_popper: :party_popper: 版本v4在这里-要...

Concis组件库封装——Loading加载中

量子前端的博客

06-22

2382

一个常规的react loading组件的开发和测试

基于SpringBoot后端框架与Vue前端框架构建的采用前后端分离架构的面向大规模公共卫生事件常态化管理的智能化核酸检测全流程闭环管理系统_包含管理员医务人员用户三种角色权限涵盖.zip

12-30

智能QC成果生成器是一款基于大语言模型和多智能体协作技术的企业级应用_旨在通过AI全流程赋能质量控制小组活动_显著降低参与门槛并提升成果质量_该系统核心功能包括系统配置与API优先.zip

12-30

灵录师后端项目是一个专为AI面试评测工具设计的核心服务模块它通过集成语音识别视频流处理与文本分析等多模态输入解析能力实现对面试过程的智能化评估与反馈生成系统_该项目聚焦于面试.zip

12-30

基于SpringAI和LangChain4j构建的智能AI交互系统_支持多种大模型接入知识库问答和工具调用能力_旨在为开发者提供一个功能全面易于集成和扩展的智能体开发平台_通.zip

12-30

TQuick是一款基于QtQuick跨平台技术采用自身模块规范编写的轻量级QMLUI框架_它继承自Toou团队开发的Toou2D框架_遵循Qt书写与组织形式_门槛极低无需深入学习简.zip

12-30

基于仿xxl-job架构思想并致力于消除调度中心单点故障的分布式定时任务调度平台_该项目通过解耦调度中心功能拆分为监控中心触发器与执行器三大核心组件实现高可用与弹性扩展_监控中心专.zip

12-30

CARROTLIKE_springboot_community_trading_health_phone_sales_33164_1767078720033.zip

最新发布

12-30

CARROTLIKE_springboot_community_trading_health_phone_sales_33164_1767078720033.zip

monaco-editor使用

12-28

### 如何使用 Monaco Editor 为了在项目中集成并使用 Monaco Editor，需先安装必要的依赖项。通过 npm 安装 `monaco-editor` 及其相关插件可以实现这一点[^4]。 ```bash npm install monaco-editor@0.30.0 --save npm install monaco-editor-webpack-plugin@6.0.0 --save-dev npm install monaco-languageclient --save npm install @codingame/monaco-jsonrpc --save ``` 对于 Electron 应用程序开发环境，则还需要额外配置： ```bash vue add electron-builder electron-builder install-app-deps ``` 引入 Monaco 编辑器到组件文件顶部是启动使用的首要步骤之一。这可以通过如下方式完成: ```javascript import * as monaco from "monaco-editor"; import { loader } from "@monaco-editor/react"; loader.config({ monaco, }); ``` 除了基本导入外，该库还提供了多个实用工具函数和 React 组件来简化编辑器的嵌入过程。例如，可以直接利用 `<Editor>` 和 `<DiffEditor>` 这两个预定义好的 React 组件快速构建页面上的代码编辑区域[^2]: ```jsx import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react'; function App() { return ( <div> {/* 单一版本编辑器 */} <Editor height="90vh" defaultLanguage="typescript" defaultValue="// some comment..." /> {/* 差异对比编辑器 */} <DiffEditor original={originalCode} modified={modifiedCode} height="90vh" /> </div> ); } ``` 值得注意的是，尽管 Monaco Editor 默认支持多种编程语言语法高亮显示功能，但对于某些特定需求如 TextMate 语法的支持则可能需要借助第三方解决方案，比如 bolinfest 提供的一个开源项目 monaco-tm 就能很好地解决这个问题[^3]。