Monaco Editor 代码导航完全指南：12种跳转方式让你编码如飞！

梦想家创建于 2025年12月19日377

Monaco Editor 提供了多种跳转方式，主要通过 语言特性 API 实现。以下是主要的跳转类型：

1. 跳转到定义 (Go to Definition)

最常用的跳转方式，跳转到符号的定义位置。

javascript 复制代码

// 注册定义提供者
monaco.languages.registerDefinitionProvider('javascript', {
    provideDefinition: function(model, position, token) {
        // 返回定义位置
        return {
            uri: model.uri,
            range: {
                startLineNumber: 10,
                startColumn: 1,
                endLineNumber: 10,
                endColumn: 5
            }
        };
    }
});

// 触发跳转（编程方式）
editor.getAction('editor.action.revealDefinition').run();

2. 跳转到类型定义 (Go to Type Definition)

跳转到变量的类型定义（对于 TypeScript 等类型语言特别有用）。

javascript 复制代码

monaco.languages.registerTypeDefinitionProvider('typescript', {
    provideTypeDefinition: function(model, position, token) {
        return [
            {
                uri: model.uri,
                range: {
                    startLineNumber: 15,
                    startColumn: 1,
                    endLineNumber: 15,
                    endColumn: 10
                }
            }
        ];
    }
});

// 触发跳转
editor.getAction('editor.action.goToTypeDefinition').run();

3. 跳转到实现 (Go to Implementation)

跳转到接口或抽象类的具体实现。

javascript 复制代码

monaco.languages.registerImplementationProvider('typescript', {
    provideImplementation: function(model, position, token) {
        return [
            {
                uri: model.uri,
                range: {
                    startLineNumber: 20,
                    startColumn: 1,
                    endLineNumber: 20,
                    endColumn: 10
                }
            },
            {
                uri: 'file:///anotherFile.ts',
                range: {
                    startLineNumber: 5,
                    startColumn: 1,
                    endLineNumber: 5,
                    endColumn: 10
                }
            }
        ];
    }
});

// 触发跳转
editor.getAction('editor.action.goToImplementation').run();

4. 跳转到引用 (Go to References)

查找并跳转到符号的所有引用位置。

javascript 复制代码

monaco.languages.registerReferenceProvider('javascript', {
    provideReferences: function(model, position, context, token) {
        return [
            {
                uri: model.uri,
                range: {
                    startLineNumber: 5,
                    startColumn: 1,
                    endLineNumber: 5,
                    endColumn: 10
                }
            },
            {
                uri: model.uri,
                range: {
                    startLineNumber: 25,
                    startColumn: 1,
                    endLineNumber: 25,
                    endColumn: 10
                }
            }
        ];
    }
});

// 触发跳转
editor.getAction('editor.action.goToReferences').run();

5. 查找声明 (Find Declarations)

查找符号的声明位置。

javascript 复制代码

monaco.languages.registerDeclarationProvider('typescript', {
    provideDeclaration: function(model, position, token) {
        return {
            uri: model.uri,
            range: {
                startLineNumber: 8,
                startColumn: 1,
                endLineNumber: 8,
                endColumn: 10
            }
        };
    }
});

6. 跳转到行 (Go to Line)

快速跳转到指定行号。

javascript 复制代码

// 编程方式跳转到行
editor.setPosition({ lineNumber: 42, column: 1 });
editor.revealLineInCenter(42);

// 使用内置动作（会弹出输入框）
editor.getAction('editor.action.gotoLine').run();

7. 符号跳转 (Go to Symbol)

通过符号名称跳转。

javascript 复制代码

// 注册文档符号提供者
monaco.languages.registerDocumentSymbolProvider('javascript', {
    provideDocumentSymbols: function(model, token) {
        return [
            {
                name: 'myFunction',
                kind: monaco.languages.SymbolKind.Function,
                location: {
                    uri: model.uri,
                    range: {
                        startLineNumber: 10,
                        startColumn: 1,
                        endLineNumber: 20,
                        endColumn: 1
                    }
                }
            }
        ];
    }
});

// 触发符号跳转（会显示符号面板）
editor.getAction('editor.action.quickOutline').run();

8. 工作区符号跳转 (Go to Symbol in Workspace)

在整个工作区中搜索符号。

javascript 复制代码

monaco.languages.registerWorkspaceSymbolProvider({
    provideWorkspaceSymbols: function(query, token) {
        return [
            {
                name: 'globalFunction',
                kind: monaco.languages.SymbolKind.Function,
                location: {
                    uri: monaco.Uri.file('/path/to/file.js'),
                    range: {
                        startLineNumber: 30,
                        startColumn: 1,
                        endLineNumber: 30,
                        endColumn: 10
                    }
                }
            }
        ];
    }
});

// 触发工作区符号搜索
editor.getAction('workbench.action.showAllSymbols').run();

9. 括号跳转 (Go to Bracket)

在匹配的括号之间跳转。

javascript 复制代码

// 内置功能，无需注册
editor.getAction('editor.action.jumpToBracket').run();

10. 错误/警告跳转 (Go to Problem)

跳转到下一个错误或警告。

javascript 复制代码

// 跳转到下一个问题
editor.getAction('editor.action.marker.next').run();

// 跳转到上一个问题
editor.getAction('editor.action.marker.prev').run();

11. 修改点跳转 (Go to Last Edit Location)

跳转到上次编辑的位置。

javascript 复制代码

editor.getAction('editor.action.navigateToLastEditLocation').run();

12. 链接跳转 (Open Link)

对于 URL 或文件路径，可以 Ctrl+点击打开。

javascript 复制代码

// 启用链接
editor.updateOptions({
    links: true
});

// 自定义链接提供者
monaco.languages.registerLinkProvider('markdown', {
    provideLinks: function(model, token) {
        return {
            links: [
                {
                    range: {
                        startLineNumber: 1,
                        startColumn: 1,
                        endLineNumber: 1,
                        endColumn: 10
                    },
                    url: 'https://example.com'
                }
            ]
        };
    }
});

完整示例：配置多种跳转方式

javascript 复制代码

// 创建编辑器
const editor = monaco.editor.create(document.getElementById('container'), {
    value: `// 示例代码
function calculate(a, b) {
    return a + b;
}

const result = calculate(5, 3);
console.log(result);`,
    language: 'javascript',
    // 启用相关功能
    links: true,
    quickSuggestions: true
});

// 注册各种跳转提供者
function setupNavigationProviders() {
    // 1. 定义提供者
    monaco.languages.registerDefinitionProvider('javascript', {
        provideDefinition: (model, position) => {
            const word = model.getWordAtPosition(position);
            if (word?.word === 'calculate') {
                return {
                    uri: model.uri,
                    range: {
                        startLineNumber: 2,
                        startColumn: 1,
                        endLineNumber: 4,
                        endColumn: 2
                    }
                };
            }
            return null;
        }
    });

    // 2. 引用提供者
    monaco.languages.registerReferenceProvider('javascript', {
        provideReferences: (model, position) => {
            const word = model.getWordAtPosition(position);
            if (word?.word === 'calculate') {
                return [
                    {
                        uri: model.uri,
                        range: {
                            startLineNumber: 2,
                            startColumn: 10,
                            endLineNumber: 2,
                            endColumn: 19
                        }
                    },
                    {
                        uri: model.uri,
                        range: {
                            startLineNumber: 7,
                            startColumn: 15,
                            endLineNumber: 7,
                            endColumn: 24
                        }
                    }
                ];
            }
            return [];
        }
    });

    // 3. 符号提供者
    monaco.languages.registerDocumentSymbolProvider('javascript', {
        provideDocumentSymbols: (model) => {
            return [
                {
                    name: 'calculate',
                    detail: 'function',
                    kind: monaco.languages.SymbolKind.Function,
                    range: {
                        startLineNumber: 2,
                        startColumn: 1,
                        endLineNumber: 4,
                        endColumn: 2
                    },
                    selectionRange: {
                        startLineNumber: 2,
                        startColumn: 10,
                        endLineNumber: 2,
                        endColumn: 19
                    }
                },
                {
                    name: 'result',
                    detail: 'const',
                    kind: monaco.languages.SymbolKind.Variable,
                    range: {
                        startLineNumber: 6,
                        startColumn: 1,
                        endLineNumber: 6,
                        endColumn: 30
                    },
                    selectionRange: {
                        startLineNumber: 6,
                        startColumn: 7,
                        endLineNumber: 6,
                        endColumn: 13
                    }
                }
            ];
        }
    });
}

setupNavigationProviders();

// 添加快捷键提示
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey) {
        // Ctrl + 点击：跳转到定义
        // Ctrl + Shift + F12：跳转到实现
        // Ctrl + F12：跳转到类型定义
        // Shift + F12：查找所有引用
        // Ctrl + G：跳转到行
        // Ctrl + Shift + O：跳转到文件符号
        // Ctrl + T：跳转到工作区符号
        console.log('可用快捷键：');
        console.log('F12 - 跳转到定义');
        console.log('Ctrl+F12 - 跳转到类型定义');
        console.log('Ctrl+Shift+F12 - 跳转到实现');
        console.log('Shift+F12 - 查找所有引用');
        console.log('Ctrl+G - 跳转到行');
        console.log('Ctrl+Shift+O - 文件符号');
        console.log('Ctrl+T - 工作区符号');
    }
});

常用快捷键总结

跳转类型	快捷键	对应 Action
跳转到定义	F12	`editor.action.revealDefinition`
跳转到类型定义	Ctrl+F12	`editor.action.goToTypeDefinition`
跳转到实现	Ctrl+Shift+F12	`editor.action.goToImplementation`
查找所有引用	Shift+F12	`editor.action.goToReferences`
跳转到行	Ctrl+G	`editor.action.gotoLine`
文件符号	Ctrl+Shift+O	`editor.action.quickOutline`
工作区符号	Ctrl+T	`workbench.action.showAllSymbols`
括号跳转	Ctrl+Shift+\	`editor.action.jumpToBracket`
下一个问题	F8	`editor.action.marker.next`