如何在Monaco编辑器中通过代码实现括号自动闭合？

问题根源 #

手动输入时编辑器会触发语言服务的自动闭合逻辑，但通过editor.trigger直接插入文本时，默认不会触发该逻辑；同时如果JavaScript语言的自动闭合配置未正确加载，会导致_isAutoclosingOvertype返回false，无法触发补全。

解决方案 #

1. 确保编辑器配置正确加载自动闭合规则 #

初始化编辑器时，显式指定语言并启用自动闭合选项：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'const x = ',
  language: 'javascript', // 必须指定正确的语言类型
  autoClosingBrackets: 'always', // 强制启用括号自动闭合
  autoClosingQuotes: 'always'
});

2. 使用type命令模拟手动输入触发自动闭合 #

不要直接插入文本，而是通过trigger调用type命令模拟用户手动输入，这样会触发编辑器的自动闭合逻辑：

// 插入'('并自动补全')'
editor.trigger('custom-trigger', 'type', { text: '(' });

3. 手动实现插入与光标定位（备选方案） #

如果上述方法无效，可通过executeEdits手动插入完整括号并调整光标位置：

const currentPos = editor.getPosition();
// 插入完整括号对
editor.executeEdits('insert-bracket', [
  {
    range: new monaco.Range(currentPos.lineNumber, currentPos.column, currentPos.lineNumber, currentPos.column),
    text: '()'
  }
]);
// 将光标移动到括号中间
editor.setPosition(new monaco.Position(currentPos.lineNumber, currentPos.column + 1));

关键说明 #

• 若调试时发现_isAutoclosingOvertype返回false，优先检查编辑器的language配置是否正确，未指定javascript会导致语言服务的自动闭合规则未加载。
• trigger的第二个参数必须是type而非自定义插入命令，只有type命令会触发编辑器的自动补全逻辑链。

内容的提问来源于stack exchange，提问作者user6118986