VSCode鼠标点击预选建议项：可行性及实现方法问询

首先说原生支持的替代方案：

• 无需用方向键选中，按住Ctrl（Windows/Linux）或Cmd（Mac），将鼠标悬停在建议项上，就能在面板下方预览该项的完整描述，这是VSCode内置的快捷操作，能满足大部分预览需求。

如果确实需要用鼠标直接切换选中项（而非仅预览），VSCode原生没有这个功能，需要自定义扩展实现，步骤如下：

自定义扩展实现步骤 #

1. 初始化扩展项目 #

用官方工具生成TypeScript扩展模板：

• 全局安装依赖：npm install -g yo generator-code
• 运行yo code，选择New Extension (TypeScript)，按提示完成项目初始化。

2. 核心代码实现 #

修改src/extension.ts，通过Electron API注入DOM事件监听，实现鼠标悬停/点击选中建议项：

import * as vscode from 'vscode';
import { BrowserWindow } from 'electron';

export function activate(context: vscode.ExtensionContext) {
    // 获取VSCode主窗口（Electron实例）
    const mainWindow = BrowserWindow.getAllWindows()[0];
    if (!mainWindow) {
        console.error('Failed to get VSCode main window');
        return;
    }

    // 注入DOM事件监听脚本
    const injectScript = `
        // 鼠标悬停时选中对应建议项
        document.addEventListener('mouseover', (e) => {
            const row = e.target.closest('.monaco-list-row');
            if (row && row.parentElement?.classList.contains('suggestions-list')) {
                const index = Array.from(row.parentElement.children).indexOf(row);
                window.vscode.postMessage({ command: 'selectSuggestion', index });
            }
        }, true);

        // 可选：点击时阻止默认插入行为，仅选中项
        document.addEventListener('click', (e) => {
            const row = e.target.closest('.monaco-list-row');
            if (row && row.parentElement?.classList.contains('suggestions-list')) {
                e.preventDefault();
                e.stopPropagation();
                const index = Array.from(row.parentElement.children).indexOf(row);
                window.vscode.postMessage({ command: 'selectSuggestion', index });
            }
        }, true);
    `;

    mainWindow.webContents.executeJavaScript(injectScript);

    // 注册命令处理选中逻辑
    const selectCommand = vscode.commands.registerCommand('extension.selectSuggestion', async (index: number) => {
        const editor = vscode.window.activeTextEditor;
        if (!editor) return;

        // 模拟方向键切换到目标索引
        const currentIndex = 0;
        const diff = index - currentIndex;

        if (diff > 0) {
            for (let i = 0; i < diff; i++) {
                await vscode.commands.executeCommand('workbench.action.completion.selectNext');
            }
        } else if (diff < 0) {
            for (let i = 0; i < Math.abs(diff); i++) {
                await vscode.commands.executeCommand('workbench.action.completion.selectPrevious');
            }
        }
    });

    context.subscriptions.push(selectCommand);
}

export function deactivate() {}

3. 配置扩展依赖 #

在package.json的devDependencies中添加Electron类型支持：

"devDependencies": {
    "@types/electron": "^1.6.10",
    // 保留其他已有依赖
}

4. 测试与打包 #

• 按F5启动扩展开发环境，触发代码提示后测试鼠标悬停/点击是否能切换选中项。
• 运行vsce package生成.vsix文件，可安装到本地VSCode使用。

注意事项 #

• VSCode的DOM类名（如.monaco-list-row、.suggestions-list）可能随版本更新变化，若功能失效需调整选择器。
• 注入脚本的方式依赖Electron API，适合本地个人使用，受限环境可能无法运行。

内容的提问来源于stack exchange，提问作者de.Beast