站長資訊網(wǎng)怎么進行vscode插件開發(fā)？本篇文章帶大家一起開發(fā)一個vscode百度翻譯插件，希望對大家有所幫助！
每次給元素取className的時候總是時不時的要去百度翻譯下，大大的減慢了開發(fā)速度，這款簡易版的vscode百度翻譯插件，直接寫中文選中輕松一鍵轉換為英文，也可選中英文進行翻譯?！就扑]學習：《vscode入門教程》】
一、項目搭建
項目搭建可直接采用官方腳手架。
安裝腳手架
npm install -g yo generator-code
項目生成
yo code
新生成的項目結構如圖：
項目運行
直接按F5即可運行，運行成功后會彈出一個新的vscode窗口，窗口標題會注明擴展開發(fā)主機。
二、準備工作
由于該插件采用的是百度翻譯的api，所有首先需要使用百度賬號登錄百度翻譯開放平臺,注冊成為開發(fā)者，獲得APPID以及APPKEY。
接入方式
通過調用通用翻譯API，傳入待翻譯的內(nèi)容，并指定要翻譯的源語言（支持源語言語種自動檢測）和目標語言種類，就可以得到相應的翻譯結果。
請求api如下：
/* q：請求翻譯的字段，utf-8編碼 from：翻譯源語言，可以設置為auto，自動檢測 to：翻譯目標語言 appid：APP ID salt：隨機數(shù) sign：appid+q+salt+密鑰的MD5值 */ https://fanyi-api.baidu.com/api/trans/vip/translate?q=&from=&to=&appid=&salt=&sign=
具體文檔可查看通用翻譯API接入文檔
三、項目開發(fā)
主要的開發(fā)文件就是清單文件package.json以及入口文件extension.js
package.json
配置如下：
{ // 插件名，必須用全小寫無空格的字母組成 "name": "vscode-translate-plugin", // 插件市場所顯示的插件名稱。 "displayName": "vscode-translate-plugin", // 插件描述 "description": "vscode 百度翻譯插件", // 插件版本 "version": "0.0.1", // 插件圖標，最小128x128像素 "icon": "img/icon.png", // 插件最低支持的vscode版本支持 "engines": { "vscode": "^1.50.0" }, // 插件應用市場分類，可選值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs] "categories": [ "Other" ], // 激活事件數(shù)組 "activationEvents": [ "onCommand:vscode-translate-plugin.helloWorld" ], // 插件入口 "main": "./extension.js", // 描述插件的發(fā)布內(nèi)容 "contributes": { "commands": [ { "command": "vscode-translate-plugin.helloWorld", "title": "Hello World" } ] }, "scripts": { "lint": "eslint .", "pretest": "npm run lint", "test": "node ./test/runTest.js" }, "devDependencies": { "@types/vscode": "^1.50.0", "@types/glob": "^7.1.3", "@types/mocha": "^8.0.0", "@types/node": "^12.11.7", "eslint": "^7.9.0", "glob": "^7.1.6", "mocha": "^8.1.3", "typescript": "^4.0.2", "vscode-test": "^1.4.0" } }
主要是配置activationEvents和contributes這兩個配置項
1、activationEvents
插件在VS Code中默認是沒有激活的，那要怎么激活呢？可以通過activationEvents進行配置，目前有以下幾種激活時機。
onLanguage:${language}特定語言文件打開時激活onCommand:${command}調用命令時激活事件onDebug調試會話啟動前激活workspaceContains:${toplevelfilename}文件夾打開后，且文件夾中至少包含一個符合glob模式的文件時觸發(fā)。onFileSystem:${scheme}從協(xié)議（scheme）打開的文件或文件夾打開時觸發(fā)。通常是file-協(xié)議，也可以用自定義的文件供應器函數(shù)替換掉，比如ftp、sshonView:${viewId}指定的視圖id展開時觸發(fā)onUri插件的系統(tǒng)級URI打開時觸發(fā)*當VS Code啟動時觸發(fā)
該翻譯插件在這里配置了三個命令：
"activationEvents": [ // 將英文翻譯成中文命令 "onCommand:extension.translateToZh", // 將中文翻譯成英文命令 "onCommand:extension.translateToEn", // 將中文替換成相應中文的命令 "onCommand:extension.replaceWithEn" ],
2、contributes
主要有以下配置
configurationJSON格式的鍵值對，VS Code為用戶提供了良好的設置支持，該配置項中配置的內(nèi)容會暴露給用戶，用戶可以從“用戶設置”和“工作區(qū)設置”中修改你暴露的選項。commands設置命令標題和命令體menus為編輯器或者文件管理器設置命令的菜單項，菜單項至少包含選中時調用的命令和何時顯示這個菜單項。也可以為該菜單項設置顯示的位置。keybindings快捷鍵綁定languages配置一門語言，引入一門新的語言或者加強VS Code已有的語言支持。debuggers配置VS Code的調試器breakpoints通常調試器插件會有contributes.breakpoints入口，插件可以在這里面設置哪些語言可以設置斷點。grammars為一門語言配置TextMate語法。themes為VS Code添加TextMate主題。snippets為語言添加代碼片段。jsonValidation為json文件添加校驗器。views為VS Code 添加視圖。problemMatchers配置問題定位器的模式。problemPatterns配置可以在問題定位器中可以使用的問題模式的名稱。taskDefinitions配置和定義一個object結構，定義系統(tǒng)中唯一的配置任務。colors這些色彩可用于狀態(tài)欄的編輯器裝飾器。
該翻譯插件的配置如下:
"contributes": { // 命令 "commands": [ { "command": "extension.translateToZh", "title": "translateToZh" }, { "command": "extension.translateToEn", "title": "translateToEn" }, { "command": "extension.replaceWithEn", "title": "replaceWithEn" } ], // 快捷鍵綁定 "keybindings":[ { // 命令 "command": "extension.translateToZh", // windows快捷鍵綁定 "key": "ctrl+shift+t", // mac快捷鍵綁定 "mac": "cmd+shift+t", "when": "editorTextFocus" }, { "command": "extension.translateToEn", "key": "ctrl+shift+e", "mac": "cmd+shift+e", "when": "editorTextFocus" }, { "command": "extension.replaceWithEn", "key": "ctrl+shift+r", "mac": "cmd+shift+r", "when": "editorTextFocus" } ], // 菜單 "menus": { // 編輯器上下文菜單，即點擊鼠標右鍵出來的菜單 "editor/context": [ { // 編輯器聚焦時 "when": "editorFocus", // 點擊菜單項觸發(fā)的命令 "command":"extension.translateToZh", // 分組排序，navigation組始終在最上方 "group": "navigation" }, { "when": "editorFocus", "command":"extension.translateToEn", "group": "navigation" }, { "when": "editorFocus", "command":"extension.replaceWithEn", "group": "navigation" } ] }, // 插件配置項 "configuration": { "type": "object", "title": "translate configuration", "properties": { // 百度翻譯請求api "translate.url": { "type": "string", "default": "****", "description": "百度翻譯API" }, // 百度翻譯appId "translate.appId": { "type": "string", "default": "****", "description": "百度翻譯appId" }, // 百度翻譯appKey "translate.appKey": { "type": "string", "default": "****", "description": "百度翻譯appKey" } } } },
extension.js
該文件為插件的入口文件，一般包括兩個函數(shù)activate和deactivate。其中activate函數(shù)是插件激活時也就是在注冊的activationEvents發(fā)生的時候就會執(zhí)行。deactivate中放的是插件關閉的代碼。
我們需要在插件激活的時候注冊activationEvents里配置的命令，并且實現(xiàn)該命令的觸發(fā)函數(shù)，然后給插件訂閱該命令。
完整代碼如下
const vscode = require('vscode'); const request = require('request') const crypto = require('crypto') const randomstring = require('randomstring') // md5函數(shù) function getMD5(content) { if (!content) { return content } let md5 = crypto.createHash('md5') md5.update(content) let d = md5.digest('hex') return d.toLowerCase() } // 翻譯函數(shù) function translate(targetType) { return new Promise((resolve, reject) => { // 打開的vscode窗口對象 const editor = vscode.window.activeTextEditor // 若沒有打開的窗口，則返回 if (!editor) { console.log('no open text editor') return } // 選中的文本位置 let selection = editor.selection // 獲取選中的文本 let text = editor.document.getText(selection) // 沒有選中的文本，則返回 if (!text) { console.log('no choosed text') return } // 隨機數(shù) let salt = (new Date()).getTime() + randomstring.generate() // 獲取package.json里的配置項 const config = vscode.workspace.getConfiguration() // 請求百度翻譯api，翻譯選中的文本 request.post({ url: config.get("translate.url"), formData: { q: text, from: 'auto', to: targetType, appid: config.get("translate.appId"), salt: salt, sign: getMD5(config.get("translate.appId") + text + salt + config.get("translate.appKey")) } }, function (err, res, body) { if (err) { vscode.window.showInformationMessage('翻譯出錯了：' + err.message) return } try { let msg = JSON.parse(body); if (msg.error_code) { vscode.window.showInformationMessage('翻譯出錯了：' + msg.error_msg); } else { // 返回翻譯結果 resolve((msg.trans_result)[0].dst) } } catch (e) { vscode.window.showInformationMessage('翻譯出錯了：' + e.message); } }) }) } // 文本替換函數(shù)，將當前選中的文本替換為傳進來的val const insertText = (val) => { const editor = vscode.window.activeTextEditor if (!editor) { vscode.window.showErrorMessage('no open text editor') return } const selection = editor.selection const range = new vscode.Range(selection.start, selection.end) editor.edit((editBuilder) => { editBuilder.replace(range, val) }) } /** * @param {vscode.ExtensionContext} context */ // 插件激活時的入口 function activate(context) { // 注冊命令 // 翻譯成中文 var transToZhDisposable = vscode.commands.registerCommand('extension.translateToZh', function () { translate('zh').then(res =>{ // vscode窗口右下角顯示翻譯內(nèi)容 vscode.window.showInformationMessage(decodeURIComponent(res)); }) }) // 翻譯成英文 var transToEnDisposable = vscode.commands.registerCommand('extension.translateToEn', function () { translate('en').then(res =>{ vscode.window.showInformationMessage(decodeURIComponent(res)); }) }) // 將中文替換為英文 var replaceWithEnDisposable = vscode.commands.registerCommand('extension.replaceWithEn', function () { translate('en').then(res =>{ // 將選中的中文替換成相應的英文 insertText(res) }) }) // vscode訂閱注冊的命令 context.subscriptions.push(transToZhDisposable); context.subscriptions.push(transToEnDisposable); context.subscriptions.push(replaceWithEnDisposable); } exports.activate = activate; // 插件釋放的時候觸發(fā) function deactivate() {} module.exports = { activate, deactivate }
至此開發(fā)完成，按F5即可運行項目。按下Ctrl+Shift+P打開vscode的命令面板，輸入插件中注冊的命令，即可執(zhí)行。我們也添加了相應的快捷鍵和菜單，直接使用快捷鍵或者點擊鼠標右鍵出現(xiàn)的菜單都可以執(zhí)行相應的命令。
四、插件發(fā)布
插件發(fā)布可參考文章《VSCode插件開發(fā)全攻略（十）打包、發(fā)布、升級》
https://www.cnblogs.com/liuxianan/p/vscode-plugin-publish.html
