如何在Monaco-Editor中集成与使用GitHub Copilot？

前置条件 #

• 拥有GitHub账号，并生成带copilot权限的个人访问令牌（PAT）
• 已引入Monaco Editor（可通过CDN或npm安装）
• 了解Monaco Editor的基础自定义API（尤其是补全提供者机制）

核心实现思路 #

Monaco Editor允许通过languages.registerCompletionItemProvider注册自定义补全提供者，我们需要在该提供者中调用GitHub Copilot的API获取代码补全建议，再将建议转换为Monaco支持的CompletionItem格式返回给编辑器。

具体代码示例 #

纯前端CDN集成示例 #

无需构建工具，直接在HTML中实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Monaco + Copilot Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc;"></div>

    <script>
        require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs' } });
        require(['vs/editor/editor.main'], async function () {
            // 初始化Monaco编辑器
            const editor = monaco.editor.create(document.getElementById('container'), {
                value: '// 输入代码触发Copilot补全\nfunction calculateSum(a, b) {\n',
                language: 'javascript',
                theme: 'vs-dark'
            });

            // Copilot配置（生产环境请通过后端代理令牌）
            const COPILOT_TOKEN = '你的GitHub个人访问令牌';
            const COPILOT_API_URL = 'https://api.githubcopilot.com/v1/engines/copilot-codex/completions';

            // 注册自定义补全提供者
            monaco.languages.registerCompletionItemProvider('javascript', {
                provideCompletionItems: async (model, position) => {
                    const fullCode = model.getValue();
                    try {
                        // 调用Copilot API
                        const response = await fetch(COPILOT_API_URL, {
                            method: 'POST',
                            headers: {
                                'Authorization': `token ${COPILOT_TOKEN}`,
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                prompt: fullCode,
                                max_tokens: 100,
                                temperature: 0.2,
                                top_p: 1,
                                n: 1,
                                stop: ['\n\n']
                            })
                        });

                        if (!response.ok) throw new Error(`API请求失败: ${response.status}`);
                        const data = await response.json();

                        // 转换为Monaco补全格式
                        const suggestions = data.choices.map(choice => ({
                            label: choice.text.trim(),
                            insertText: choice.text,
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            detail: 'GitHub Copilot 建议'
                        }));

                        return { suggestions };
                    } catch (error) {
                        console.error('Copilot补全失败:', error);
                        return { suggestions: [] };
                    }
                },
                // 设置触发补全的字符
                triggerCharacters: [' ', '.', '(', '{', '=']
            });
        });
    </script>
</body>
</html>

React项目集成示例 #

借助@monaco-editor/react组件实现：

import React, { useEffect, useRef } from 'react';
import Editor from '@monaco-editor/react';

const MonacoCopilotEditor = () => {
    const editorRef = useRef(null);
    const COPILOT_TOKEN = '你的GitHub个人访问令牌'; // 生产环境请通过后端代理
    const COPILOT_API_URL = 'https://api.githubcopilot.com/v1/engines/copilot-codex/completions';

    useEffect(() => {
        if (!editorRef.current) return;
        const editor = editorRef.current;
        const monaco = editor.getMonaco();

        // 注册补全提供者
        const providerDisposable = monaco.languages.registerCompletionItemProvider('javascript', {
            provideCompletionItems: async (model, position) => {
                const fullCode = model.getValue();
                try {
                    const response = await fetch(COPILOT_API_URL, {
                        method: 'POST',
                        headers: {
                            'Authorization': `token ${COPILOT_TOKEN}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            prompt: fullCode,
                            max_tokens: 150,
                            temperature: 0.1
                        })
                    });

                    const data = await response.json();
                    const suggestions = data.choices.map(choice => ({
                        label: choice.text.trim(),
                        insertText: choice.text,
                        kind: monaco.languages.CompletionItemKind.Function,
                        detail: 'Copilot 建议'
                    }));

                    return { suggestions };
                } catch (err) {
                    console.error('Copilot请求失败:', err);
                    return { suggestions: [] };
                }
            },
            triggerCharacters: [' ', '(', '{']
        });

        // 组件卸载时清理资源
        return () => providerDisposable.dispose();
    }, []);

    return (
        <Editor
            ref={editorRef}
            height="600px"
            language="javascript"
            theme="vs-dark"
            defaultValue="// 输入代码触发Copilot补全\nfunction fetchData() {\n"
        />
    );
};

export default MonacoCopilotEditor;

注意事项 #

• 令牌安全：绝对不能在前端代码中直接暴露GitHub PAT，生产环境必须通过后端代理请求Copilot API，由后端处理鉴权和请求转发，避免令牌泄露。
• API限制：GitHub Copilot API有调用频率限制，需遵守GitHub的使用条款，避免频繁请求导致被限流。
• 补全优化：可根据当前编辑器的语言、光标位置优化请求的prompt，比如只传递光标上方的代码片段，减少API请求的数据量，提升响应速度。
• 错误处理：需完善API请求的错误捕获逻辑，比如网络错误、令牌失效等情况，避免影响编辑器的正常使用。
• 触发时机：可通过调整triggerCharacters或监听编辑器的onDidChangeModelContent事件，自定义补全的触发时机，提升用户体验。

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