0 1

讓程序員頭疼的問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 2

總體設(shè)計(jì)

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

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

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

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

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

0 3

插件實(shí)現(xiàn)

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

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

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

我需要做的是完善對(duì)智譜翻譯智能體的調(diào)用，核心代碼還是很簡(jiǎn)單的，調(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;

值得提醒的是，記得去智譜開放平臺(tái)（bigmodel.cn）去申請(qǐng)一個(gè)API Key。

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

一種是漂浮在英文文本旁邊，用Decoration來實(shí)現(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)建一個(gè)臨時(shí)文檔，顯示在側(cè)邊欄：

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

0 4

運(yùn)行測(cè)試

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

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

這個(gè)例子是對(duì)變量名的翻譯：

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

下面是對(duì)注釋的翻譯：

如果選擇的英文文本比較長(zhǎng)，沒法漂浮在旁邊，就會(huì)生成一個(gè)臨時(shí)文檔，放在英文文檔的右邊，方便對(duì)比著看。

0 5

總結(jié)

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

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

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

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