先说个真实场景。有次我在做一个可视化规则配置平台运营同事要配置一个当实际业绩大于目标业绩的条件系统存储格式要求写${实际业绩} ${目标业绩}。他盯着屏幕看了半天问了我一句为什么变量名前面要加个美元符号和花括号我解释完那是模板变量标识他点点头然后写出来的是${实际业绩 ${目标业绩}——漏了右边的花括号而且还少了半角引号的常识。那一刻我意识到问题不在他在交互设计。花括号是给机器看的语法噪音不是给人看的语义我决定做一个 Vue3 Monaco Editor 的智能变量编辑器让花括号在用户界面上彻底隐身只留变量名和运算符。这个方案落地后非技术用户写表达式的出错率几乎归零。这篇文章就把整个实现过程和踩坑记录拆开讲。1. 这个编辑器解决的不是编辑而是认知负担1.1 低代码配置面板里花括号是怎么劝退用户的很多低代码平台、报表系统、数据大屏项目都会有一个表达式输入环节。用户需要在文本框里写判断条件比如金额大于100且状态等于已完成。但底层存储往往依赖模板引擎表达式必须写成${金额} 100 ${状态} 已完成。这里的${}就是模板变量标识。对程序员来说这不算事但对运营、产品、业务人员来说这就是一整套需要记忆的语法。我整理过实际项目里非技术用户的高频错误基本集中在四类错误类型用户写出的内容后果漏掉闭括号${金额 100模板解析直接报错整条规则失效全角括号混用金额 100 {状态} 已完成变量识别不出来被当成普通字符串忘记变量标识金额 100 ${状态} 已完成前半段没有变量替换输出结果错乱引号与花括号冲突${状态} 已完成外部系统要求单引号用户又踩一次语法坑你会发现一个规律用户不是不会写字是记不住哪些字符是给机器看的哪些是给自己看的。花括号是一种视觉噪音用户写规则时大脑要同时处理两层信息业务含义和模板语法。一旦注意力被语法带走业务逻辑本身就容易出错。1.2 我为什么不直接造一个 textarea 轮子最朴素的方案当然是做一个 textarea让用户直接写裸表达式金额 100失焦后再由代码把变量名替换成${金额}。但我做过一次原型之后就放弃了因为文本编辑器该有的能力全都要自己补光标定位、选区操作、滚动同步、撤销重做栈、IME 输入法组合输入、词法高亮、自动补全。这些功能看着简单每一个单独拎出来都是几个星期的坑。Monaco Editor 是 VS Code 的编辑内核这些问题它全部解决了。它提供的 decoration 机制允许我们在不修改模型文本的前提下改变视觉展示层的内容。也就是说物理文本里存${金额} 100屏幕上可以只展示金额 100。这个所见即所得并不需要拦截键盘、重写渲染只需要维护一组装饰区间。我最终在 Vue3 项目里选择了 Monaco并封装成了独立的智能变量编辑器组件。2. Monaco 的隐藏字符原理Decoration 与文本模型的双轨制2.1 先理解编辑器里看到的和存着的可以不一样Monaco 的架构里IModel持有的是未经修饰的物理文本屏幕上的渲染视图则是模型经过词法分析、装饰叠加后的结果。你可以把IModel理解成一份真正的合同原文把视图层理解成一份用荧光笔标注过的复印件。Decoration装饰就是那支荧光笔。Monaco 提供三类装饰形态实现效果完全不同Decoration 形态作用范围典型用途能否隐藏现有字符InlineDecoration 的 before / after行内某个位置的前后注入幽灵文本、行内提示否只能在已有字符之间插入新视觉内容InlineDecoration 的 inlineClassName行内一段文本区间语法高亮、拼写错误、隐藏内容是核心方案LineDecoration整行断点、当前行高亮、非聚焦行淡化否只能整行处理我们的目标是隐藏${和}两组字符所以方案非常明确给这两个字符区间挂一个inlineClassName然后在 CSS 里把对应类名设置为display: none。字符还在物理文本里光标列号也还按原文本计算但用户看不见它们。这里必须先打一个预防针隐藏字符只是视觉欺骗。模型的值始终是完整表达式editor.getValue()拿到的依然是${金额} 100。所有对文本的存储、上报、后端解析都不需要做额外转换。这条结论非常重要我后面所有实现细节都建立在这个基础上。2.2 deltaDecorations / createDecorationsCollection 的正确打开方式老版本里操作装饰区间的 API 是editor.deltaDecorations(oldDecorations, newDecorations)每次要传入旧 id 数组来增量更新。新版本更推荐editor.createDecorationsCollection(decorations)它返回一个集合对象之后直接调用collection.set(newArray)就能整批替换省去维护旧 id 的麻烦。对隐藏花括号这个场景我建议用createDecorationsCollection。因为文本内容一变老 decoration 和真实文本区间会发生错位与其做增量匹配不如每次全量重算反正表达式文本通常只有几行性能完全不是瓶颈。还有几个 decoration 配置参数属于网上教程基本不提但实战必看的stickiness装饰区间在文本编辑时的粘性策略。对隐藏花括号我用TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges避免在区间边缘输入时装饰范围被意外扩大导致隐藏区域覆盖到变量名。inlineClassNameAffectsLetterSpacing如果隐藏字符后面紧邻的字母间距异常需要排查这个参数。我们这个场景用不上但值得知道它存在。blockClassName整行级装饰不适用于行内隐藏。3. Vue3 里从零搭一个 Monaco 变量编辑器组件3.1 依赖安装与 Vite Worker 配置项目依赖只需要一个包monaco-editor。我用 Vite 作为构建工具需要手动配置 Worker。Monaco 的编辑服务在后台依赖 Web Worker不配置的话页面会报Could not create web worker的错误。// src/monaco-setup.ts import * as monaco from monaco-editor; import EditorWorker from monaco-editor/esm/vs/editor/editor.worker?worker; (self as any).MonacoEnvironment { getWorker(_workerId: string, _label: string) { return new EditorWorker(); }, }; export default monaco;关键是?worker这个 Vite 特定语法它会把模块静态编译成一个 Worker 构造函数。这里只注册了默认的 editor worker。Monaco 的 json、css、html 语言各自有独立 worker但我们的自定义变量语言不需要专属语言服务共用默认 editor worker 即可。如果你用 webpack思路不同需要配合官方monaco-editor-webpack-plugin这里不展开。另外一个性能经验Monaco 全量包体积不小建议在组件内部动态引入const monaco await import(monaco-editor);这样整个编辑器的代码会在需要时才进入打包产物页面首屏不会被编辑器拖慢。3.2 注册 xvar 语言与组件骨架我需要让 Monaco 在语法层面识别一种新的语言我把它叫做xvar。注册语言的目的是为了后续的 token 高亮、补全触发器和错误标记能挂到正确的语言 ID 上。monaco.languages.register({ id: xvar }); monaco.languages.setMonarchTokensProvider(xvar, { tokenizer: { root: [ [/\$\{/, delimiter.hidden], [/\}/, delimiter.hidden], [/[\u4e00-\u9fa5A-Za-z_][\w\u4e00-\u9fa5.]*/, variable.name], [/\d(\.\d)?/, number.xvar], [/[!]?/, operator.xvar], [/|\|\|/, operator.logic.xvar], [/[^]*/, string.xvar], ], }, });注意这里我特意把${和}作为独立 token 类型delimiter.hidden。Monarch 的 tokenizer 会为每个 token 建立语法索引后续如果想做更精细的只在变量 token 上挂装饰可以基于 token 信息来遍历而不是靠正则扫描。实际上我的核心装饰逻辑用的仍然是正则原因是简单直观、覆盖绝大多数场景但 token 先注册好后面接入补全和校验时会省很多事。3.3 初始化、双向绑定与销毁回收组件封装我写在SmartVarEditor.vue里Vue3 的script setup语法template div refeditorHost classsmart-var-editor/div /template script setup langts import { onBeforeUnmount, onMounted, ref, watch } from vue; import type * as monacoType from monaco-editor; import monaco from ../monaco-setup; const props defineProps{ modelValue: string; variables: string[]; }(); const emit defineEmits{ (e: update:modelValue, value: string): void; }(); const editorHost refHTMLDivElement(); let editor: monacoType.editor.IStandaloneCodeEditor | null null; let model: monacoType.editor.ITextModel | null null; let suppressModelChange false; let suppressCursorFix false; let isComposing false; onMounted(async () { if (!editorHost.value) return; model monaco.editor.createModel(props.modelValue, xvar); editor monaco.editor.create(editorHost.value, { model, language: xvar, minimap: { enabled: false }, lineNumbers: off, wordWrap: on, scrollBeyondLastLine: false, automaticLayout: true, fontSize: 14, padding: { top: 8, bottom: 8 }, }); // 内容变化时对外广播 editor.onDidChangeModelContent(() { if (!suppressModelChange editor) { emit(update:modelValue, editor.getValue()); } }); // 核心装饰与光标修正逻辑见第 4 章 setupVariableMagic(); }); watch(() props.modelValue, (value) { if (editor value ! editor.getValue()) { suppressModelChange true; editor.setValue(value); suppressModelChange false; } }); onBeforeUnmount(() { editor?.dispose(); model?.dispose(); editor null; model null; }); /script style .smart-var-editor { height: 120px; border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; } .var-brace-hidden { display: none !important; } /style有几个细节值得说明model和editor都要在onBeforeUnmount手动 dispose。Monaco 不会自动回收自建的 model不 dispose 会造成内存泄漏尤其在配置面板里反复创建多个编辑器实例时非常明显。automaticLayout: true让编辑器监听容器尺寸变化。如果编辑器容器在弹窗或折叠面板里容器尺寸变化时 Monaco 默认不感知必须开这个选项。suppressModelChange是为了防止外部v-model回写时onDidChangeModelContent又把同样的内容 emit 一次形成循环赋值。4. 核心实现让${和}在屏幕上彻底隐身4.1 正则定位花括号区间并批量加装饰核心函数是用正则扫描物理文本里所有${...}变量片段然后对开括号${和闭括号}分别建立隐藏装饰区间。这里依赖model.getPositionAt(offset)把基于 0 的字符串索引换算成 Monaco 基于 1 的行列位置。function refreshBraceDecorations() { if (!editor || !model) return; const text model.getValue(); const newDecorations: monacoType.editor.IModelDeltaDecoration[] []; const openRanges: monacoType.Range[] []; const closeRanges: monacoType.Range[] []; const pattern /\$\{([^}]*)\}/g; let match: RegExpExecArray | null; while ((match pattern.exec(text))) { const openStart model.getPositionAt(match.index); const openEnd model.getPositionAt(match.index 2); const closeStart model.getPositionAt(match.index match[0].length - 1); const closeEnd model.getPositionAt(match.index match[0].length); const openRange new monaco.Range( openStart.lineNumber, openStart.column, openEnd.lineNumber, openEnd.column ); const closeRange new monaco.Range( closeStart.lineNumber, closeStart.column, closeEnd.lineNumber, closeEnd.column ); openRanges.push(openRange); closeRanges.push(closeRange); newDecorations.push({ range: openRange, options: { inlineClassName: var-brace-hidden, stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, }, }); newDecorations.push({ range: closeRange, options: { inlineClassName: var-brace-hidden, stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, }, }); } hiddenOpenRanges openRanges; hiddenCloseRanges closeRanges; decorationCollection.set(newDecorations); }这个函数会在onDidChangeModelContent触发时执行。我加了一层防抖避免用户连续输入时频繁重算let refreshTimer: number | undefined; editor.onDidChangeModelContent(() { window.clearTimeout(refreshTimer); refreshTimer window.setTimeout(refreshBraceDecorations, 50); });为什么不能省略防抖因为每次collection.set都会让 Monaco 做一次渲染层 diff虽然量小但用户在快速输入时如果每个字符都触发一次输入法会有明显卡顿感。50 毫秒的窗口既保证最终结果准确又不会牺牲输入流畅度。4.2 光标修正魔法真正的门槛装饰隐藏做完后你会遇到第一个诡异现象用户按键盘左右键移动光标时光标会突然消失仿佛藏进了某个不可见的区域里。原因前面说过——光标位置是按物理文本的列号计算的${和}虽然在视觉上不存在但列号仍然占着位置。解决办法是监听onDidChangeCursorPosition判断当前光标位置是否落在我们记录的隐藏区间内。如果落在${的区间把光标强行修正到开括号的结束位置如果落在}的区间把光标修正到闭括号的开始位置。这样用户的视觉体验是光标永远停留在变量名的两侧不会进入空气里。function fixCursorIfNeeded() { if (suppressCursorFix || isComposing || !editor) return; const position editor.getPosition(); if (!position) return; for (const range of hiddenOpenRanges) { if ( position.lineNumber range.startLineNumber position.column range.startColumn position.column range.endColumn ) { suppressCursorFix true; editor.setPosition({ lineNumber: position.lineNumber, column: range.endColumn }); suppressCursorFix false; return; } } for (const range of hiddenCloseRanges) { if ( position.lineNumber range.startLineNumber position.column range.startColumn position.column range.endColumn ) { suppressCursorFix true; editor.setPosition({ lineNumber: position.lineNumber, column: range.startColumn }); suppressCursorFix false; return; } } }必须提防递归陷阱editor.setPosition()会再次触发onDidChangeCursorPosition所以要用suppressCursorFix标志位包住修正动作。如果不加这个标志修正函数会反复执行表现起来就是光标在变量名边界抖动严重时直接卡死。注意所有隐藏字符都只是视觉层处理Monaco 的物理文本仍然包含完整的${...}。存储层永远以editor.getValue()为准不要把视觉文本回写。4.3 退格与删除键的拦截保护光标修正解决的是光标移动问题但键盘操作还有另一层坑退格键和删除键会直接删除隐藏的{或}破坏表达式结构。用户视角里光标在变量名开头按下退格键应该删除变量名的第一个字符。但在物理文本里光标左侧是{退格键会先删掉它。结果是$孤零零留在外面花括号对瞬间被破坏。删除键同理光标在变量名末尾按删除键可能先把右侧的}吃掉。我的处理思路是在onKeyDown里拦截这两个按键。当检测到退格时光标位于某个开括号隐藏区间的结束列就把光标右移一位让退格真正作用在变量名字符上检测到删除时光标位于闭括号隐藏区间的开始列就把光标左移一位让删除先删除变量名的最后一个字符。editor.onKeyDown((e) { const key e.browserEvent.key; if (!editor || !model) return; const position editor.getPosition(); const selection editor.getSelection(); if (!position || !selection) return; // 有非空选区时不拦截允许用户一次删除完整的变量 if (!selection.isEmpty()) return; if (key Backspace) { for (const range of hiddenOpenRanges) { if ( position.lineNumber range.startLineNumber position.column range.endColumn ) { e.preventDefault(); const lineMax model.getLineMaxColumn(position.lineNumber); editor.setPosition({ lineNumber: position.lineNumber, column: Math.min(position.column 1, lineMax), }); return; } } } if (key Delete) { for (const range of hiddenCloseRanges) { if ( position.lineNumber range.startLineNumber position.column range.startColumn ) { e.preventDefault(); editor.setPosition({ lineNumber: position.lineNumber, column: Math.max(1, position.column - 1), }); return; } } } });这里有一个边界要特别注意如果用户光标正好在${隐藏区间之后但他其实是想删除整个变量呢他可以直接用鼠标双击变量名选中或者按住 Shift 加方向键把整个变量划入选区。当 selection 非空时我们的拦截逻辑直接放行Monaco 会正常删除选中范围内的所有内容包括隐藏的花括号同时另一对变量如果还是完整的装饰刷新后依然正常。这套逻辑在实测中没有出现过删不掉变量的反馈。5. 实测中踩过的坑IME、粘贴、撤销与幽灵字符5.1 中文输入法把光标拖走了最初上线测试时最严重的反馈不是花括号显示而是输入中文变量名时输入法候选框乱跳。现象是用户在变量名位置输入拼音候选框刚弹出就换位置甚至选到一半整个编辑器的内容被改变了。排查过程是这样的我第一步在编辑器的onDidChangeCursorPosition和onDidChangeModelContent里都打了日志发现一次中文输入会被拆成多次模型变更事件和光标变更事件。我的fixCursorIfNeeded在组合输入期间仍然在判断光标位置一旦拼音输入过程中光标列号恰好踏进隐藏区间它就把光标强行拉走输入法候选框跟随光标重新定位视觉上就是跳一下。根因是中文输入法有组合输入状态浏览器在这个阶段会频繁更新model和selection这些更新并不代表用户真正确定了文本内容。解决方案是监听onCompositionStart和onCompositionEnd在组合输入期间跳过光标修正只保留装饰刷新editor.onDidCompositionStart(() { isComposing true; }); editor.onDidCompositionEnd(() { isComposing false; });组合结束之后fixCursorIfNeeded恢复正常。这个修复极其关键没有它这个编辑器对中文用户基本不可用。5.2 粘贴${fee}变成双花括号的现场另一个高频问题是粘贴。用户经常从其他页面、文档、甚至我们平台的其他配置里复制表达式然后直接粘贴到编辑器里。比如他从旧版本流程里复制了${金额} 100粘贴进来之后我们的正则扫描出${金额}片段但用户原来输入位置可能恰好又在另一个${之后结果物理文本变成${${金额} 100视觉上出现金额前面有两层隐藏的${关闭后的}数量也对不上。我一开始想通过onDidPaste事件拿到粘贴的文本区间做自动规范化把粘贴内容里的${全部剥掉。但实测后发现这非常危险粘贴内容可能是完整字符串${金额}也可能是用户想直接写入的嵌套模板自动剥掉会破坏他的真实意图。最终我用的是重算时检测嵌套错误 提供一键修复的策略正则扫描时如果发现某个${之后、对应的}之前又出现了${就在这个区间标记一个错误Marker并且在编辑器右键菜单里加一个清理多余花括号的命令。清理命令的逻辑其实不复杂function repairNestedBrace(source: string): string { // 把 ${${...}} 和 ${{...}} 这类错误规范化成 ${...} return source.replace(/\$\{\s*(\$\{)?([^}]*)\}/g, ${$2}); }这个修复函数在演练中能处理 90% 的粘贴脏数据但它不是全能的所以错误标记始终留着用户能看到哪段表达式不合法。5.3 撤销栈与 decoration 错位的连锁反应最后这个坑很有迷惑性。表面现象是连续输入几个变量然后连续按CtrlZ撤销屏幕上某一行突然出现了半截花括号——比如$还在显示{不显示或者}显示但$隐藏视觉上支离破碎。排查后我发现问题不在 decoration 本身而在防抖刷新与撤销计时器之间的竞争。onDidChangeModelContent触发了防抖重算但撤销动作会连续修改 model 版本防抖窗口内的旧定时器可能在新的 model 状态上执行了过期文本的扫描结果装饰区间与当前模型不匹配。修复方案是在重算函数开头读取model.getAlternativeVersionId()把它作为本次计算结果的版本标记每次重算前先比较版本号如果版本号已经变了就放弃本次计算并重新调度。简单地把防抖时间设长一些也能缓解但不彻底。let lastVersionId -1; function refreshBraceDecorations() { if (!editor || !model) return; const currentVersion model.getAlternativeVersionId(); if (currentVersion ! lastVersionId) { lastVersionId currentVersion; // 版本刚变化过等下一帧再算避免撤销过程中的中间态 window.requestAnimationFrame(refreshBraceDecorations); return; } // 正常扫描和设置 decoration }这个方法实际上是把重算时机推迟到文本稳定之后。配合 50 毫秒的防抖撤销过程中的中间态不会再污染装饰。把这三个大坑整理成一个表方便以后排查坑现象根因解决方式中文输入法候选框跳动、选字中断组合输入期间触发了光标修正onDidCompositionStart/End标志期间跳过修正粘贴脏表达式出现双层花括号、无法闭合粘贴内容里自带${}与现有区间叠加错误标记 一键修复命令撤销装饰错位花括号只藏一半、显示支离破碎防抖重算被撤销动作的中间版本干扰版本号校验 requestAnimationFrame延迟重算6. 从能看到好用智能补全、校验占位与后续扩展6.1 变量字典驱动的补全提示隐藏花括号只是第一步真正让它变成智能变量编辑器的是补全。用户在变量名位置输入字符时Monaco 弹出变量字典候选列表选中后插入裸变量名物理文本里因为已有${和}作为包裹符插入后直接就是一个完整变量。function registerCompletion() { monaco.languages.registerCompletionItemProvider(xvar, { triggerCharacters: [{, $], provideCompletionItems(currentModel, position) { const word currentModel.getWordUntilPosition(position); const range new monaco.Range( position.lineNumber, word.startColumn, position.lineNumber, word.endColumn ); const suggestions variableList.value.map((name) ({ label: name, kind: monaco.languages.CompletionItemKind.Variable, insertText: name, range, })); return { suggestions }; }, }); }这里有个中文变量名的小坑。getWordUntilPosition对中文的支持取决于编辑器设置默认的 word 分隔符可能把中文变量名切成多个片段导致补全 range 不对。我在实际项目中给 xvar 语言注册了一个wordPattern把中文、字母、数字、点号都纳为一个词monaco.languages.setLanguageConfiguration(xvar, { wordPattern: /[\u4e00-\u9fa5\w.]/, });配置之后补全范围、双击选词、CtrlD选词这些体验都会顺很多。初期我忽略了它补全出来的变量名总带着偏旁部首残片用户一脸懵。6.2 非法表达式标记与 placeholder 体验光有补全还不够用户随手删了一个变量名表达式就变成了${ }或者引用了不存在的变量。我注册了一个validateExpr函数在内容变化时遍历${...}区间把不认识的变量名丢进 Monaco 的 Marker 系统function validateExpression() { if (!editor || !model) return; const markers: monacoType.editor.IMarkerData[] []; const variables props.variables; const text model.getValue(); const pattern /\$\{([^}]*)\}/g; let match: RegExpExecArray | null; while ((match pattern.exec(text))) { const varName match[1].trim(); if (varName !variables.includes(varName)) { const start model.getPositionAt(match.index 2); const end model.getPositionAt(match.index match[0].length - 1); markers.push({ severity: monaco.MarkerSeverity.Error, message: 未识别的变量${varName}, startLineNumber: start.lineNumber, startColumn: start.column, endLineNumber: end.lineNumber, endColumn: end.column, }); } } monaco.editor.setModelMarkers(model, xvar, markers); }Marker 会自动渲染成红色波浪线配合补全、隐藏花括号用户在界面上就已经能感知表达式状态。我还加了一个 placeholder 效果当editor.getValue()为空时用一个ContentWidget在编辑区显示请输入条件表达式例如金额 100 且 状态 已完成聚焦时自动消失。这个视觉提示对第一次接触编辑器的非技术用户很有用。6.3 还能怎么扩展这套隐藏符号方案这套方案的本质是用 decoration 隐藏语法噪音用键盘拦截保护隐藏区域。它不局限于${}这一对符号还能扩展出不少有意思的交互。比如把隐藏范围扩大到模板字符串的整体篇幅标记比如 JSON 配置里的id值前面的key:部分视觉上只保留值。用InlineDecoration的before能力在变量名前面注入一个小圆点图标提示这是一个可交互变量。结合 hover provider让用户鼠标悬停在变量名上时弹出变量来源、类型、当前值这是低代码平台里很实用的一层增强。如果产品希望用户聚焦时看到花括号失焦时隐藏可以监听onDidFocusEditorText和onDidBlurEditorText后切换装饰类名。但我不建议默认开启因为聚焦状态切换装饰会让输入时光标位置发生一次跳变体验反而更怪。在把隐藏符号方案推进到生产环境之前还有一个我强烈建议保留的后门在设置面板里加一个显示原始表达式开关。它本质上是临时禁用隐藏装饰的类名把所有${}原样展示出来。很多诡异的线上反馈靠后台数据根本猜不到原因让用户切到原文模式截图发过来问题定位速度能快十倍。视觉隐藏这个功能在保持界面清爽的同时也隐藏了排障的线索所以永远要给人留一个掀开魔法幕布的入口。回到最开始那个运营同事。新编辑器上线后第二天他自己配了一条规则用的是裸变量名和直观比较符没有全角括号没有漏掉花括号——因为他根本看不到也不需要写花括号。我觉得这个功能最值钱的地方不是省了多少时间而是让一个不需要懂编程的人在面对机器语法时也能保持写业务逻辑的信心。如果你也要做类似的低代码配置项建议直接抄这套方案Monaco 负责所有文本编辑的体力活我们只负责在关键交互处做隐藏与保护这一层做扎实了整个编辑器的体验会上一个明显的台阶。