VSCode で翻訳プラグインを開発する方法を段階的に説明します。-VSCode-php.cn

この記事では、vscode 翻訳プラグインを作成します。翻訳プラグインインスタンスを実装することで、VS Code プラグイン開発の一般的な機能と方法に慣れることができます。困っている友達のお役に立てれば幸いです。

VSCode で翻訳プラグインを開発する方法を段階的に説明します。

#この記事では、変換プラグインインスタンスを実装することにより、VS Code プラグイン開発の一般的な機能と方法について説明します。もちろん、VS Code 公式 API および公式 GitHub Examples にアクセスして、表示して学習することもできます。 [推奨学習: "vscode 入門チュートリアル "]

要件

プログラマにとって、特に英語が苦手な私のような人にとって、翻訳は非常に一般的なニーズです。 . プログラマー。

# は、中国語の翻訳を変数名
で区切られた単語の翻訳に直接置き換えることができます。これは、ソースコード内のコメントの翻訳に使用されます

開発

プロジェクトの初期化

スキャフォールディングを実行してプロジェクトを初期化する

yo code

ログイン後にコピー

VSCode で翻訳プラグインを開発する方法を段階的に説明します。

hello world

ディレクトリを作成した後、エントリファイルに移動して、エントリファイル

./src/extension.ts を見つけます。 activemethod

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

ログイン後にコピー

active メソッドはプラグインのエントリメソッドです。

vscode-fanyi.helloWorld メソッドが登録され、アクティベーションが設定されます。 package.json

イベント、および実行イベントのタイトルは

Hello World Press F5

to debug (新しい vscode 拡張デバッグ)自動的にウィンドウが開きますので、コマンドを実行すると以下のような効果が得られます。

VSCode で翻訳プラグインを開発する方法を段階的に説明します。 Translation API

Translation API 私は Youdao Intelligent Cloud

を使用することにしました、もちろん誰でも選択できます他の翻訳 API を選択した理由は、登録時に 100 元の無料お試し金がもらえるためで、個人使用には十分です。

最初にアプリケーションを作成し、サービスを自然言語翻訳サービスとして選択し、アクセス方法は API VSCode で翻訳プラグインを開発する方法を段階的に説明します。

作成が完了すると、アプリケーションIDと秘密鍵が取得できます。 VSCode で翻訳プラグインを開発する方法を段階的に説明します。

公式 JS デモをベースに Nodejs 版に変更しました

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

ログイン後にコピー

まず、この 3 つのパッケージをインストールします。このうち

crypto-js

は署名を生成します

axios 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;
}

ログイン後にコピー

クエリ結果

正しい場合、翻訳に存在する必要があります

yarn add crypto-js axios querystring

ログイン後にコピー

その後登録を変更しますイベントは非同期で返されます

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

ログイン後にコピー

デバッグ結果を見てみましょう

VSCode で翻訳プラグインを開発する方法を段階的に説明します。単語の置換

最初に選択したテキストを取得し、次に翻訳し、最後に翻訳が完了した後に元のテキストを置き換えます。

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);

ログイン後にコピー

package.json の構成に従います

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]);//替换选中文本
        });
      }
    })
  );
}

ログイン後にコピー

右クリックメニューを追加し、キーボードショートカットをバインドします。

下の図は、vscode 公式メニューのグループ化です。グループ化します。修正されたコードのセクションで

#効果を見てみましょう VSCode で翻訳プラグインを開発する方法を段階的に説明します。

VSCode で翻訳プラグインを開発する方法を段階的に説明します。コードワードの翻訳

VS コードは、provideHover を提供します。マウスがその上に移動すると、現在の単語に基づいていくつかの特定の操作を実行できます。ただし、この翻訳シナリオでは、単一の単語では十分ではないため、選択した単語に基づいて翻訳されます。コードを見てみましょう。

"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"
        }
      ]
    }
  },

ログイン後にコピー

MarkdownString が html に対応していれば、翻訳結果の音声も入れられるのではないかと思っていたのですが、非対応でした。同じような機能をやっている友人はいないでしょうか。コメントエリア。

最も重要な手順は、

package.json

の

activationEvents を "=onStartupFinished に変更することです。これは、 にあります。ドキュメントは . で見つかりました

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

"activationEvents": [
    "onStartupFinished"
  ],

ログイン後にコピー

效果

VSCode で翻訳プラグインを開発する方法を段階的に説明します。

驼峰转换

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

function changeWord(text: string): string {
  if (!text.includes(" ") && text.match(/[A-Z]/)) {
      const str = text.replace(/([A-Z])/g, " $1");
      let value = str.substr(0, 1).toUpperCase() + str.substr(1);
      return value;
  }
  return text;
}

ログイン後にコピー

自定义配置

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

"configuration": {
  	"title": "Vscode  fanyi",
  	"type": "object",
  	"properties": {
  	  "vscodeFanyi.youdaoApiname": {
  		"type": "string",
  		"description": "youdao appKey"
  	  },
  	  "vscodeFanyi.youdaoApikey": {
  		"type": "string",
  		"description": "youdao appSecret"
  	  },
  	}
  }

ログイン後にコピー

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

VSCode で翻訳プラグインを開発する方法を段階的に説明します。

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

const config = vscode.workspace.getConfiguration("vscodeFanyi");
const appKey = config.get("youdaoAppkey") as string;
const appSecret = config.get("youdaoAppSecret") as string;

ログイン後にコピー