如何在运行时为Monaco Editor添加自定义关键字消除错误高亮
monaco-kusto 消除
_startTime/_endTime占位符错误高亮方案 ADX 原生编辑器没有使用自定义构建的Kusto库,也不是依赖Monaco核心的自定义关键字能力,是在Kusto语言服务层提前注入了两个全局占位符的定义,直接用monaco-kusto暴露的原生API就能实现同等效果,不需要修改依赖源码。
具体实现方式
- 优先方案:通过语言服务配置注入全局变量
初始化monaco-kusto语言服务时,在配置项中添加全局变量列表,将两个占位符注册为合法的datetime类型常量,注册后语法服务会自动识别这两个名称,不会再触发未定义变量的错误高亮,示例代码:
import * as monaco from 'monaco-editor'; import { KustoLanguageService } from 'monaco-kusto'; const kustoService = new KustoLanguageService({ // 项目里原有Kusto服务配置保持不变,比如集群连接、数据库权限配置等 globalVariables: [ { name: '_startTime', type: 'datetime', isConstant: true }, { name: '_endTime', type: 'datetime', isConstant: true } ] }); // 后续将kustoService绑定到Monaco编辑器实例的逻辑沿用原有代码即可
这种方式的效果和ADX原生编辑器完全一致:两个占位符会被识别为datetime类型常量,除了消除错误高亮之外,还能正常触发类型校验,比如给占位符传入非时间类型值时会正常报类型错误。
- 兼容方案:旧版本无全局变量配置时过滤诊断错误
如果你用的monaco-kusto版本较低,没有暴露globalVariables配置项,可以直接通过Monaco的标记过滤能力,拦截针对这两个占位符的未定义报错:
monaco.languages.onLanguage('kusto', () => { monaco.editor.onDidCreateModel((model) => { if (model.getLanguageId() !== 'kusto') return; const updateMarkers = () => { const allMarkers = monaco.editor.getModelMarkers({ resource: model.uri }); const validMarkers = allMarkers.filter(marker => { const hitText = model.getValueInRange(marker).trim(); const isPlaceholderError = ['_startTime', '_endTime'].includes(hitText) && marker.message.includes('未定义名称'); return !isPlaceholderError; }); monaco.editor.setModelMarkers(model, 'kusto', validMarkers); }; model.onDidChangeContent(updateMarkers); updateMarkers(); }); });
避坑提示
- 不要直接往Monaco的Kusto语法关键字列表里加这两个名称,关键字会被渲染成关键字样式,和普通常量的高亮逻辑不一致,和ADX原生表现不符
- 下拉选择器的填充逻辑和语法校验完全解耦,原有写好的占位符替换逻辑不需要改动,只要完成上面的配置就能消除错误高亮
- 不需要fork monaco-kusto做自定义构建,官方预留的全局变量配置就是专门用来处理这类自定义内置常量、查询占位符场景的
内容的提问来源于stack exchange,提问作者user1371314
相关产品推荐
相关产品推荐

