首頁 > 開發工具 > VSCode > 主體

手把手教你在VSCode中開發一個翻譯插件

青灯夜游
發布: 2021-11-19 19:12:27
轉載
8614 人瀏覽過

這篇文章帶大家一起來寫一個vscode翻譯插件,透過實現一個翻譯插件實例的方式來熟悉VS Code 插件開發的常見功能和方法,希望對需要的朋友有所幫助!

手把手教你在VSCode中開發一個翻譯插件

本文將透過實​​作一個翻譯外掛實例的方式來熟悉 VS Code 外掛程式開發的常見功能和方法。當然大家可以到 VS Code 官網API 和官方 GitHub 範例 檢視和學習。 【推薦學習:《vscode入門教學》】

需求

#對應程式設計師來說,翻譯是個很常見的需求,尤其像我這樣一個英文不好的程式設計師。

  • 可以直接取代翻譯中文為變數名稱

  • #劃詞翻譯,用於原始碼中的註解翻譯

#開發

初始化專案

執行腳手架,初始化專案

yo code
登入後複製

手把手教你在VSCode中開發一個翻譯插件

## hello world

建立好目錄後,我們可以到入口檔案找到入口檔案

./src/extension.ts 中有個active方法

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "vscode-fanyi" is now active!');
  let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    () => {
      vscode.window.showInformationMessage("Hello World from vscode-fanyi!");
    }
  );
  context.subscriptions.push(disposable);
}
登入後複製

active 方法是插件的入口方法,註冊了一個

vscode-fanyi.helloWorld 方法

"activationEvents": [
    "onCommand:vscode-fanyi.helloWorld"
],
"contributes": {
    "commands": [
        {
            "command": "vscode-fanyi.helloWorld",
            "title": "Hello World"
        }
    ]
}
登入後複製

然後在

package.json中配置了激活的事件,和執行事件的標題是Hello World

F5 調試, 就會自動打開一個新的vscode 擴展調試窗口,執行命令就可以看下如下效果。

手把手教你在VSCode中開發一個翻譯插件

翻譯API

翻譯api 我這邊選擇使用

有道智慧雲,當然大家可以選擇其他翻譯API,選擇它的原因是因為:註冊就有100元的免費體驗金,對於個人使用完全足夠了。

手把手教你在VSCode中開發一個翻譯插件

先建立一個應用,選擇服務為自然語言翻譯服務,存取方式為API

手把手教你在VSCode中開發一個翻譯插件##建立完成後可以獲得應用ID和秘鑰。

根據官方JS demo 改成Nodejs 版本

import CryptoJS from "crypto-js";
import axios from "axios";
import querystring from "querystring";

function truncate(q: string): string {
  var len = q.length;
  if (len <= 20) {
    return q;
  }
  return q.substring(0, 10) + len + q.substring(len - 10, len);
}

async function youdao(query: string) {
  var appKey = "3dde97353116e9bf";
  var key = "xxxxxxxxxx"; //注意:暴露appSecret,有被盗用造成损失的风险
  var salt = new Date().getTime();
  var curtime = Math.round(new Date().getTime() / 1000);
  // 多个query可以用\n连接  如 query=&#39;apple\norange\nbanana\npear&#39;
  var from = "AUTO";
  var to = "AUTO";
  var str1 = appKey + truncate(query) + salt + curtime + key;

  var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);

  const res = await axios.post(
    "http://openapi.youdao.com/api",
    querystring.stringify({
      q: query,
      appKey,
      salt,
      from,
      to,
      sign,
      signType: "v3",
      curtime,
    })
  );
  return res.data;
}
登入後複製

首先要安裝這3個包,其中

crypto-js

產生簽名,axios Nodejs請求庫。

安裝

yarn add crypto-js axios querystring
登入後複製

查詢結果

#如果正確一定存在translation 中

{
  "errorCode":"0",
  "query":"good", //查询正确时,一定存在
  "translation": [ //查询正确时一定存在
      "好"
  ],
  "basic":{ // 有道词典-基本词典,查词时才有
      "phonetic":"gʊd",
      "uk-phonetic":"gʊd", //英式音标
      "us-phonetic":"ɡʊd", //美式音标
      "uk-speech": "XXXX",//英式发音
      "us-speech": "XXXX",//美式发音
      "explains":[
          "好处",
          "好的",
          "好",
      ]
  },
}
登入後複製

然後更改註冊事件為異步返回

let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    async () => {
      const res = await youdao(
        &#39;Congratulations, your extension "vscode-fanyi" is now active!&#39;
      );
      vscode.window.showInformationMessage(res.translation[0]);
    }
  );
  context.subscriptions.push(disposable);
登入後複製

來看下調試結果

手把手教你在VSCode中開發一個翻譯插件

#劃詞替換

先取得選擇文本, 然後翻譯,最後翻譯完成後替換原來文字。

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("vscode-fanyi.replace", async () => {
      let editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }
      let selection = editor.selection;
      let text = editor.document.getText(selection);//选择文本

      //有选中翻译选中的词
      if (text.length) {
        const res = await youdao(text);
        //vscode.window.showInformationMessage(res.translation[0]);
        editor.edit((builder) => {
          builder.replace(selection, res.translation[0]);//替换选中文本
        });
      }
    })
  );
}
登入後複製

跟新下package.json 中的配置

"activationEvents": [
    "onCommand:vscode-fanyi.replace"
 ],
 "contributes": {
    "commands": [
      {
        "command": "vscode-fanyi.replace",
        "title": "翻译"
      }
    ],
    "keybindings": [
      {
        "command": "vscode-fanyi.replace",
        "key": "ctrl+t",
        "mac": "cmd+t",
        "when": "editorTextFocus"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorTextFocus",
          "command": "vscode-fanyi.replace",
          "group": "vscode-fanyi"
        }
      ]
    }
  },
登入後複製

新增一個右鍵選單,綁定鍵盤快捷鍵.

下圖是vscode 官方選單分組,將分組放在修改程式碼部分

手把手教你在VSCode中開發一個翻譯插件一起來看下效果

手把手教你在VSCode中開發一個翻譯插件

劃詞翻譯

#VS code 提供一個provideHover 當滑鼠移動在上面的時候就可以根據當前的單字做一些具體操作,但是這個翻譯的場景下,單字不夠,所以要根據選中的單字來翻譯。一起來看下程式碼吧。

vscode.languages.registerHoverProvider("*", {
    async provideHover(document, position, token) {
      const editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }

      const selection = editor.selection;
      const text = document.getText(selection);

      const res = await youdao(text);

      const markdownString = new vscode.MarkdownString();

      markdownString.appendMarkdown(
        `#### 翻译 \n\n ${res.translation[0]} \n\n`
      );
      if (res.basic) {
        markdownString.appendMarkdown(
          `**美** ${res.basic["us-phonetic"]}    **英** ${res.basic["uk-phonetic"]} \n\n`
        );

        if (res.basic.explains) {
          res.basic.explains.forEach((w: string) => {
            markdownString.appendMarkdown(`${w} \n\n`);
          });
        }
      }
      if (res.web) {
        markdownString.appendMarkdown(`#### 网络释义 \n\n`);
        res.web.forEach((w: Word) => {
          markdownString.appendMarkdown(
            `**${w.key}:** ${String(w.value).toString()} \n\n`
          );
        });
      }
      markdownString.supportHtml = true;
      markdownString.isTrusted = true;

      return new vscode.Hover(markdownString);
    },
  });
登入後複製

本來想 MarkdownString 如果支援 html 的話, 可以把翻譯結果的音訊也放到裡面,奈何不支持,不知道有沒有小夥伴做過類似的功能,可以在評論區交流。

最關鍵的一步,需要在

package.json

中更改activationEvents"=onStartupFinished,這一點可以在文檔中找到.

此激活事件将被发出,并且相关扩展将在VS代码启动后的某个时间被激活。这类似于激活事件,但不会降低VS代码启动的速度。当前,此事件在所有激活的扩展完成激活后发出。

效果

手把手教你在VSCode中開發一個翻譯插件

驼峰转换

如果是变量是驼峰命名,可能无法翻译,需要转换下成空格

自定义配置

将有道 appKey 和 appSecret 改成用户扩展配置, 在下 package.json 中的配置 contributes 添加 configuration配置

就可以在扩展下方填入配置了

手把手教你在VSCode中開發一個翻譯插件

然后在代码中 获得配置,并传入到原先的翻译函数中就可以了

小结

本插件与 comment-translate 对比

1、API 不同

  • 本插件目前只支持有道,用完免费相当于是付费

  • comment-translate 支持百度谷歌和必应,是免费API

2、实现方式不同

  • 本插件是利用 provideHover 划词翻译,实现起来比较简单

  • comment-translate 是hover 翻译,使用 Language Server Extension Guide 实现起来比较复杂

最后附上链接github

vscode 使用范围在扩大,从extensions market 市场上也可以发现,各种功能的插件基本都很齐全。本篇只介绍了其功能的冰山一角,同时 vscode extensions 开发门槛不高,欢迎大家尝试,或者将有意思的 extensions 推荐在评论区。

希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

更多关于VSCode的相关知识,请访问:vscode教程!!

以上是手把手教你在VSCode中開發一個翻譯插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板