VSCode で翻訳プラグインを開発する方法を段階的に説明します。
- 青灯夜游転載
- 2021-11-19 19:12:278612ブラウズ
この記事では、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
Translation API 私は Youdao Intelligent Cloud
を使用することにしました、もちろん誰でも選択できます他の翻訳 API を選択した理由は、登録時に 100 元の無料お試し金がもらえるためで、個人使用には十分です。最初にアプリケーションを作成し、サービスを自然言語翻訳サービスとして選択し、アクセス方法は API
作成が完了すると、アプリケーションIDと秘密鍵が取得できます。
"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='apple\norange\nbanana\npear'
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 实现起来比较复杂
vscode 使用范围在扩大，从extensions market 市场上也可以发现，各种功能的插件基本都很齐全。本篇只介绍了其功能的冰山一角，同时 vscode extensions 开发门槛不高，欢迎大家尝试，或者将有意思的 extensions 推荐在评论区。
希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
更多关于VSCode的相关知识，请访问：vscode教程！！
以上がVSCode で翻訳プラグインを開発する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。