Monaco 使用 TypeDefinitionProvider

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

Monaco 中的 TypeDefinitionProvider 和 ImplementationProvider、DefinitionProvider 类似，右键点击变量名称，现在 “选择转到类型定义”， 跳到指定位置。

在这里插入图片描述
通过 registerTypeDefinitionProvider 添加 TypeDefinitionProvider 处理方法
在这里插入图片描述
实现 provideTypeDefinition 并返回 Definition
在这里插入图片描述
Definition 中定义了跳转位置

在这里插入图片描述

代码实现如下


export function typeDefinitionProvider(
  editor: monacoEdito
了解本专栏 订阅专栏 解锁全文 超级会员免费看
hawk2014bj
关注
专栏目录
订阅专栏
Monaco 使用 DefinitionProvider
hawk2014bj的博客
07-11 283
DefinitionProvider 可以弹出方法定义，效果如下，按住 command + 鼠标左键，弹出方法说明。点击时 Monaco Editor 会调用注册函数，注册函数返回文件地址和需要显示的位置，实现代码如下。返回对象 Location， 包含显示文件以及位置信息。
Monaco 使用 SemanticTokensProvider
hawk2014bj的博客
07-21 404
Monaco 中可以对关键字进行高亮的自定义，通过提供关键字位置信息和关键字颜色进行实现，先看一下效果，这里自定了 zzz 为关键字，背景色为绿色。通过 registerDocumentSemanticTokensProvider 进行注册。
【UmiJS项目】react-monaco-editor代码编辑器的安装与使用
一只正在狂飙的肥兔
05-14 3828
UmiJS+React+TS，react-monaco-editor代码编辑器的安装与基本使用，UmiJS代码高亮配置（monaco-editor-webpack-plugin），自定义高亮语言实现
VSCode插件开发全攻略（五）跳转到定义、自动补全、悬停提示
weixin_34080903的博客
10-15 6662
更多文章请戳VSCode插件开发全攻略系列目录导航。 跳转到定义 跳转到定义其实很简单，通过vscode.languages.registerDefinitionProvider注册一个provider，这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转，并且跳转到对应location。 为了示例更加有意义，我在这里写了一个支持package.j...
Monaco 使用 HoverProvider
hawk2014bj的博客
07-22 404
Monaco 中自定义 Hover，Hover 效果是指当鼠标移动文字上展示出提示效果，就像页面上的 Tooltip 效果。通过 registerHoverProvider 注册 Hover 触发时的处理方法。返回 Hover 内容和 Hover 显示位置。接口中提供了 4 个参数，前两个参数比较重要。
Monaco 使用 CodeActionProvider
hawk2014bj的博客
07-09 226
Monaco 中的 CodeAction 会在当前代码行上方添加一个💡，点击💡时出现一个命令列表，名列列表可以点击，在 VSCode 中很常见的就是代码出现问题，点击会给出修改建议。CodeActionProvider 中，实现 provideCodeActions，定义 CodeAction 并返回。
Monaco 使用 InlineCompletionsProvider
hawk2014bj的博客
07-07 441
AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。在调用的后端的时候，要用节流，请求就太多了，模型受不了。
Monaco 使用 DocumentFormattingEditProvider
hawk2014bj的博客
07-16 200
在 Monaco 通过 registerDocumentFormattingEditProvider 方法注册处理函数，实现 provider 方法。代码实现如下，如果要格式化代码，需要做代码解析，生成语法树，并进行换行等处理。这里只是个简单的示例。文档格式化，是 VSCode 比较常用的功能，在文档上点击右键选择格式化文档。有需要的同学可以参考 Prettier 的 Html Formatter。TextEdit 包含两个字段：格式化后的代码和代码区域。provider 方法返回格式化好的代码。
【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在这里-要...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 418
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 157
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 760
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
m0_62388400的博客
11-12 1163
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
从零开始快速构建Vue3项目
欧唯薇
11-13 863
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
网页作业9
最新发布
小派蒙的博客
11-15 407
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
Vue常用加密方式
m0_51431448的博客
11-13 126
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 445
nuxt
monaco-editor使用JSON
10-22
如果你想在Monaco Editor中使用JSON内容，你可以按照以下步骤操作： 1. 首先，在初始化Monaco Editor时，你需要指定`monaco.editor.create`函数的模式（mode）为`"json"`，这会告诉编辑器你正在处理的是JSON格式。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值