VS外掛市場地址: 英漢詞典 - Visual Studio Marketplace

開源在: program-in-chinese/vscode_english_chinese_dictionary

如題圖, 在VS Code外掛頁中搜索"英漢詞典", 即可安裝. 之後如果繼續開發相關外掛, 也會以"中文程式設計"作者釋出.

在編輯器中選中任何英文詞/短語, 如果在詞典中有匹配詞條, 就在狀態列顯示所有釋義和詞形. 為儘量確保狀態條不會過長而被IDE自動隱藏, 當釋義/詞形過長時, 僅擷取前半部分在狀態列顯示, 點選狀態可見所有資訊(如簡介中的演示). 如果原選中詞查不到, 會查全小寫, 若再查不到, 最後查全大寫. 下面是查詢短語:

作為在IDE中實現原始碼翻譯的先行專案, 採用了瀏覽器外掛-離線英漢詞典 0.0.7類似方案. 參考了官網的狀態列例子, 開發過程比想象中的更短一些.

由於沒有找到載入JSON檔案的方法, 直接將瀏覽器外掛中的JSON檔案改為JS (40MB釋義資料, 3MB詞形變化資料), 仍在外掛載入時載入所有資料, 本機也是幾秒. 後續查詞感覺沒什麼效能問題.

暫時想到的改進方向:

1. 由於原始碼中的命名往往是駝峰或下劃線格式, 而雙擊選中文字往往選中整個命名, 考慮翻譯整個命名. 這與瀏覽器外掛的此issue相關: 按照詞性改進命名翻譯 · Issue #9 · program-in-chinese/webextension_github_code_translator
   . (已實現: VS Code英漢詞典外掛v0.0.4-駝峰下劃線命名)
2. 在狀態列選取詞義時, 選取代表性詞義, 而不僅擷取前部分(也已實現: . 比如"hide", 全部釋義是"n. 獸皮, 跡象, 躲藏處 vt. 藏, 隱瞞, 遮避, 剝...的皮, 隱藏 vi. 躲藏 [計] 隱藏". 狀態列現在顯示:

n. 獸皮, 跡象, 躲藏處 vt. 藏, 隱瞞, 遮避,...

改成這樣也許更合適:

n. 獸皮 vt. 藏 vi. 躲藏 [計] 隱藏 ...

最後照例貼段原始碼, 由於載入詞典和查詞部分與瀏覽器外掛很接近, 只選取了IDE相關操作部分(監聽選中文字事件, 根據文字進行查詞). 程式碼還需加工.

function activate(context) {
    const window = vscode.window;
    const StatusBarAlignment = vscode.StatusBarAlignment;
    const workspace = vscode.workspace;
    const commands = vscode.commands;

    const 狀態框 = window.createStatusBarItem(StatusBarAlignment.Right, 100);
    狀態框.command = 'extension.翻譯選中文字';
    context.subscriptions.push(狀態框);

    context.subscriptions.push(window.onDidChangeActiveTextEditor(e => 更新狀態列(狀態框)));
    context.subscriptions.push(window.onDidChangeTextEditorSelection(e => 更新狀態列(狀態框)));
    context.subscriptions.push(window.onDidChangeTextEditorViewColumn(e => 更新狀態列(狀態框)));
    context.subscriptions.push(workspace.onDidOpenTextDocument(e => 更新狀態列(狀態框)));
    context.subscriptions.push(workspace.onDidCloseTextDocument(e => 更新狀態列(狀態框)));

    context.subscriptions.push(commands.registerCommand('extension.翻譯選中文字', () => {
        // TODO: 避免重複查詢(狀態框查詢一次即可?)
        let 文字 = 取選中文字();
        if (文字) {
            window.showInformationMessage(顯示詞條(查詢詞條(文字), 1000));
        }
    }));

    更新狀態列(狀態框);
}

function 更新狀態列(狀態框) {
    let 文字 = 取選中文字();
    if (文字) {
        狀態框.text = '$(megaphone) ' + 顯示詞條(查詢詞條(文字), 30);
        狀態框.show();
    } else {
        狀態框.hide();
    }
}

function 取選中文字() {
    const 當前編輯器 = vscode.window.activeTextEditor;
    const 選中部分 = 當前編輯器.selection;
    return 當前編輯器.document.getText(選中部分);
}

歡迎嚐鮮和反饋.

後續版本介紹:

VS Code英漢詞典v0.0.8: 批量翻譯檔案部分命名

VS Code英漢詞典外掛v0.0.7-嘗試詞性搭配

VS Code英漢詞典外掛v0.0.6-改為TS實現, 加測試

VS Code英漢詞典外掛v0.0.4-駝峰下劃線命名