0 1

讓程序員頭疼的問題

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

在使用VS Code編程和學(xué)習(xí)過程中，經(jīng)常需要面對大量的英文，編程語言是英文，注釋是英文，資料是英文......

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

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

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

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

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

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

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

但是智譜的翻譯體（使用轉(zhuǎn)述翻譯）可以翻譯成：

可見效果是相當(dāng)不錯的。

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

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

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

0 2

總體設(shè)計

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

對于翻譯結(jié)果的展示，在展示的方式上需要區(qū)分一下：

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

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

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

0 3

插件實現(xiàn)

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

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

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

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

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。

當(dāng)VS Code插件收到翻譯結(jié)果以后，就可以展示出來了。

一種是漂浮在英文文本旁邊，用Decoration來實現(xiàn)，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);

另外一種是創(chuàng)建一個臨時文檔，顯示在側(cè)邊欄：

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”：

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

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

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

下面是對注釋的翻譯：

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

0 5

總結(jié)

從我實驗的結(jié)果看，智譜翻譯智能體很容易就能集成到自己的插件中，翻譯的效果相當(dāng)不錯，很準(zhǔn)確，很全面。

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

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

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