Monaco 使用 NewSymbolNameProvider

最新推荐文章于 2024-11-08 11:15:03 发布
最新推荐文章于 2024-11-08 11:15:03 发布
阅读量187 收藏
点赞数 1
分类专栏： Monaco Editor 使用 文章标签： monaco react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hawk2014bj/article/details/140734877
版权

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

在这里插入图片描述通过 registerNewSymbolNameProvider 注册自定义函数。

在这里插入图片描述
实现 provideNewSymbolNames 返回 Symbol 列表
在这里插入图片描述
返回 NewSymbolName，newSymbolName 是新变量的名称。
在这里插入图片描述
代码实现

export function newSym
了解本专栏 订阅专栏 解锁全文 超级会员免费看
hawk2014bj
关注
专栏目录
订阅专栏
Monaco 使用 SemanticTokensProvider
hawk2014bj的博客
07-21 401
Monaco 中可以对关键字进行高亮的自定义，通过提供关键字位置信息和关键字颜色进行实现，先看一下效果，这里自定了 zzz 为关键字，背景色为绿色。通过 registerDocumentSemanticTokensProvider 进行注册。
Monaco 使用 CodeActionProvider
hawk2014bj的博客
07-09 224
Monaco 中的 CodeAction 会在当前代码行上方添加一个💡，点击💡时出现一个命令列表，名列列表可以点击，在 VSCode 中很常见的就是代码出现问题，点击会给出修改建议。CodeActionProvider 中，实现 provideCodeActions，定义 CodeAction 并返回。
Monaco Editor ts代码 import模块的解析函数
qq_17209641的博客
12-21 1152
monaco 通过 tsWorker.js 下的 resolveExternalModule 函数解析ts代码 import模块的解析函数： function resolveExternalModule(location, moduleReference, moduleNotFoundError, errorNode, isForAugmentation) { if (isForAugmentation === void 0) { isForAugmentation
Monaco 使用 HoverProvider
hawk2014bj的博客
07-22 401
Monaco 中自定义 Hover，Hover 效果是指当鼠标移动文字上展示出提示效果，就像页面上的 Tooltip 效果。通过 registerHoverProvider 注册 Hover 触发时的处理方法。返回 Hover 内容和 Hover 显示位置。接口中提供了 4 个参数，前两个参数比较重要。
Monaco 使用 InlineCompletionsProvider
hawk2014bj的博客
07-07 432
AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。在调用的后端的时候，要用节流，请求就太多了，模型受不了。
Monaco 使用 DefinitionProvider
hawk2014bj的博客
07-11 280
DefinitionProvider 可以弹出方法定义，效果如下，按住 command + 鼠标左键，弹出方法说明。点击时 Monaco Editor 会调用注册函数，注册函数返回文件地址和需要显示的位置，实现代码如下。返回对象 Location， 包含显示文件以及位置信息。
Monaco 使用 DocumentFormattingEditProvider
hawk2014bj的博客
07-16 196
在 Monaco 通过 registerDocumentFormattingEditProvider 方法注册处理函数，实现 provider 方法。代码实现如下，如果要格式化代码，需要做代码解析，生成语法树，并进行换行等处理。这里只是个简单的示例。文档格式化，是 VSCode 比较常用的功能，在文档上点击右键选择格式化文档。有需要的同学可以参考 Prettier 的 Html Formatter。TextEdit 包含两个字段：格式化后的代码和代码区域。provider 方法返回格式化好的代码。
Monaco 使用 RenameProvider
hawk2014bj的博客
07-30 194
Monaco 重命名是编辑器标配，可以重命名变量名称。重命名包括两部分，首先是列出 Rename 的名称，第二步是重命名后文字和对应位置信息，用于替换。先看一下效果：通过 registerRenameProvider 注册 RenameProvider 的处理函数。右键变量名称点击重命名，resolveRenameLocation 返回名称，provideRenameEdits 返回最终更新文字和对应的位置信息。
Monaco 使用 ReferenceProvider
hawk2014bj的博客
07-29 255
Monaco ReferenceProvider 是指引用跳转，用户可以右键点击变量名称，可以跳转列表进行选择，选择之后跳转到对应位置的功能。通过 registerReferenceProvider 注册 ReferenceProvider 实现函数。实现 provideReferences 并返回可跳转位置。
【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在这里-要...
React 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 409
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
react中ref使用支持父调用子组件的方法
lwl12345678_的博客
11-05 338
【代码】react中ref使用支持父调用子组件的方法。
LangChain教程 - 创建 ReAct 风格智能代理
fenglingguitar的专栏
11-05 994
ReAct 框架，即 Reasoning and Acting（推理和行动），是一种让模型在处理复杂任务时通过推理逐步制定行动决策的模式。推理：逐步理解任务需求，制定行动计划。行动：在每个步骤中调用所需的工具（如 API、数据库），并基于反馈继续推理。这种模式尤其适合用于构建智能助手、问答系统等复杂应用，能让模型根据上下文灵活选择下一步操作。通过 LangChain 和 ReAct 框架，我们可以构建具备推理与行动能力的智能助手，让其能够逐步分解复杂任务并动态调用工具，为用户提供更智能的服务。
【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
止于至善
11-07 245
组件的实现其实没有太大的难度，就是最近看源码，看到了 React.Children.map 的实现，因此使用这个效果用一下；需要注意的是隐藏显示不要直接操作DOM的显示隐藏，因为DOM的改变会导致图片的重新加载，会出现闪动的效果，这是回流导致的图片重新加载；在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。
react动态路由
最新发布
m0_64455070的博客
11-08 379
在React应用中，动态路由（Dynamic Routing）通常指的是根据应用的状态或用户的交互来动态地显示或隐藏路由（页面或组件）。
React 探秘(四)：手撸 mini-react
qq_44983621的博客
11-05 790
至此我们就基本完成了一个简单的 mini-react，上面代码直接截取了关键代码，如果感兴趣的话可以结合下面源码进行本地调试。为我们的入口函数，传入组件和根节点，根据这两个数据初始化初始化我们的。，构建过程需要把 vdom 转化为 fiber ， 其中进行。架构，时间切片，双缓存等，接下来这篇文章实操实现一个。节点的构建，一直复该动作直到没有其他节点.这个阶段是不可暂停的, 采用递归的方式完成。上的存储也是以链表的数据结构存储，存储在。中，然后进行下一个工作循环，此时。，处理完所有的工作单元之后，进入。
【error】 react 控制台报错Invalid hook call
chirp_CQ的博客
11-06 284
导致这个的原因多半都是因为不同版本的react 导致的，我也遇到了，我在多次尝试后发现多半是因为我两个前端项目都同时在本地打开的情况下，webstorm识别到了两个项目的不同react版本。暂时的解决办法是将node_modules 给删除掉，然后重新执行。我的前端react + ant-design-pro项目能正常启动。，这将是对我很大的鼓励！若是对你有所帮助的话，希望能获得你的。
monaco-editor使用JSON
10-22
Monaco Editor是一个强大的富文本编辑器，它是由Microsoft开发的，并广泛用于JavaScript环境中。如果你想在Monaco Editor中使用JSON内容，你可以按照以下步骤操作： 1. 首先，在初始化Monaco Editor时，你需要指定`monaco.editor.create`函数的模式（mode）为`"json"`，这会告诉编辑器你正在处理的是JSON格式。例如： ```javascript const editor = monaco.editor.create(document.getElementById('editor'), { value: JSON.stringify({ yourInitialData }), // 初始化时的数据 language: 'json' }); ``` 2. 然后，你可以使用Monaco提供的API来解析、编辑和验证JSON数据。比如，`editor.getValue()`获取当前编辑的内容，`editor.setValue(jsonString)`设置新的JSON值。 3. 对于实时校验和高亮显示，Monaco提供了一个内置的JSON语言服务（JSON Language Server），可以在编辑过程中自动检测语法错误并高亮标记。 4. 如果需要实时监听内容变化并应用相应的逻辑，可以订阅`onDidChangeContent`事件： ```javascript editor.onDidChangeContent(() => { try { const json = JSON.parse(editor.getValue()); // 这里处理解析后的JSON数据 } catch (error) { console.error('Invalid JSON:', error); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值