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

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

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

要件

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

• # は、中国語の翻訳を変数名

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

開発

プロジェクトの初期化

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

yo code

hello world

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

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

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 メソッドが登録され、アクティベーションが設定されます。 package.json

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

Hello World Press F5

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

Translation API

Translation API 私は Youdao Intelligent Cloud

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

最初にアプリケーションを作成し、サービスを自然言語翻訳サービスとして選択し、アクセス方法は API

作成が完了すると、アプリケーションIDと秘密鍵が取得できます。

公式 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":[
          "好处",
          "好的",
          "好",
      ]
  },
}

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

単語の置換

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

let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    async () => {
      const res = await youdao(
        'Congratulations, your extension "vscode-fanyi" is now active!'
      );
      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 公式メニューのグループ化です。グループ化します。修正されたコードのセクションで

#効果を見てみましょう

コードワードの翻訳

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

效果

驼峰转换

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

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

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

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

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

小结

本插件与 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 中国語 Web サイトの他の関連記事を参照してください。