Monaco Editor系列（七）代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置

2024-06-05 13:44
文章标签 配置 代码 使用 系列 键盘 完成 自动 事件 api 信息 指示器 触发 editor monaco codelens

本文主要是介绍Monaco Editor系列（七）代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：最近工作太忙了555，都没时间学习。端午节我要抽半天时间学习！（我自己都不信🤣）先总结一下下上一篇文章的知识点，我也忘得差不多了

  • Range类详解 Range类和IRange接口，Range类是基类，上面保存各种 range 相关的方法；IRange接口是开放给开发者的接口，传参的时候传 IRange接口类型的数据即可，这样传参就方便多了，里面只有关键的 range 的位置信息，起始位置和结束位置。两者可以相互转换。
  • 使用 monaco.editor.createModel() 方法，可以通过第三个参数 uri 设置语言。但是如果是自己开发，确定的语言，肯定就直接传了，目前没有发现这样传参很必要的使用场景。
  • monaco.Uri.parse() 将一个 url 地址，转换成 monaco 可用的 uri 标识。在 Monaco 编辑器中，Uri 经常用于表示打开的文件、编辑的文本或资源的位置。通过使用 Uri，可以在编辑器中准确地标识和操作这些资源。
  • monaco.editor.create(容器, 配置项) 通过第二个参数的minimap属性，可以配置 minamap 的配置项

这篇文章继续学习学习学习！我爱学习！

一、代码信息指示器CodeLens

1、简介

在使用 VS Code 编辑器的时候，如果你使用了 Git 版本工具，那么就会看到这样的效果
在这里插入图片描述

这一行文字用来提示修改代码的人员和修改时间，并且不会占据真正的代码行
蓝色的还可以点击进去查看更详细的信息
在这里插入图片描述
这一交互的实现就是通过 monaco 的代码信息提示器 CodeLens 实现的，显示的版本提交的内容是通过插件 Gitlen 实现的。
CodeLens 为代码提供辅助信息，并不真正存在在文件中，复制的时候不会复制到剪切板。前面学过的 markers 跟 CodeLens 有点像，都是帮助开发者理解代码，并且存在于编辑器外，通过人为手动设置的。
CodeLens 通常是一行信息，它是作用于语言模型的，也就是通过 monaco.languages 命名空间设置。

2、使用

使用 CodeLens 需要使用 monaco.editor.registerCodeLensProvider 方法注册一个 Provider
官网也给出了这个方法的示例
registerCodeLensProvider
参数一：LanguageSelector
还是看一下在源码中的定义
node_modules/monaco-editor-core/monaco.d.ts

export type LanguageSelector = string | LanguageFilter | ReadonlyArray<string | LanguageFilter>;export interface LanguageFilter {readonly language?: string;readonly scheme?: string;readonly pattern?: string | IRelativePattern;readonly notebookType?: string;/*** This provider is implemented in the UI thread.*/readonly hasAccessToAllModels?: boolean;readonly exclusive?: boolean;/*** This provider comes from a builtin extension.*/readonly isBuiltin?: boolean;
}

这个参数的写法有三种：
1、 字符串 'javascript'
2、LanguageFilter 类型的对象，如果你不想给所有的某种语言的文件都增加，就可以通过对象的方式，来匹配你想设置 CodeLens 的文件

{language: 'javascript',pattern: '**/*.js'
}

但是这个匹配规则，emm，通过这样的路径匹配的方式，看源码没看出来怎么匹配的，太难了，不如还是用字符串
3、第三种是可以传一个LanguageFilter 类型的对象数组

参数二：CodeLensProvider

export interface CodeLensProvider {onDidChange?: IEvent<this>;provideCodeLenses(model: editor.ITextModel, token: CancellationToken): ProviderResult<CodeLensList>;resolveCodeLens?(model: editor.ITextModel, codeLens: CodeLens, token: CancellationToken): ProviderResult<CodeLens>;
}

一个监听函数 onDidChange 监听 CodeLens 的改变
provideCodeLenses 用来构建 CodeLens 数组
resolveCodeLens 没看出来什么作用
CodeLens 接口定义也挺简单的

export interface CodeLens {range: IRange;id?: string;command?: Command;
}

指定 CodeLens 出现的范围，以及唯一标识id，和绑定的 command 自定义命令。command 需要使用咱们之前学过的 addCommand 生成，可以指定点击 CodeLens 时候执行的回调函数
假设屏幕前的您已经拥有了一个编辑器

var commandId = editor.addCommand(0,function () {alert('CodeLens被点击啦');},""
);
monaco.languages.registerCodeLensProvider("javascript", {provideCodeLenses: function (model, token) {return {lenses: [{range: {startLineNumber: 1,startColumn: 1,endLineNumber: 2,endColumn: 1,},id: "First Line",command: {id: commandId,title: "我是第一行",},},],};},
});

在这里插入图片描述
点它

在这里插入图片描述
CodeLens 类的 range 是必填的，CodeLens 是一个没有办法占据多行的东东，而且肯定是从一行的起始位置开始的，所以其实只有 startLineNumber 属性能影响它的位置；id 和 command 都不是必填的，但是如果要指定点击的回调函数，就必须要填 command 了。

二、使用API触发键盘事件

我们的鼠标右键有很多的命令，以及快捷键也绑定了很多命令，
在这里插入图片描述
除了直接通过点击事件触发，我们还可以通过调API触发这些命令的回调函数，有点类似于使用js触发DOM元素的点击事件 ele.click()。
手动触发命令有两种方法，

  • editor.trigger(source, handlerId) 第一个 source 是自己定义的一个字符串
  • 先使用 editor.getAction(actionId) 获取 action 实例，然后再使用 action 的 run() 方法执行对应的回调函数。
addAction()
function addAction() {editor.addAction({// 不能重复id: 'bomb',// 展示在菜单中的文本label: 'Didara Bomb',// 快捷键keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,// 组合按键monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM)],// 前提条件 String// 暂时只找到这一个例子，判断编辑器语言是不是 javascriptprecondition: "editorLangId == 'javascript'",// 绑定快捷键的规则keybindingContext: "editorLangId == 'javascript'",// 指定操作应显示在上下文菜单的哪个组中 navigation表示默认组contextMenuGroupId: 'navigation',// 操作在菜单中的显示顺序contextMenuOrder: 1.5,// 操作执行的方法// @param editor ed.getPosition() 获取焦点坐标run: function (ed) {alert("艺术就是💣💣💣💣💥💥💥💥" + ed.getPosition());}});
}setTimeout(() => {editor.trigger('bomb', 'bomb')
}, 1000)
setTimeout(() => {const action = editor.getAction('bomb')action.run()
}, 2000)

我这里是自定义了一个命令，然后通过延时器触发了两次这个命令。对于内置命令也可以这样触发
内置命令有 154 个，根据学习大佬的文章得知这些命令在editor实例的_actions里面保存着
在这里插入图片描述
真的是，深似海，关键是文档太粗糙🤓🤓🤓
而且还不能直接打印 console.log(editor._action)，这样子的结果是 undefined，大概因为加横线的属性是私有属性
例如要手动触发字号放大

setTimeout(() => {editor.trigger('fontZoomIn', 'editor.action.fontZoomIn')
}, 1000)

或者

setTimeout(() => {editor.getAction('editor.action.fontZoomIn').run()
}, 1000)

三、自动完成配置

这一节讲的就是自动补全相关的配置项
monaco 官网提供的有自动补全配置项的相关案例 completion-provider-example
自动补全也在 Languages 命名空间的统治范围内

export function registerCompletionItemProvider(languageSelector: LanguageSelector, provider: CompletionItemProvider): IDisposable;

第一个参数和上面的 CodeLens 设置的时候传的一样，我们用的话，传递字符串就够用了
第二个参数的定义也和CodeLens传的第二个参数很类似

export interface CompletionItemProvider {triggerCharacters?: string[];provideCompletionItems(model: editor.ITextModel, position: Position, context: CompletionContext, token: CancellationToken): ProviderResult<CompletionList>;resolveCompletionItem?(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem>;
}

其中配置的关键就是 provideCompletionItems 方法
接收的参数：
model：当前语言模型
position：当前光标的位置
context：自动完成的上下文
返回的 CompletionItem 的定义也和 CodeLens 定义很类似

export interface CompletionList {suggestions: CompletionItem[];incomplete?: boolean;dispose?(): void;
}

所以在这个方法里，我们主要的任务就是构建 CompletionList 数组，然后返回出去
关键的属性就是 suggestions，它是 CompletionItem 组成的数组，这个接口的定义有一丢丢的复杂，属性稍微有一丢丢多

export interface CompletionItem {/*** 展示在自动补全列表中的文本*/label: string | CompletionItemLabel;/*** 类型，决定显示的图标 可选项：monaco.languages.CompletionItemKind 枚举值*/kind: CompletionItemKind;/*** 枚举值CompletionItemTag 只有一个选项 如果设置了表示废弃，自动补全元素上会出现划线*/tags?: ReadonlyArray<CompletionItemTag>;/*** 提供信息的字符串，会出现在选项的最右侧，如果没设置，就显示右箭头*/detail?: string;/*** 选型的详细描述，字符串或者markdown 点击右箭头或者 detail显示出来*/documentation?: string | IMarkdownString;/*** 用来调整顺序的字符串 如果设置为 falsy，那么顺序会往后排，默认的顺序是数组定义的顺序*/sortText?: string;/*** 用来筛选当前选项是否可用，如果设置为 falsy，则不会显示*/filterText?: string;/*** 预设 布尔值 如果设置为true，那么就会被默认选中，此时直接回车就直接应用了*/preselect?: boolean;/*** 实际插入的代码*/insertText: string;/*** 插入时额外的规则 枚举值 KeepWhitespace(自动调整插入文本的缩进) InsertAsSnippet(将insertText当做片段插入)*/insertTextRules?: CompletionItemInsertTextRule;/*** 自动补全的位置*/range: IRange | CompletionItemRanges;/*** 是一个数组，里面元素是单个字符，当选中选项的时候，再输入这几个指定的字符，就会插入insertText，并且将制定字符加到后面* 默认的选中按键是enter，这几个区别是还会将字符加到后面*/commitCharacters?: string[];/*** 选中时自动追加多行内容*/additionalTextEdits?: editor.ISingleEditOperation[];/*** 选中后执行的回调*/command?: Command;
}

  • label与detail
    在这里插入图片描述

  • kind
    在这里插入图片描述

  • documentation
    在这里插入图片描述

  • tags: [monaco.languages.CompletionItemTag.Deprecated]
    在这里插入图片描述

  • preselect: true，对应的选项会自动被选中
    在这里插入图片描述

  • commitCharacters: ['a', 'b','c']
    先选中对应选项
    在这里插入图片描述
    然后按下按键a
    在这里插入图片描述

  • additionalTextEdits
    如图想在开头插入代码，它会直接插入到指定位置，但是还需要自己换行

在这里插入图片描述

  • command 配置选中选项后的回调 但是不能是自定义的
export interface Command {id: string;title: string;tooltip?: string;arguments?: any[];
}

通过 id 指定 monaco提供的命令
例如添加代码后立马注释

command: {id: 'editor.action.commentLine',title: '注释选中的行',
}

自动补全配置代码：

function createDependencyProposals(range) {return [{label: 'monaco',kind: monaco.languages.CompletionItemKind.Reference,  // 控制图标documentation: "定义一个不能修改的常量",  // 点击右侧按钮出现在下边，详细说明detail: '我是detail属性',  // 出现在选项的最右侧，几个字的内容insertText: 'console.log("monaco可真是太好用了")',  // 实际插入的代码range: range,  // 范围// tags: [monaco.languages.CompletionItemTag.Deprecated],  // 出现划线，表示不建议preselect: true, // 预选中// filterText: 'falsy',  // 不显示insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace, // 插入的规则 InsertAsSnippet：作为代码块插入；KeepWhitespace：插入后自动格式化commitCharacters: ['a', 'b','c'], // 选中后输入这几个字符，自动插入代码和字符// additionalTextEdits: [//     {//         range: {//             startLineNumber: 1,//             startColumn: 1,//             endLineMumber: 1,//             endColumn:1//         },//         text: '// 这是一行额外加进来的代码',//         forceMoveMarkers: true,//     }// ],command: {id: 'editor.action.commentLine',title: '注释选中的行',}},];
}monaco.languages.registerCompletionItemProvider("javascript", {provideCompletionItems: function (model, position) {var word = model.getWordUntilPosition(position);var range = {startLineNumber: position.lineNumber,endLineNumber: position.lineNumber,startColumn: word.startColumn,endColumn: word.endColumn,};return {suggestions: createDependencyProposals(range),};},
});

本篇文章主要介绍了三个功能
CodeLens 代码信息提示器的配置和自动补全配置很类似，都是隶属于 languages 命名空间，从函数名上看，都是通过注册 Provider 的方式，增加配置，里面传参也很类似，第一个参数都是语言，第二个是配置项
CodeLens 和 Markers 很类似，都是提供代码提示的，帮助开发者更好的理解代码，但是 Markers 是鼠标浮动到代码上才会出现，并且可以显示的内容比较多，CodeLens 直接显示在代码里面，占据独立一行，但是不占用行号，复制时不会被复制到剪切板中。
自动补全配置很厉害，可以自定义菜单中显示的名称和位置、插入的代码、插入后的回调函数等等。
使用API触发键盘事件或者命令比较简单，一个是使用 monaco.editor.trigger()，指定要触发的命令的id；一个是先获取 action，调用action.run() 方法。

这篇关于Monaco Editor系列（七）代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1033222。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2