Monaco 使用 LinkProvider

最新推荐文章于 2025-12-28 01:00:43 发布

hawk2014bj

最新推荐文章于 2025-12-28 01:00:43 发布

阅读量322

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Monaco Editor 使用文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/hawk2014bj/article/details/140688122

Monaco Editor 使用专栏收录该内容

26 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Monaco 中 LinkProvider 将文件中的文字标记成链接效果，效果如下：
在这里插入图片描述
通过 registerLinkProvider 注册 LinkProvider

在这里插入图片描述
实现 Provider 方法，并返回 LinkList

返回链接信息

代码实现如下

export function linkProvider(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor){
  return  monaco.languages.registerLinkProvider('javascript', {
    provideLinks(model: monacoEditor.editor.ITextM

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hawk2014bj

关注关注

3
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Monaco 使用 LinkedEditingRangeProvider

hawk2014bj的博客

07-26

354

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

Monaco 使用 InlineCompletionsProvider

hawk2014bj的博客

07-07

703

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

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

Monaco Editor系列（十三）给静态文本添加高亮

weixin_45855469的博客

03-09

1056

前言：在一些富文本编辑器中，我们可能会想插入一段代码，但是只用于展示用途，只需要给代码高亮就可以，这个时候就不需要创建一个新的 Monaco Editor 实例，Monaco提供的有让静态文本按照特定语言高亮的API。

代码编辑器 monaco editor

zhangxinrongr的博客

04-26

642

如果你不认识它，但我想你一定认识 vscode，你把它当做 vscode的编辑器即可，并且是开源的。Monaco Editor 是由 Microsoft 开发的一款基于 Web 技术的开源代码编辑器，它是 Visual Studio Code 编辑器的核心。Monaco Editor 可以嵌入到网页中，提供类似于 Visual Studio Code 的编辑体验。

探索 Monaco Editor：Web 开发的新一代代码编辑器

gitblog_00062的博客

03-19

751

是由微软开发的一款开源的、高性能的 Web 代码编辑组件。这个项目旨在为现代 web 应用提供一个功能强大且易用的代码编辑解决方案，尤其在在线编码环境、IDE 集成和代码审查工具中表现突出。 ## 项目简介 Monaco Editor 的设计灵感来源于流行的 Visual Studio Code 编辑器，它提供了许多高级特性，如语法高亮、自动完成功能、代码折叠、实时错误检查等。由于其轻量级的架...

Monaco 使用 SemanticTokensProvider

hawk2014bj的博客

07-21

548

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

Monaco 使用 CodeActionProvider

hawk2014bj的博客

07-09

418

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。

【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 import.meta.env 讲解

Violet_YSWY的博客

12-25

406

VITE_

计算机毕业设计|基于springboot + vue健康茶饮销售管理系统(源码+数据库+文档)

12-24

867

本文介绍了基于SpringBoot+Vue的健康茶饮销售管理系统开发。系统采用前后端分离架构，后端使用SpringBoot框架简化配置，前端采用Vue实现组件化开发，数据库选用MySQL。文章详细说明了系统设计原则、技术选型理由，并提供了代码示例和测试案例。系统功能完整，包含商品管理、用户认证等模块，通过严格测试确保安全性。文末附有源码获取方式和最新毕设选题推荐，适合作为计算机专业学生的项目参考。

vue v-for 列表渲染指令注意

KLW75

12-27

119

3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。

【计算机毕业设计】SyChat 即时通讯系统 - Springboot+Vue

m0_69594200的博客

12-26

913

SyChat是一款基于SpringBoot+Vue的现代化即时通讯系统，采用前后端分离架构。系统实现了实时聊天、好友管理、朋友圈动态等核心功能，支持私聊、群聊、消息历史记录保存等功能。技术栈包括Spring Boot、WebSocket、MyBatis-Plus、Vue.js和Element UI等。项目亮点包括毫秒级消息推送、完善的社交生态闭环、消息可靠性保障以及良好的用户体验设计。数据库设计包含用户、好友关系、消息记录等10余张核心表。该系统适合作为计算机专业毕业设计，展示了完整的Web开发流程和技术实

前端性能优化常见面试问题汇总

LYFlied的博客

12-23

979

本文总结了前端性能优化的常见面试问题，主要包括网络加载与渲染优化两方面。在网络优化部分，详细解析了Web Vitals核心指标（LCP、FID/INP、CLS）的优化方案，以及减少HTTP请求和缓存策略的最佳实践。在渲染优化部分，阐述了浏览器关键渲染路径、重排重绘的避免方法，并介绍了代码分割的多种实现方式。文章提供了具体的技术方案和优化原则，涵盖从资源加载到页面渲染的全流程性能提升要点。

electron运行项目better-sqlite3连接失败的问题，ABI版本不匹配，使用使用 electron-rebuild 重新编译

最新发布

qq_51389137的博客

12-28

630

为解决better-sqlite3连接失败，错误如下，是编译版本的事情，使用electron-rebuild。//npx electron-rebuild报错信息如下。

基于java + vue个人博客系统(源码+数据库+文档)

JIngJaneIL的博客

12-25

594

本文介绍了一个基于SpringBoot+Vue的个人博客系统开发方案。系统采用前后端分离架构，后端使用SpringBoot框架简化配置并提供RESTful API，前端采用Vue.js实现响应式界面。数据库选用MySQL存储数据，系统具备完善的用户认证、文章管理等功能。文章详细说明了技术选型理由，包括各框架的核心优势，并提供了功能演示、代码示例和测试方案。此外还包含毕设选题推荐和源码获取方式，适合作为大学生毕业设计参考项目。系统设计遵循用户体验原则，确保界面友好性和操作一致性。

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]。