Monaco Editor v0.11.1：如何通过外部API跳转至CSS指定符号？

你用editor.action.quickOutline的run方法传参数没用是因为这个动作本身不支持直接接收目标符号作为参数——它只是负责打开符号列表面板，没法直接定位。要实现直接跳转到指定符号，我们可以通过手动获取文档符号并定位的方式来做，具体步骤如下：

实现步骤 #

1. 获取编辑器的文本模型：第一步要拿到当前编辑的CSS文档模型，这是获取符号的基础。
2. 获取文档中的所有CSS符号：利用Monaco的CSS语言服务获取文档里的所有选择器符号。
3. 匹配目标符号：遍历符号列表，找到和你目标（比如body、.header）完全匹配的项。
4. 定位到符号位置：通过编辑器的API将光标移动到目标符号的位置，并自动滚动到视图内。

具体代码示例 #

// 假设this.editor是你的Monaco Editor实例
const editor = this.editor;
const targetSymbolName = 'body'; // 替换成你要定位的符号，比如 '.header'

// 1. 获取当前文档模型
const model = editor.getModel();
if (!model) return;

// 2. 获取CSS文档的所有符号（适配v0.11.1版本的API）
monaco.languages.css.getSymbols(model).then(symbols => {
  // 3. 遍历符号，找到目标匹配项
  const targetSymbol = symbols.find(symbol => {
    // CSS符号的name就是选择器文本，直接匹配即可
    return symbol.name === targetSymbolName;
  });

  if (targetSymbol) {
    // 4. 定位到符号位置：设置光标位置并滚动到视图中心
    const position = model.getPositionAt(targetSymbol.range.startOffset);
    editor.setPosition(position);
    editor.revealPositionInCenter(position);
  } else {
    console.log(`未找到目标符号: ${targetSymbolName}`);
  }
});

补充说明 #

• 如果你需要匹配嵌套选择器这类复杂符号，可以调整find里的匹配逻辑，比如用includes做模糊匹配，或者正则匹配特定格式的选择器。
• v0.11.1版本的monaco.languages.css.getSymbols是异步方法，所以必须用then处理返回结果，新版本Monaco可能有同步API，但这个版本得按此写法实现。
• 除了普通选择器，@media、@keyframes这类CSS规则也会被纳入符号列表，直接匹配它们的规则文本就能定位。

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