如何修改Monaco编辑器自动完成建议选项的行高

方案1：使用官方原生配置（优先推荐） #

Monaco 编辑器原生提供了suggestLineHeight配置项专门用于控制自动完成建议项的行高，配置后编辑器会自动计算每个row元素的动态top值，不会出现布局错位问题，无需额外编写CSS或JS。
配置示例：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  // 其他原有配置项
  suggestLineHeight: 30, // 按需求自定义数值，单位为px
})

如果使用react-monaco-editor、vue-monaco等封装组件，直接将配置传入options属性即可，示例（React场景）：

import MonacoEditor from 'react-monaco-editor';

function App() {
  return (
    <MonacoEditor
      language="javascript"
      options={{
        suggestLineHeight: 30,
        // 其他原有配置
      }}
    />
  )
}

方案2：覆盖CSS变量（次选） #

如果使用的Monaco版本支持CSS变量控制，可直接覆盖全局变量实现修改，编辑器内部计算布局时会读取该变量值，不会和动态生成的top值冲突：

.monaco-editor {
  --suggest-item-height: 30px !important;
}

方案3：手动调整DOM布局（仅兼容老版本） #

如果使用的是非常老旧的Monaco版本，没有上述配置和变量支持，可以通过JS监听建议面板显示事件，手动重新计算每个选项的top值和面板高度：

editor.onDidShowSuggestWidgets(() => {
  // 自定义行高数值
  const CUSTOM_LINE_HEIGHT = 30;
  // 获取所有建议行元素
  const suggestRows = document.querySelectorAll('.monaco-list .monaco-list-row');
  // 调整每个行的高度和top值
  suggestRows.forEach((row, idx) => {
    row.style.height = `${CUSTOM_LINE_HEIGHT}px`;
    row.style.top = `${idx * CUSTOM_LINE_HEIGHT}px`;
    row.style.lineHeight = `${CUSTOM_LINE_HEIGHT}px`;
  });
  // 同步调整整个建议列表的高度
  const suggestList = document.querySelector('.monaco-editor .suggest-widget .monaco-list');
  if (suggestList) {
    suggestList.style.height = `${suggestRows.length * CUSTOM_LINE_HEIGHT}px`;
  }
})

注意：不同版本Monaco的类名可能存在差异，可根据实际DOM结构调整选择器。

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