Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能（python和sql为例）～持续更新

最新推荐文章于 2024-07-27 09:01:58 发布
最新推荐文章于 2024-07-27 09:01:58 发布
阅读量1.8k 收藏
点赞数
分类专栏： 面试 学习路线 阿里巴巴 文章标签： android 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sebeefe/article/details/126064752
版权
本文记录Vue3中使用Monaco Editor实现主动触发的Python和SQL代码补全功能。通过registerCompletionItemProvider函数，结合Monaco Editor提供的示例，解决了仅识别数组第一个字符的问题，成功实现简单代码补全。文章详细介绍了实现过程，并展示了效果。
摘要由CSDN通过智能技术生成

Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能～持续更新

近期因为毕设的原因，需要使用代码编辑器，我采用monaco-editor代码编辑器

前端框架使用Vue3 + elementUI
monaco-editor插件版本@0.30.1
monaco-editor-webpack-plugin插件版本@6.0.0

若还没有安装插件，具体安装步骤和一些基础使用可以查看上一篇Vue3中使用Monaco Editor代码编辑器记录～持续更新

主动触发代码补全Completion

此处以python和sql自动补全为例进行说明

1. registerCompletionItemProvider函数

monaco-editor提供了代码自动补全的函数registerCompletionItemProvider，其参数如下。可以看到有两个参数，分别是languageId和provider

export function registerCompletionItemProvider(la
最低0.47元/天 解锁文章
sebeefe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3使用Monaco-editor
m0_51431448的博客
11-01 5106
Monaco-editor，一个vs code 编辑器，需要将其继承到项目。不说闲话了，直接上代码。
vue实现codemirror代码编辑器中的SQL代码格式化功能
12-10
vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter 2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter"; 3、接...
vue3+ts 使用vue3-ace-editor实现Json编辑器
x_nweBorder01k的博客
06-19 881
vue3+ts 使用vue3-ace-editor实现Json编辑器
vue3 使用 monaco-editor 自定义代码补全。
yyXieDaiMa的博客
04-17 6433
*** 注册：自定义语法补全* @param language 语言类型* @param constValues 常量提示*/// 获取当前行数// 获取当前列数// 获取当前输入行的所有内容// 通过下标来获取当前光标后一个内容，即为刚输入的内容label: e,detail: '常量配置',}))//拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展// 直接提示，以下为sql语句关键词提示label: e, // 显示的提示内容。
vue3使用monaco-editor组件
weixin_49684489的博客
08-23 3121
/ 行号 取值： "on" | "off" | "relative" | "interval" | function。// 辅助功能支持 "auto" | "off" | "on"// 是否一直显示折叠 always | mouseover。// 折叠方式 auto | indentation。// 使用 - 创建 monacoEditor 对象。//是否只读 取值 true | false。// 行号最小字符 number。// 滚动完最后一行后再滚动一屏幕。//获取编辑器中的文本。
Vue3使用Monaco Editor实现python编辑器
qq_53485256的博客
02-27 1389
​微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
本文将详细介绍如何使用`codemirror`插件在Vue中创建一个具备代码高亮显示和自动提示功能的代码编辑器。 首先，我们需要通过npm安装`codemirror`依赖库，命令如下： ```bash npm install --save codemirror ``` ...
vue中实现Monaco Editor自定义提示功能
10-16
在Vue中实现Monaco Editor的自定义提示功能，主要涉及到Monaco Editor的API和Vue组件的结合使用。Monaco Editor是一款强大的Web代码编辑器，源自微软的VSCode项目，为浏览器环境提供了类似于VSCode的代码编辑体验。...
vue3+vite使用Monaco-editor
Yajyaj123的博客
05-01 1018
安装Vite Plugin Monaco Editor。安装Monaco-editor。
vue3+vite+ts使用monaco-editor编辑器
热门推荐
weixin_43909743的博客
11-01 1万+
vue3+vite+ts使用monaco-editor编辑器
vue-monaco：Vue.js的MonacoEditor组件
02-06
维摩纳哥 是支持VS Code的代码编辑器，由于此项目，现在可以作为Vue组件<MonacoEditor> 。 安装 npm install vue-monaco 要么 yarn add vue-monaco 用法 将ESM版本与Webpack一起使用 使用 ： // webpack.config.js const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' ) module . exports = { plugins : [ new MonacoEditorPlugin ( { //
vue-monaco-editor:摩纳哥编辑Vue组件
04-21
Vue-摩纳哥编辑 摩纳哥编辑Vue组件
Vue3，使用monaco-editor实现sql对比编辑器，自定义高亮
weixin_47239456的博客
04-07 2011
vue3，实现 monaco.editor对比
monaco-editor编辑器使用方法（vue3实现）
m0_46394444的博客
12-01 1909
monaco-editor编辑器使用方法（vue3实现）
在vue项目中使用monaco-editor
weixin_33852020的博客
08-03 3412
monaco-editor：https://github.com/Microsoft/monaco-editor 在ESM中的使用官方也有对应文档：https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md 现基于vue-cli2的项目做具体步骤说明： 1. 安装： cnpm install...
Vue3 基本使用 Monaco Editor Web编辑器 202407
最新发布
weixin_67711401的博客
07-27 314
Vue3 简单使用 Monaco Editor 教程和其他使用教程
vue3 微软开源组件 monaco-editor demo
weixin_43601701的博客
05-12 1868
页面正常展示，但是在执行getValue获取编辑器中的数据的时候，页面却卡死了？在组合式API中，我们使用了ref将值包装为响应式对象，使用toRaw获取原始值，并使用onMounted和onBeforeUnmount分别在挂载和卸载前释放编辑器。问题：vue3 使用了 选项式api来编写代码，页面正常展示但是在执行 getValue 获取编辑器中的数据的时候 页面 monaco-editor 卡死；现在，您可以使用这个方法来快速获取和使用编辑器中的文本，解决开发过程中的痛点。
vue3+vite使用monaco-editor编辑器
weixin_44440116的博客
09-13 3703
基于vue3+vite封装monaco-editor编辑器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值