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

最新推荐文章于 2025-06-09 15:29:24 发布

全园最晚睡第一名

最新推荐文章于 2025-06-09 15:29:24 发布

阅读量1.1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue3踩坑记文章标签： vue.js vue python sql 编辑器

本文链接：https://blog.csdn.net/weixin_43977534/article/details/123829943

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(languageId: string, provider: CompletionItemProvider): IDisposable;

具体使用：

monaco.languages.registerCompletionItemProvider('python', {
   
   
	// provideCompletionItems有四个参数model、position、context、token，可根据需要使用
	provideCompletionItems: function (model, position, context, token) {
   
   
		// ......
	},
});

2. 踩坑

一开始，我百度之后是这样写的：

// 创建python代码提醒
monaco.languages.registerCompletionItemProvider('python', {
   
   
	provideCompletionItems: function () {
   
   
		// ......
	},
	triggerCharacters: [':', 'F', 'i']