這篇文章帶大家一起來寫一個vscode翻譯插件,透過實現一個翻譯插件實例的方式來熟悉VS Code 插件開發的常見功能和方法,希望對需要的朋友有所幫助!
本文將透過實作一個翻譯外掛實例的方式來熟悉 VS Code 外掛程式開發的常見功能和方法。當然大家可以到 VS Code 官網API 和官方 GitHub 範例 檢視和學習。 【推薦學習:《vscode入門教學》】
#對應程式設計師來說,翻譯是個很常見的需求,尤其像我這樣一個英文不好的程式設計師。
可以直接取代翻譯中文為變數名稱
#劃詞翻譯,用於原始碼中的註解翻譯
執行腳手架,初始化專案
yo code
./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); }
vscode-fanyi.helloWorld 方法
"activationEvents": [ "onCommand:vscode-fanyi.helloWorld" ], "contributes": { "commands": [ { "command": "vscode-fanyi.helloWorld", "title": "Hello World" } ] }
package.json中配置了激活的事件,和執行事件的標題是
Hello World
F5 調試, 就會自動打開一個新的vscode 擴展調試窗口,執行命令就可以看下如下效果。
有道智慧雲,當然大家可以選擇其他翻譯API,選擇它的原因是因為:註冊就有100元的免費體驗金,對於個人使用完全足夠了。
先建立一個應用,選擇服務為自然語言翻譯服務,存取方式為API##建立完成後可以獲得應用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='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; }
首先要安裝這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( 'Congratulations, your extension "vscode-fanyi" is now active!' ); vscode.window.showInformationMessage(res.translation[0]); } ); context.subscriptions.push(disposable);
來看下調試結果
#劃詞替換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.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 中更改 此激活事件将被发出,并且相关扩展将在VS代码启动后的某个时间被激活。这类似于激活事件,但不会降低VS代码启动的速度。当前,此事件在所有激活的扩展完成激活后发出。 效果 如果是变量是驼峰命名,可能无法翻译,需要转换下成空格 将有道 appKey 和 appSecret 改成用户扩展配置, 在下 就可以在扩展下方填入配置了 然后在代码中 获得配置,并传入到原先的翻译函数中就可以了 本插件与 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中文網其他相關文章!activationEvents
為"=onStartupFinished
,這一點可以在文檔
中找到."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;
}
自定义配置
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;
小结