Monaco 使用 CompletionItemProvider

最新推荐文章于 2025-08-26 07:45:58 发布
最新推荐文章于 2025-08-26 07:45:58 发布
阅读量1k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Monaco Editor 使用 文章标签： monaco react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hawk2014bj/article/details/140404448

Monaco 中 CompletionItemProvider 为代码进行提示时提供数据，和 InlineCompletionsProvider 很相似只是显示方式不一样，一个是行内一个是弹框。先看一下显示效果：

在这里插入图片描述
provideCompletionItems 需要实现两个方法

  • provideCompletionItems：返回 CompletionItem[]; 穿线 弹出框中的信息
  • resolveCompletionItem：选中item 时可以添加更多信息，这个方法是可选的，可以 provideCompletionItems 提供，如果有需要额外处理逻辑，可以在这个方法中实现。
    在这里插入图片描述
    提示项详情：
    在这里插入图片描述

代码实现


export function itemCompl
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Monaco Editor教程（十九）：编辑器自动完成建议项CompletionItem的配置详解
知无涯
11-28 4558
详细讲解monaco editor中的自动补全配置，所有配置参数，completionitem参数详细解释。自定义自动完成规则。提升编辑用户体验。交互能力。
Monaco 使用 InlineCompletionsProvider
hawk2014bj的博客
07-07 700
AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。在调用的后端的时候，要用节流，请求就太多了，模型受不了。
智能代码补全：Completion Item Provider 实现原理
最新发布
gitblog_00105的博客
08-26 1113
智能代码补全：Completion Item Provider 实现原理 【免费下载链接】vscode-extension-samples Sample code illustrating the VS Code extension API. ...
monaco-editor新增自定义代码补全规则
热门推荐
川流不息
07-16 1万+
在monaco自带的javascript代码补全基础上添加自定义代码补全规则 import * as monaco from 'monaco-editor' import vCompletion from './libs/custom-completion' import sqlBuilder from './libs/sqlBuilder' // 方法一 monaco.languages.registerCompletionItemProvider('javascript', { provid.
记录VS Code插件开发过程——补全颜色代码的插件。
Falwyuki的博客
06-06 3368
记录我学习开发VS Code插件的过程，实现一个能自动补全颜色代码的插件。
关于monacoEditor--registerCompletionItemProvider的一些问题
qq_15686015的博客
03-15 2667
最近在搞一个在线python编辑代码的功能，因为平时都在用vscode在码代码所以就用了monacoEditor作为在线代码的库。目前为止遇到的问题都来自于自动完成建议项这功能，在这里记录下方便以后查看，有遇见类似问题的朋友也可以参考下。
Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能（python和sql为例）～持续更新
weixin_43977534的博客
03-29 1万+
Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能，本文主要以python和sql为例，extending-language-services-completion-provider-example
【JavaScript源代码】JS代码编译器Monaco使用方法.docx
12-30
在本文中，我们将探讨如何使用Monaco Editor来实现这些功能。 首先，Monaco Editor支持多种编程语言，包括JavaScript，它还提供了一个缩略地图功能，方便开发者快速定位代码。尽管其体积相对较大，但提供的功能强大...
Monaco 使用 OnTypeFormattingEditProvider
hawk2014bj的博客
07-28 319
首先需要自定义需要配置的语言，例如 mySpecialLanguage。
精选资源
用于 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在这里-要...
使用 Monaco Editor 的一些总结
JinSo 的博客
12-25 1762
最近因为需要实现一个在线代码的需求，所以研究了相关的内容，其中最主要的就是编辑器相关的内容 对于 monaco 编辑器的选择，我使用了 `@monaco-editor/react` 库
vue3 monaco-editor 代码提示 提示重复问题
gh313287387的博客
05-15 1315
解决方法2:销毁时使用。
现一个智能的SQL编辑器
程序员辰风的博客
11-07 4538
Monaco Editor 提供了方法，用来自定义 language/***/id: string;extensions?: string[];filenames?: string[];: string[];firstLine?: string;aliases?: string[];mimetypes?: string[];: Uri;第一步，我们需要注册一个 language， 配置项中 id 对应的就是语言名称（其他配置项可以暂时不填），这里自定义的 language 名为。
Monaco-editor使用指南，遇到问题详解
Brilliant Me 的博客
02-15 4806
monaco-edtor使用详解，以及我自己开发的时候遇到的问题
解决 Monaco Editor 添加自定义提示后导致内置单词消失问题
qq_17209641的博客
10-22 2533
像这样添加自定义提示后，内置单词提示消失了 this.monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems: function(model, position) { // var textUntilPosition = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 1, e
微软开源在线代码编辑器,编辑器天花板之Monaco Editor
qq_37440870的博客
08-27 4314
微软开源在线代码编辑器,微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器
Monaco Editor自定义语言
hbshhb的博客
11-26 6523
Monaco Editor 使用 安装与引入 npm install monaco-editor import * as monaco from "monaco-editor"; 在Vue中使用 <template> <!-- <div ref="container" style="height: 100%; width: 100%"></div> --> <div ref="container" style="width: 100vw; h
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]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值