VS Code 扩展开发阶段三：扩展指南专题 - AI集成、WebView与自定义编辑器

// src/aiProvider.ts
import * as vscode from 'vscode';

export class AIProvider {
    private model: vscode.LanguageModelChat | undefined;
    
    constructor() {
        this.initializeModel();
    }
    
    private async initializeModel() {
        try {
            // 获取可用的语言模型
            const models = await vscode.lm.selectChatModels({
                vendor: 'copilot',
                family: 'gpt-4'
            });
            
            if (models.length > 0) {
                this.model = models[0];
                console.log('AI模型初始化成功:', this.model.name);
            } else {
                vscode.window.showWarningMessage('未找到可用的AI模型');
            }
        } catch (error) {
            console.error('AI模型初始化失败:', error);
            vscode.window.showErrorMessage('AI功能初始化失败');
        }
    }
    
    async generateCode(prompt: string, context?: string): Promise<string> {
        if (!this.model) {
            throw new Error('AI模型未初始化');
        }
        
        const messages = [
            vscode.LanguageModelChatMessage.User(`请根据以下要求生成代码：
            ${prompt}
            
            ${context ? `上下文信息：${context}` : ''}
            
            请只返回代码，不要包含解释。`)
        ];
        
        const request = await this.model.sendRequest(messages, {}, new vscode.CancellationTokenSource().token);
        
        let response = '';
        for await (const fragment of request.text) {
            response += fragment;
        }
        
        return response.trim();
    }
    
    async explainCode(code: string): Promise<string> {
        if (!this.model) {
            throw new Error('AI模型未初始化');
        }
        
        const messages = [
            vscode.LanguageModelChatMessage.User(`请解释以下代码的功能和工作原理：
            
            \`\`\`
            ${code}
            \`\`\`
            
            请用简洁明了的语言进行解释。`)
        ];
        
        const request = await this.model.sendRequest(messages, {}, new vscode.CancellationTokenSource().token);
        
        let response = '';
        for await (const fragment of request.text) {
            response += fragment;
        }
        
        return response.trim();
    }
    
    async optimizeCode(code: string): Promise<{ optimizedCode: string; suggestions: string[] }> {
        if (!this.model) {
            throw new Error('AI模型未初始化');
        }
        
        const messages = [
            vscode.LanguageModelChatMessage.User(`请优化以下代码并提供改进建议：
            
            \`\`\`
            ${code}
            \`\`\`
            
            请返回JSON格式：
            {
                "optimizedCode": "优化后的代码",
                "suggestions": ["建议1", "建议2", ...]
            }`)
        ];
        
        const request = await this.model.sendRequest(messages, {}, new vscode.CancellationTokenSource().token);
        
        let response = '';
        for await (const fragment of request.text) {
            response += fragment;
        }
        
        try {
            return JSON.parse(response);
        } catch (error) {
            return {
                optimizedCode: code,
                suggestions: ['AI响应格式错误，无法解析优化建议']
            };
        }
    }
}

// src/chatParticipant.ts
import * as vscode from 'vscode';
import { AIProvider } from './aiProvider';

export class CodeAssistantChatParticipant {
    private aiProvider: AIProvider;
    
    constructor() {
        this.aiProvider = new AIProvider();
    }
    
    register(context: vscode.ExtensionContext) {
        // 注册聊天参与者
        const participant = vscode.chat.createChatParticipant('codeAssistant', this.handleChatRequest.bind(this));
        
        participant.iconPath = vscode.Uri.joinPath(context.extensionUri, 'images', 'assistant-icon.png');
        participant.followupProvider = {
            provideFollowups: this.provideFollowups.bind(this)
        };
        
        context.subscriptions.push(participant);
    }
    
    private async handleChatRequest(
        request: vscode.ChatRequest,
        context: vscode.ChatContext,
        stream: vscode.ChatResponseStream,
        token: vscode.CancellationToken
    ): Promise<void> {
        
        try {
            const prompt = request.prompt;
            
            // 分析请求类型
            if (prompt.includes('生成') || prompt.includes('创建')) {
                await this.handleCodeGeneration(prompt, stream, token);
            } else if (prompt.includes('解释') || prompt.includes('说明')) {
                await this.handleCodeExplanation(prompt, stream, token);
            } else if (prompt.includes('优化') || prompt.includes('改进')) {
                await this.handleCodeOptimization(prompt, stream, token);
            } else {
                await this.handleGeneralQuestion(prompt, stream, token);
            }
            
        } catch (error) {
            stream.markdown(`❌ 处理请求时发生错误: ${error}`);
        }
    }
    
    private async handleCodeGeneration(
        prompt: string,
        stream: vscode.ChatResponseStream,
        token: vscode.CancellationToken
    ): Promise<void> {
        
        stream.progress('正在生成代码...');
        
        // 获取当前编辑器上下文
        const editor = vscode.window.activeTextEditor;
        const context = editor ? editor.document.getText() : '';
        
        try {
            const generatedCode = await this.aiProvider.generateCode(prompt, context);
            
            stream.markdown('### 生成的代码\n\n');
            stream.markdown(`\`\`\`typescript\n${generatedCode}\n\`\`\``);
            
            // 提供插入代码的按钮
            stream.button({
                command: 'codeAssistant.insertCode',
                arguments: [generatedCode],
                title: '插入到编辑器'
            });
            
        } catch (error) {
            stream.markdown(`生成代码失败: ${error}`);
        }
    }
    
    private async handleCodeExplanation(
        prompt: string,
        stream: vscode.ChatResponseStream,
        token: vscode.CancellationToken
    ): Promise<void> {
        
        const editor = vscode.window.activeTextEditor;
        
        if (!editor || editor.selection.isEmpty) {
            stream.markdown('请先选中要解释的代码。');
            return;
        }
        
        stream.progress('正在分析代码...');
        
        const selectedCode = editor.document.getText(editor.selection);
        
        try {
            const explanation = await this.aiProvider.explainCode(selectedCode);
            
            stream.markdown('### 代码解释\n\n');
            stream.markdown(explanation);
            
        } catch (error) {
            stream.markdown(`代码解释失败: ${error}`);
        }
    }
    
    private async handleCodeOptimization(
        prompt: string,
        stream: vscode.ChatResponseStream,
        token: vscode.CancellationToken
    ): Promise<void> {
        
        const editor = vscode.window.activeTextEditor;
        
        if (!editor || editor.selection.isEmpty) {
            stream.markdown('请先选中要优化的代码。');
            return;
        }
        
        stream.progress('正在优化代码...');
        
        const selectedCode = editor.document.getText(editor.selection);
        
        try {
            const result = await this.aiProvider.optimizeCode(selectedCode);
            
            stream.markdown('### 优化建议\n\n');
            
            result.suggestions.forEach((suggestion, index) => {
                stream.markdown(`${index + 1}. ${suggestion}\n`);
            });
            
            stream.markdown('\n### 优化后的代码\n\n');
            stream.markdown(`\`\`\`typescript\n${result.optimizedCode}\n\`\`\``);
            
            // 提供替换代码的按钮
            stream.button({
                command: 'codeAssistant.replaceCode',
                arguments: [result.optimizedCode],
                title: '替换选中代码'
            });
            
        } catch (error) {
            stream.markdown(`代码优化失败: ${error}`);
        }
    }
    
    private async handleGeneralQuestion(
        prompt: string,
        stream: vscode.ChatResponseStream,
        token: vscode.CancellationToken
    ): Promise<void> {
        
        stream.progress('正在思考...');
        
        // 这里可以调用通用的AI模型进行对话
        stream.markdown('我是代码助手，专门帮助您处理代码相关的问题。\n\n');
        stream.markdown('我可以帮您：\n');
        stream.markdown('- 🔨 生成代码\n');
        stream.markdown('- 📖 解释代码\n');
        stream.markdown('- ⚡ 优化代码\n');
        stream.markdown('- 🐛 调试代码\n\n');
        stream.markdown('请告诉我您需要什么帮助！');
    }
    
    private provideFollowups(
        result: vscode.ChatResult,
        context: vscode.ChatContext,
        token: vscode.CancellationToken
    ): vscode.ProviderResult<vscode.ChatFollowup[]> {
        
        return [
            {
                prompt: '生成一个函数',
                label: '💡 生成函数',
                command: 'codeAssistant.generateFunction'
            },
            {
                prompt: '解释选中的代码',
                label: '📖 解释代码',
                command: 'codeAssistant.explainSelection'
            },
            {
                prompt: '优化这段代码',
                label: '⚡ 优化代码',
                command: 'codeAssistant.optimizeSelection'
            }
        ];
    }
}

// src/languageModelTool.ts
import * as vscode from 'vscode';

export class LanguageModelTool {
    
    register(context: vscode.ExtensionContext) {
        // 注册语言模型工具
        const tool = vscode.lm.registerTool('codeAnalyzer', {
            displayName: 'Code Analyzer',
            description: '分析代码复杂度和质量',
            parametersSchema: {
                type: 'object',
                properties: {
                    code: {
                        type: 'string',
                        description: '要分析的代码'
                    },
                    language: {
                        type: 'string', 
                        description: '编程语言'
                    }
                },
                required: ['code']
            }
        }, async (options, token) => {
            return this.analyzeCode(options.parameters, token);
        });
        
        context.subscriptions.push(tool);
    }
    
    private async analyzeCode(
        parameters: { code: string; language?: string },
        token: vscode.CancellationToken
    ): Promise<vscode.LanguageModelToolResult> {
        
        const { code, language = 'unknown' } = parameters;
        
        // 简单的代码分析逻辑
        const analysis = {
            lineCount: code.split('\n').length,
            characterCount: code.length,
            wordCount: code.split(/\s+/).length,
            complexity: this.calculateComplexity(code),
            suggestions: this.generateSuggestions(code, language)
        };
        
        const result = `代码分析报告：
        
📊 **基础统计**
- 行数: ${analysis.lineCount}
- 字符数: ${analysis.characterCount}  
- 单词数: ${analysis.wordCount}

📈 **复杂度分析**
- 圈复杂度: ${analysis.complexity.cyclomatic}
- 认知复杂度: ${analysis.complexity.cognitive}

💡 **改进建议**
${analysis.suggestions.map(s => `- ${s}`).join('\n')}`;
        
        return new vscode.LanguageModelToolResult([
            new vscode.LanguageModelTextPart(result)
        ]);
    }
    
    private calculateComplexity(code: string): { cyclomatic: number; cognitive: number } {
        // 简化的复杂度计算
        const cyclomaticPatterns = [
            /if\s*\(/g,
            /else\s+if\s*\(/g,
            /while\s*\(/g,
            /for\s*\(/g,
            /switch\s*\(/g,
            /case\s+/g,
            /catch\s*\(/g
        ];
        
        let cyclomaticComplexity = 1; // 基础复杂度
        
        cyclomaticPatterns.forEach(pattern => {
            const matches = code.match(pattern);
            if (matches) {
                cyclomaticComplexity += matches.length;
            }
        });
        
        // 认知复杂度（简化版）
        const cognitiveComplexity = Math.min(cyclomaticComplexity * 1.2, 100);
        
        return {
            cyclomatic: cyclomaticComplexity,
            cognitive: Math.round(cognitiveComplexity)
        };
    }
    
    private generateSuggestions(code: string, language: string): string[] {
        const suggestions: string[] = [];
        
        // 基于代码内容生成建议
        if (code.includes('var ')) {
            suggestions.push('建议使用 let 或 const 替代 var');
        }
        
        if (code.split('\n').length > 50) {
            suggestions.push('函数过长，建议拆分为更小的函数');
        }
        
        if (!/^\s*\/\/|^\s*\/\*|\*/.test(code)) {
            suggestions.push('建议添加注释来提高代码可读性');
        }
        
        if (code.includes('console.log')) {
            suggestions.push('移除或使用适当的日志库替代 console.log');
        }
        
        return suggestions.length > 0 ? suggestions : ['代码质量良好，没有明显问题'];
    }
}

// src/webviewProvider.ts
import * as vscode from 'vscode';
import * as path from 'path';

export class ReactWebviewProvider implements vscode.WebviewViewProvider {
    
    public static readonly viewType = 'reactWebview';
    
    private _view?: vscode.WebviewView;
    
    constructor(
        private readonly _extensionUri: vscode.Uri,
    ) { }
    
    public resolveWebviewView(
        webviewView: vscode.WebviewView,
        context: vscode.WebviewViewResolveContext,
        _token: vscode.CancellationToken,
    ) {
        this._view = webviewView;
        
        webviewView.webview.options = {
            enableScripts: true,
            localResourceRoots: [
                this._extensionUri
            ]
        };
        
        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
        
        // 监听来自React应用的消息
        webviewView.webview.onDidReceiveMessage(data => {
            switch (data.type) {
                case 'openFile':
                    this.openFile(data.path);
                    break;
                case 'saveFile':
                    this.saveFile(data.path, data.content);
                    break;
                case 'getWorkspaceFiles':
                    this.getWorkspaceFiles();
                    break;
            }
        });
    }
    
    private _getHtmlForWebview(webview: vscode.Webview) {
        // 在开发模式下，可以指向本地开发服务器
        const isDevelopment = process.env.NODE_ENV === 'development';
        
        if (isDevelopment) {
            return this._getHtmlForDevelopment();
        } else {
            return this._getHtmlForProduction(webview);
        }
    }
    
    private _getHtmlForDevelopment() {
        return `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>React WebView</title>
        </head>
        <body>
            <div id="root"></div>
            <script src="http://localhost:3000/static/js/bundle.js"></script>
        </body>
        </html>`;
    }
    
    private _getHtmlForProduction(webview: vscode.Webview) {
        // 获取打包后的React应用文件
        const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'out', 'webview', 'bundle.js'));
        const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'out', 'webview', 'bundle.css'));
        
        return `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>React WebView</title>
            <link href="${styleUri}" rel="stylesheet">
            <style>
                body {
                    background-color: var(--vscode-editor-background);
                    color: var(--vscode-editor-foreground);
                    font-family: var(--vscode-font-family);
                    margin: 0;
                    padding: 0;
                }
            </style>
        </head>
        <body>
            <div id="root"></div>
            <script>
                const vscode = acquireVsCodeApi();
                window.vscode = vscode;
            </script>
            <script src="${scriptUri}"></script>
        </body>
        </html>`;
    }
    
    private async openFile(filePath: string) {
        try {
            const document = await vscode.workspace.openTextDocument(filePath);
            await vscode.window.showTextDocument(document);
        } catch (error) {
            vscode.window.showErrorMessage(`无法打开文件: ${error}`);
        }
    }
    
    private async saveFile(filePath: string, content: string) {
        try {
            const uri = vscode.Uri.file(filePath);
            await vscode.workspace.fs.writeFile(uri, Buffer.from(content, 'utf8'));
            vscode.window.showInformationMessage('文件保存成功');
        } catch (error) {
            vscode.window.showErrorMessage(`保存文件失败: ${error}`);
        }
    }
    
    private async getWorkspaceFiles() {
        try {
            const files = await vscode.workspace.findFiles('**/*', '**/node_modules/**', 100);
            const fileList = files.map(file => ({
                path: file.fsPath,
                name: path.basename(file.fsPath)
            }));
            
            this._view?.webview.postMessage({
                type: 'workspaceFiles',
                files: fileList
            });
        } catch (error) {
            vscode.window.showErrorMessage(`获取文件列表失败: ${error}`);
        }
    }
    
    public sendMessage(message: any) {
        this._view?.webview.postMessage(message);
    }
}

// src/dataVisualization.ts
import * as vscode from 'vscode';

export class DataVisualizationProvider {
    
    static createVisualizationPanel(context: vscode.ExtensionContext) {
        const panel = vscode.window.createWebviewPanel(
            'dataVisualization',
            '数据可视化',
            vscode.ViewColumn.One,
            {
                enableScripts: true,
                retainContextWhenHidden: true
            }
        );
        
        panel.webview.html = this.getWebviewContent();
        
        // 处理消息
        panel.webview.onDidReceiveMessage(
            message => {
                switch (message.command) {
                    case 'generateChart':
                        this.generateChartData(panel.webview, message.type);
                        break;
                    case 'exportChart':
                        this.exportChart(message.data);
                        break;
                }
            },
            undefined,
            context.subscriptions
        );
        
        return panel;
    }
    
    private static getWebviewContent(): string {
        return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: var(--vscode-font-family);
            color: var(--vscode-foreground);
            background-color: var(--vscode-editor-background);
            padding: 20px;
        }
        
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid var(--vscode-panel-border);
            border-radius: 5px;
        }
        
        .chart-container {
            position: relative;
            height: 400px;
            margin: 20px 0;
        }
        
        button {
            background-color: var(--vscode-button-background);
            color: var(--vscode-button-foreground);
            border: none;
            padding: 8px 16px;
            margin: 5px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: var(--vscode-button-hoverBackground);
        }
        
        select {
            background-color: var(--vscode-dropdown-background);
            color: var(--vscode-dropdown-foreground);
            border: 1px solid var(--vscode-dropdown-border);
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <h3>图表控制</h3>
        <label>图表类型：</label>
        <select id="chartType">
            <option value="line">折线图</option>
            <option value="bar">柱状图</option>
            <option value="pie">饼图</option>
            <option value="doughnut">环形图</option>
        </select>
        
        <button onclick="generateChart()">生成图表</button>
        <button onclick="exportChart()">导出图表</button>
    </div>
    
    <div class="chart-container">
        <canvas id="chartCanvas"></canvas>
    </div>
    
    <script>
        const vscode = acquireVsCodeApi();
        let currentChart = null;
        
        function generateChart() {
            const chartType = document.getElementById('chartType').value;
            vscode.postMessage({
                command: 'generateChart',
                type: chartType
            });
        }
        
        function exportChart() {
            if (currentChart) {
                const imageData = currentChart.toBase64Image();
                vscode.postMessage({
                    command: 'exportChart',
                    data: imageData
                });
            }
        }
        
        function createChart(type, data) {
            const ctx = document.getElementById('chartCanvas').getContext('2d');
            
            if (currentChart) {
                currentChart.destroy();
            }
            
            currentChart = new Chart(ctx, {
                type: type,
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: {
                                color: 'var(--vscode-foreground)'
                            }
                        }
                    },
                    scales: type !== 'pie' && type !== 'doughnut' ? {
                        x: {
                            ticks: {
                                color: 'var(--vscode-foreground)'
                            },
                            grid: {
                                color: 'var(--vscode-panel-border)'
                            }
                        },
                        y: {
                            ticks: {
                                color: 'var(--vscode-foreground)'
                            },
                            grid: {
                                color: 'var(--vscode-panel-border)'
                            }
                        }
                    } : {}
                }
            });
        }
        
        // 监听来自扩展的消息
        window.addEventListener('message', event => {
            const message = event.data;
            
            switch (message.type) {
                case 'chartData':
                    createChart(message.chartType, message.data);
                    break;
            }
        });
    </script>
</body>
</html>`;
    }
    
    private static generateChartData(webview: vscode.Webview, chartType: string) {
        // 生成示例数据
        const labels = ['一月', '二月', '三月', '四月', '五月', '六月'];
        const data1 = [12, 19, 3, 5, 2, 3];
        const data2 = [2, 3, 20, 5, 1, 4];
        
        let chartData;
        
        switch (chartType) {
            case 'line':
                chartData = {
                    labels: labels,
                    datasets: [{
                        label: '数据集1',
                        data: data1,
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.1
                    }, {
                        label: '数据集2',
                        data: data2,
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.1
                    }]
                };
                break;
                
            case 'bar':
                chartData = {
                    labels: labels,
                    datasets: [{
                        label: '销售额',
                        data: data1,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.8)',
                            'rgba(54, 162, 235, 0.8)',
                            'rgba(255, 205, 86, 0.8)',
                            'rgba(75, 192, 192, 0.8)',
                            'rgba(153, 102, 255, 0.8)',
                            'rgba(255, 159, 64, 0.8)'
                        ]
                    }]
                };
                break;
                
            case 'pie':
            case 'doughnut':
                chartData = {
                    labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
                    datasets: [{
                        data: data1,
                        backgroundColor: [
                            '#FF6384',
                            '#36A2EB',
                            '#FFCE56',
                            '#4BC0C0',
                            '#9966FF',
                            '#FF9F40'
                        ]
                    }]
                };
                break;
                
            default:
                chartData = { labels: [], datasets: [] };
        }
        
        webview.postMessage({
            type: 'chartData',
            chartType: chartType,
            data: chartData
        });
    }
    
    private static async exportChart(imageData: string) {
        try {
            // 移除data:image/png;base64,前缀
            const base64Data = imageData.replace(/^data:image\/png;base64,/, '');
            const buffer = Buffer.from(base64Data, 'base64');
            
            // 保存文件
            const uri = await vscode.window.showSaveDialog({
                defaultUri: vscode.Uri.file('chart.png'),
                filters: {
                    'PNG图片': ['png']
                }
            });
            
            if (uri) {
                await vscode.workspace.fs.writeFile(uri, buffer);
                vscode.window.showInformationMessage(`图表已保存到：${uri.fsPath}`);
            }
        } catch (error) {
            vscode.window.showErrorMessage(`导出图表失败：${error}`);
        }
    }
}

// src/notebookRenderer.ts
import * as vscode from 'vscode';

export class CustomNotebookRenderer {
    
    static register(context: vscode.ExtensionContext) {
        // 注册notebook渲染器
        const renderer = vscode.notebooks.createRendererMessaging('customRenderer');
        
        context.subscriptions.push(renderer);
        
        // 处理来自渲染器的消息
        renderer.onDidReceiveMessage(message => {
            switch (message.type) {
                case 'openFile':
                    this.openFile(message.path);
                    break;
                case 'runCode':
                    this.runCode(message.code, message.language);
                    break;
            }
        });
        
        return renderer;
    }
    
    private static async openFile(path: string) {
        try {
            const uri = vscode.Uri.file(path);
            const document = await vscode.workspace.openTextDocument(uri);
            await vscode.window.showTextDocument(document);
        } catch (error) {
            vscode.window.showErrorMessage(`无法打开文件：${error}`);
        }
    }
    
    private static async runCode(code: string, language: string) {
        // 简单的代码执行示例
        if (language === 'javascript') {
            try {
                // 注意：这里只是示例，实际使用中需要安全的执行环境
                const result = eval(code);
                vscode.window.showInformationMessage(`执行结果：${result}`);
            } catch (error) {
                vscode.window.showErrorMessage(`执行错误：${error}`);
            }
        } else {
            vscode.window.showInformationMessage(`暂不支持 ${language} 语言的执行`);
        }
    }
}