視頻教程推薦：vscode基礎教程
要做的效果如下， 就是一個翻譯功能~
需要準備
- 百度翻譯開發者賬號，取得 appid 和密鑰
- npm install -g yo generator-code
關鍵 vscodeAPI
- 獲取當前活動編輯器選中的文字
vscode.window.activeTextEditor.document.getText(range?:?Range)
- 調用快速選擇面板
vscode.window.showQuickPick(items:?string[]?|?Thenable<string>,?options?:?QuickPickOptions)</string>
開始 CODING
腳手架創建文件夾代碼
yo code
選擇 JavaScript(Extension), 后面全部按 Enter 默認就行。
百度翻譯 API 代碼
創建translate-api.js文件
這里需要知道如何獲取用戶配置，畢竟同一個 appid 和密鑰調用次數有限。需要以下步驟。
-
注冊貢獻點
在 vscode 中，菜單、命令、視圖等等一切需要在用戶面前展示的功能都需要在 package.json 中注冊貢獻點
貢獻配置項如下
"contributes": { "configuration": [ { "title": "translateNamed", "properties": { "translate.appid": { "type": "string", "default": "20200921000570318", "description": "百度翻譯API-appid" }, "translate.secret": { "type": "string", "default": "8iaGzb7v0225xQ8SVxqq", "description": "百度翻譯API-密鑰" } } } ] },
- 找到用戶配置
ok, 注冊貢獻點后，就能通過 API 找到剛剛注冊的配置項啦
vscode.workspace.getConfiguration().get((section:?string))
- 調用 API
我習慣使用axios所以yarn add axios md5了， 其中md5是百度翻譯 API 所需要的。
OK， 以下是translate-api.js的代碼。
const?axios?=?require("axios") const?vscode?=?require("vscode") const?md5?=?require("md5") const?appid?=?vscode.workspace.getConfiguration().get("translate.appid") const?secret?=?vscode.workspace.getConfiguration().get("translate.secret") module.exports?=?{ ??/** ???*?翻譯方法 ???*?@param?{string}?q?查詢字符串 ???*?@param?{string}?from?源語言 ???*?@param?{string}?to?目標語言 ???*?@returns?{{data:?{trans_result:[{src:?string,?dst:?string}]}}}?Promise翻譯結果 ???*/ ??translate(q,?from,?to)?{ ????var?salt?=?Math.random() ????return?axios({ ??????method:?"get", ??????url:?"https://fanyi-api.baidu.com/api/trans/vip/translate", ??????params:?{ ????????q, ????????appid, ????????from, ????????to, ????????salt, ????????sign:?md5(appid?+?q?+?salt?+?secret), ??????}, ????}) ??}, }
如果需要替換成其他翻譯 API，如：google 翻譯 只需要更改此translate-api.js代碼就好了。
操作 vscode
回到extension.js中。
第一步， 我們需要找到當前編輯器選中的文本。
const?currentEditor?=?vscode.window.activeTextEditor const?currentSelect?=?currentEditor.document.getText(currentEditor.selection)
其中currentEditor.document.getText方法需要的是Range，但是由于selection繼承于Range可以直接把currentEditor.selection放入參數中。
第二步 分割單詞。
翻譯出來的單詞一般是空格隔開的， 所以用空格分割即可。
const?list?=?result.split("?") const?arr?=?[] //?-?號連接 arr.push(list.map((v)?=>?v.toLocaleLowerCase()).join("-")) //?下劃線連接 arr.push(list.map((v)?=>?v.toLocaleLowerCase()).join("_")) //?大駝峰 arr.push(list.map((v)?=>?v.charAt(0).toLocaleUpperCase()?+?v.slice(1)).join("")) //?小駝峰 arr.push( ??list ????.map((v,?i)?=>?{ ??????if?(i?!==?0)?{ ????????return?v.charAt(0).toLocaleUpperCase()?+?v.slice(1) ??????} ??????return?v.toLocaleLowerCase() ????}) ????.join("") )
第三步 將結果放入快速選擇面板中。
let?selectWord?=?await?vscode.window.showQuickPick(arr,?{ ??placeHolder:?"請選擇要替換的變量名", })
第四步 將選擇的結果替換選中的文本
if?(selectWord)?{ ??currentEditor.edit((editBuilder)?=>?{ ????editBuilder.replace(currentEditor.selection,?selectWord) ??}) }
查看全部代碼可以到 github：github
入口文件就是extension.js
為了更方便，注冊菜單
為了更方便，注冊菜單貢獻點。
??"menus":?{ ????"editor/context":?[ ??????{ ????????"when":?"editorHasSelection", ????????"command":?"translate.zntoen", ????????"group":?"navigation" ??????} ????] ??}
其中,
when是指什么時候出現菜單選項, editorHasSelection是指存在編輯器有選中文本時。查看 when 還有那些可用選項?vscode when 貢獻點 文檔
command是指點擊菜單時需要執行的命令
group是指菜單放置的地方, 查看 group 還有那些可用的選項？vscode group 文檔
添加圖標
在 package.json 中配置
"icon":?"images/icon.png",
其中 images/icon.png 是 128*128 像素的圖片。
添加 git 倉庫，修改 readme 等
如果不添加 git 倉庫，發布的時候會有警告。
如果不修改 readme, 將無法發布！
創建賬號 token
首先你必須先得創建一個微軟賬號， 創建完畢后打開如下鏈接
https://aka.ms/SignupAzureDevOps
右上角點擊用戶設置-> Personal access tokens
根據提示new token
選擇范圍的時候,這樣選擇
登錄
vsce create-publisher your-publisher-name
發布
vsce publish
插件地址: https://marketplace.visualstudio.com/items?itemName=chendm.translate&ssr=false#overview
vscode搜索translateNamed, 即可體驗。
github查看代碼: https://github.com/chendonming/translate
更多編程相關知識，請訪問：編程入門！！
