欧美粉嫩小泬久久久久久久,久久青青草原综合伊人,99re久久精品国产首页2020

本篇文章帶大家一起來寫一個vscode翻譯插件，通過實現一個翻譯插件實例的方式來熟悉 vs code 插件開發的常見功能和方法，希望對需要的朋友有所幫助！

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

本文將通過實現一個翻譯插件實例的方式來熟悉 VS Code 插件開發的常見功能和方法。當然大家可以前往 VS Code vscode 和官方 vscode 查看和學習。【推薦學習：《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", ????()?=&gt;?{ ??????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 我這邊選擇使用 vscode，當然大家可以選擇其他翻譯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?<p>首先要安裝這3個包，其中 crypto-js 生成簽名，axios Nodejs 請求庫。</p><p><strong>安裝</strong></p><pre class="brush:js;toolbar:false;">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?()?=&gt;?{ ??????const?res?=?await?youdao( ????????'Congratulations,?your?extension?"vscode-fanyi"?is?now?active!' ??????); ??????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?()?=&gt;?{ ??????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)?=&gt;?{ ??????????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( ????????`####?翻譯?nn?${res.translation[0]}?nn` ??????); ??????if?(res.basic)?{ ????????markdownString.appendMarkdown( ??????????`**美**?${res.basic["us-phonetic"]}　　　　**英**?${res.basic["uk-phonetic"]}　nn` ????????);  ????????if?(res.basic.explains)?{ ??????????res.basic.explains.forEach((w:?string)?=&gt;?{ ????????????markdownString.appendMarkdown(`${w}?nn`); ??????????}); ????????} ??????} ??????if?(res.web)?{ ????????markdownString.appendMarkdown(`####?網絡釋義?nn`); ????????res.web.forEach((w:?Word)?=&gt;?{ ??????????markdownString.appendMarkdown( ????????????`**${w.key}:**?${String(w.value).toString()}?nn` ??????????); ????????}); ??????} ??????markdownString.supportHtml?=?true; ??????markdownString.isTrusted?=?true;  ??????return?new?vscode.Hover(markdownString); ????}, ??});

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

最關鍵的一步,需要在 package.json 中更改 activationEvents 為 “=onStartupFinished，這一點可以在vscode中找到.

此激活事件將被發出，并且相關擴展將在VS代碼啟動后的某個時間被激活。這類似于激活事件，但不會降低VS代碼啟動的速度。當前，此事件在所有激活的擴展完成激活后發出。

"activationEvents":?[ ????"onStartupFinished" ??],

效果

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

駝峰轉換

如果是變量是駝峰命名，可能無法翻譯，需要轉換下成空格

function?changeWord(text:?string):?string?{ ??if?(!text.includes("?")?&amp;&amp;?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;