本篇文章給大家分享的是有關(guān)如何開(kāi)發(fā)一個(gè)vscode百度翻譯插件，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、蒲江縣網(wǎng)絡(luò)推廣、微信小程序開(kāi)發(fā)、蒲江縣網(wǎng)絡(luò)營(yíng)銷(xiāo)、蒲江縣企業(yè)策劃、蒲江縣品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供蒲江縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

每次給元素取className的時(shí)候總是時(shí)不時(shí)的要去百度翻譯下，大大的減慢了開(kāi)發(fā)速度，這款簡(jiǎn)易版的vscode百度翻譯插件，直接寫(xiě)中文選中輕松一鍵轉(zhuǎn)換為英文，也可選中英文進(jìn)行翻譯。

一、項(xiàng)目搭建

項(xiàng)目搭建可直接采用官方腳手架。

安裝腳手架

npm install -g yo generator-code

項(xiàng)目生成

yo code

項(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=

三、項(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、ssh

• onView:${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

主要有以下配置

• configuration JSON格式的鍵值對(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)的命令。

以上就是如何開(kāi)發(fā)一個(gè)vscode百度翻譯插件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。