Monaco 使用 ImplementationProvider

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

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
hawk2014bj
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Monaco 使用 SemanticTokensProvider
hawk2014bj的博客
07-21 344
Monaco 中可以对关键字进行高亮的自定义，通过提供关键字位置信息和关键字颜色进行实现，先看一下效果，这里自定了 zzz 为关键字，背景色为绿色。通过 registerDocumentSemanticTokensProvider 进行注册。
Monaco 使用 HoverProvider
hawk2014bj的博客
07-22 269
Monaco 中自定义 Hover，Hover 效果是指当鼠标移动文字上展示出提示效果，就像页面上的 Tooltip 效果。通过 registerHoverProvider 注册 Hover 触发时的处理方法。返回 Hover 内容和 Hover 显示位置。接口中提供了 4 个参数，前两个参数比较重要。
Monaco 使用 RenameProvider
hawk2014bj的博客
07-30 174
Monaco 重命名是编辑器标配，可以重命名变量名称。重命名包括两部分，首先是列出 Rename 的名称，第二步是重命名后文字和对应位置信息，用于替换。先看一下效果：通过 registerRenameProvider 注册 RenameProvider 的处理函数。右键变量名称点击重命名，resolveRenameLocation 返回名称，provideRenameEdits 返回最终更新文字和对应的位置信息。
Monaco 使用 InlineCompletionsProvider
hawk2014bj的博客
07-07 352
AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。在调用的后端的时候，要用节流，请求就太多了，模型受不了。
Monaco 使用 DocumentFormattingEditProvider
hawk2014bj的博客
07-16 150
在 Monaco 通过 registerDocumentFormattingEditProvider 方法注册处理函数，实现 provider 方法。代码实现如下，如果要格式化代码，需要做代码解析，生成语法树，并进行换行等处理。这里只是个简单的示例。文档格式化，是 VSCode 比较常用的功能，在文档上点击右键选择格式化文档。有需要的同学可以参考 Prettier 的 Html Formatter。TextEdit 包含两个字段：格式化后的代码和代码区域。provider 方法返回格式化好的代码。
Monaco 使用 ReferenceProvider
hawk2014bj的博客
07-29 215
Monaco ReferenceProvider 是指引用跳转，用户可以右键点击变量名称，可以跳转列表进行选择，选择之后跳转到对应位置的功能。通过 registerReferenceProvider 注册 ReferenceProvider 实现函数。实现 provideReferences 并返回可跳转位置。
Monaco 使用 CompletionItemProvider
hawk2014bj的博客
07-13 404
Monaco 中 CompletionItemProvider 为代码进行提示时提供数据，和很相似只是显示方式不一样，一个是行内一个是弹框。先看一下显示效果：provideCompletionItems 需要实现两个方法。
Monaco 使用 CodeActionProvider
hawk2014bj的博客
07-09 182
Monaco 中的 CodeAction 会在当前代码行上方添加一个💡，点击💡时出现一个命令列表，名列列表可以点击，在 VSCode 中很常见的就是代码出现问题，点击会给出修改建议。CodeActionProvider 中，实现 provideCodeActions，定义 CodeAction 并返回。
Monaco 使用 OnTypeFormattingEditProvider
hawk2014bj的博客
07-28 175
首先需要自定义需要配置的语言，例如 mySpecialLanguage。
【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在这里-要...
vue ref和reactive区别
最新发布
灰海
08-25 401
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
react面试题二
笃励的博客
08-23 604
React组件的生命周期方法提供了在不同阶段执行特定操作的能力，使得开发者可以在组件的不同生命周期中管理状态、执行副作用操作，并且优化性能和处理错误。在实际开发中，理解和正确使用这些生命周期方法是构建可靠和高效React应用的重要基础。请注意，随着React版本的更新，部分生命周期方法可能已被废弃或替换，因此建议查阅最新的React文档以获取最准确的信息。
React 入门第一天：从Vue到React的初体验
Caleb的博客
08-21 581
作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。
ReactVChart矩形转化漏斗图配置示例
知识点沉淀包括不限于前端
08-22 399
ReactVChart 矩形转化率 漏斗图 示例
react面试题五
笃励的博客
08-24 929
在React中，高阶组件（High-Order Components, HOCs）和Hooks是两种强大的特性，它们用于重用组件逻辑。尽管它们的目的相似，但它们在实现和使用方式上有所不同。高阶组件是一个函数，这个函数接收一个组件并返回一个新的组件。这个新的组件可以包含原组件的所有功能，并且还可以添加额外的功能或修改原组件的行为。HOC本质上是一个纯函数，没有副作用，它只接收组件作为参数并返回一个新的组件。特点：用途：示例： Hooks Hooks是React 16.8中引入的，允许你在不编写类的情况下使用状
react面试题三
笃励的博客
08-23 1112
当React组件的状态（state）或属性（props）发生变化时，React会重新计算并生成新的虚拟DOM树。React的虚拟DOM（Virtual DOM）是React框架中的一个核心概念，它是对真实DOM的一种轻量级内存表示。综上所述，props和state在React中各自扮演着不同的角色。总之，虚拟DOM是React性能优化的关键所在，它通过减少不必要的DOM操作，提高了应用的性能和效率。React中的props和state是两个核心概念，它们在组件的数据管理和通信中扮演着不同的角色。
vue使用monaco editor
05-12
要在Vue项目中使用Monaco Editor，可以使用Vue组件库vue-monaco。首先，安装vue-monaco： ``` npm install --save vue-monaco ``` 然后，在需要使用Monaco Editor的Vue组件中引入vue-monaco： ```javascript <template> <div> <vue-monaco :originalCode="code" @change="onCodeChange" /> </div> </template> <script> import VueMonaco from 'vue-monaco' export default { components: { VueMonaco }, data() { return { code: '// Your code here' } }, methods: { onCodeChange(newCode) { this.code = newCode } } } </script> ``` 在上面的代码中，我们使用`vue-monaco`组件，并将`originalCode`属性设置为初始代码。我们还定义了一个`change`事件处理程序，以便在代码更改时更新`code`数据属性。 注意，这只是一个简单的示例，你可能需要根据自己的需求进行更改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值