0 1

讓程序員頭疼的問題

VS Code是當今最流行的代碼編輯器，也是很多程序員的主力編程工具。

在使用VS Code編程和學習過程中，經常需要面對大量的英文，編程語言是英文，注釋是英文，資料是英文......

程序員如果英文不過關，連簡單的英文變量名和函數名讀起來都很吃力，更不用說長文本注釋和長篇大論的英文文檔了，這對于程序員來說是很大的阻礙。

當然，我們可以把這些英文復制/粘貼到翻譯軟件或者翻譯網站中，看看中文含義，然后再返回VS Code繼續，這樣來回切換，對編程思路來說是很大的打斷。

現在的瀏覽器中有不少沉浸式翻譯的插件，VS Code也支持插件/擴展，同樣也可以開發出類似的沉浸式翻譯功能，確實有人這么做了，但是很多VS Code插件只支持單詞翻譯，不支持整個句子/文檔的翻譯。即使是支持，用的大多是上一代機翻技術，機械的翻譯，無法達到信達雅的效果。

最近我注意到智譜BigModel開放平臺（bigmodel.cn）的應用空間中推出了多個“翻譯智能體”：

它不但支持通用的多語種翻譯，還支持專業文檔翻譯，文學翻譯，影視字幕翻譯和社交媒體翻譯。

我嘗試了一下，發現它翻譯的效果相當不錯，比如這句英文：Caught between a rock and a hard drive with this coding dilemma.

普通的機器可能翻譯為：陷入這種編碼困境的巖石和硬盤之間。

但是智譜的翻譯體（使用轉述翻譯）可以翻譯成：

可見效果是相當不錯的。

這些翻譯智能體不但可以在網頁端直接使用，也對外提供了API：

我立刻就想到，為什么不利用它開發一個VS Code 的插件呢？

在VS Code只需要選中變量名、方法名、注釋、文檔等英文，然后利用智譜翻譯智能體強悍的能力進行翻譯。

0 2

總體設計

這個插件可以叫做"Code Translator"，用戶在VS Code中選取一段代碼中的英文文本（可能是變量名、方法名、注釋、文檔），點擊右鍵，在彈出的菜單中選擇“翻譯”，插件會把用戶選中的英文文本發給翻譯智能體。

對于翻譯結果的展示，在展示的方式上需要區分一下：

1.如果要翻譯的英文比較短，可以把翻譯的結果漂浮在英文文本旁邊。

2.如果英文本身就比較長（例如很長的注釋，整個文檔），可以把翻譯成的中文放到一個臨時文件中，展示給用戶。

值得注意的是，需要對變量，函數名，類名等需要做一些預處理，例如把parsePropertyElement進行切分，變成Parse Property Element 然后進行翻譯。

0 3

插件實現

我之前做過Eclipse插件的開發，沒有做過VS Code插件的開發，但是這兩個產品都出自大神Eric Gamma，我相信這兩者肯定有相似之處，應該都是找到某個擴展點，然后寫對應的擴展代碼。

何況現在還有大模型，可以讓它輔助把大部分代碼都生成！

在自動生成的代碼中，已經基本完成了VS Code插件所需的配置，尤其是當點擊右鍵時對彈出菜單項“Translate”的處理，由于有很多VS Code插件所需的樣板代碼，這里就不一一展示了。

我需要做的是完善對智譜翻譯智能體的調用，核心代碼還是很簡單的，調用起來非常方便，一目了然。

const response = await axios.post(
  url,
  {
    agent_id: 'general_translation',
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'text',
            text: text
          }
        ]
      }
    ],
    custom_variables: {
      source_lang: 'en',
      target_lang: 'zh'
    }
  },
  {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    }
  }
);
const data = response.data;
const translatedText = data?.choices?.[0]?.messages?.[0]?.content?.text || '[No translation found]';
return translatedText;

值得提醒的是，記得去智譜開放平臺（bigmodel.cn）去申請一個API Key。

當VS Code插件收到翻譯結果以后，就可以展示出來了。

一種是漂浮在英文文本旁邊，用Decoration來實現，5秒后消失。

const deco = vscode.window.createTextEditorDecorationType({
      after: {
        contentText: ` → ${translatedText}`,
        color: 'gray',
        margin: '0 0 0 1em',
        fontStyle: 'italic'
          }
       });
       editor.setDecorations(deco, [selection]);
       setTimeout(() => deco.dispose(), 5000);

另外一種是創建一個臨時文檔，顯示在側邊欄：

const content = `${translatedText}`;
const doc = await vscode.workspace.openTextDocument(
  { content, language: 'markdown' });
vscode.window.showTextDocument(doc, vscode.ViewColumn.Beside, true);

0 4

運行測試

我拿了一個早期的Spring源代碼做了一下測試，在VS Code中，選擇一個方法名（"afterPropertiesSet"），點擊右鍵，在彈出菜單中選擇“Translate”：

翻譯結果(“設置屬性后”)立刻就顯示在旁邊了，5秒后就自動消失。

這個例子是對變量名的翻譯：

無論是對變量名，函數名，還是類名，都進行了一些預處理，把camelCase，PascalCase，snake_case拆分成了具體的單詞。

下面是對注釋的翻譯：

如果選擇的英文文本比較長，沒法漂浮在旁邊，就會生成一個臨時文檔，放在英文文檔的右邊，方便對比著看。

0 5

總結

從我實驗的結果看，智譜翻譯智能體很容易就能集成到自己的插件中，翻譯的效果相當不錯，很準確，很全面。

使用這個小插件，程序員可以在編程和學習迅速地把不懂的英文翻譯成中文，沉浸式地閱讀資料，不用在VS Code和其他翻譯系統直接來回切換，可以很大程度上提升專注度，讓自己的開發流程更加順暢。

當然，這個插件還有很大的改進空間，比如：可以把常用的詞緩存起來，避免多次調用；對注釋格式的處理要更加智能；翻譯結果的顯示位置要更加合理等等；還可以加入自定義的計算機專業詞庫，進一步調優翻譯的質量。

這個VS Code插件只是智譜翻譯智能體的一個小小的應用，強烈建議大家也到智譜開放平臺（bigmodel.cn）去看看，嘗試一下智譜翻譯智能體，發揮你的想象力，也許可以用它開發出更有創意的應用/網站，甚至出海去賺錢呢！