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