这篇文章是关于如何开发一个vscode百度翻译插件。边肖觉得很实用，所以分享给大家学习。希望你看完这篇文章能有所收获。我们就不多说了。让我们和边肖一起看看。
每次为一个元素选择className，总要时不时的去百度翻译，大大减缓了开发速度。这个简单版的vscode百度翻译插件可以直接用中文写，一键轻松转换成英文，也可以中英文同时翻译。
一、项目搭建
项目可以直接搭建官方脚手架。
安装脚手架
npminstall-gyogenerator-代码项目生成
yocode
项目运行
直接按F5运行。操作成功后，将弹出一个新的vscode窗口，窗口标题将指示扩展的开发主机。
00-1010由于插件使用了百度翻译的api，所有用户都需要先用百度账号登录百度翻译开放平台，注册为开发者，获取APPID和APPKEY。
接入方式
通过调用通用翻译API，传入需要翻译的内容，指定源语言(支持自动检测源语言)和需要翻译的目标语言类型，就可以得到相应的翻译结果。
请求api如下：
/*
q:翻译字段，utf-8编码
From:翻译源语言，可以设置为auto进行自动检测。
To:翻译目标语言
appid:APPID
盐：随机数
符号的MD5值：appid qsalt键
*/
https://fanyi-api.baidu.com/api/trans/vip/translate?q=from=to=appid=salt=sign=
00-1010的主要开发文件是清单文件package.json和入口文件扩展名. js
package.json
配置如下：
{
//插件名称，必须由无空格的所有小写字母组成。
名称' :'vscode-translate-plugin '，
//插件市场显示的插件名称。
显示名称' :'vscode-translate-plugin '，
//插件描述
描述' :'vscode百度翻译插件'，
//插件版本
版本' :'0.0.1 '，
//插件图标，最小128x128像素
icon':'img/icon.png '，
//插件支持的vscode的最低支持版本
发动机' :{
'vscode':'^1.50.0'
},
//插件应用市场分类，可选值：【编程语言、代码片段、摘要、主题、调试器、格式化程序、键映射、SCM提供程序、其他、扩展包、语言包】
类别' :[
“其他”
],
//激活事件数组
activationEvents':[
'命令： vs code-translate-plugin . hello world '
],
//插件入口
mainquo
t;: "./extension.js",
// 描述插件的发布内容
"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模式的文件时触发。 -
onFileSystem:${scheme}从协议（scheme）打开的文件或文件夹打开时触发。通常是file-协议，也可以用自定义的文件供应器函数替换掉，比如ftp、ssh -
onView:${viewId}指定的视图id展开时触发 -
onUri插件的系统级URI打开时触发 -
*当VS Code启动时触发
该翻译插件在这里配置了三个命令：
"activationEvents": [ // 将英文翻译成中文命令 "onCommand:extension.translateToZh", // 将中文翻译成英文命令 "onCommand:extension.translateToEn", // 将中文替换成相应中文的命令 "onCommand:extension.replaceWithEn" ],
2、contributes
主要有以下配置
-
configurationJSON格式的键值对，VS Code为用户提供了良好的设置支持，该配置项中配置的内容会暴露给用户，用户可以从“用户设置”和“工作区设置”中修改你暴露的选项。 -
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结构，定义系统中唯一的配置任务。 -
colors这些色彩可用于状态栏的编辑器装饰器。
该翻译插件的配置如下:
"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",
// 点击菜单项触发的命令
"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
该文件为插件的入口文件，一般包括两个函数activate和deactivate。其中activate函数是插件激活时也就是在注册的activationEvents发生的时候就会执行。deactivate中放的是插件关闭的代码。
我们需要在插件激活的时候注册activationEvents里配置的命令，并且实现该命令的触发函数，然后给插件订阅该命令。
完整代码如下
const vscode = require('vscode');
const request = require('request')
const crypto = require('crypto')
const randomstring = require('randomstring')
// md5函数
function getMD5(content) {
if (!content) {
return content
}
let md5 = crypto.createHash('md5')
md5.update(content)
let d = md5.digest('hex')
return d.toLowerCase()
}
// 翻译函数
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
}
// 随机数
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);
}
})
})
}
// 文本替换函数，将当前选中的文本替换为传进来的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窗口右下角显示翻译内容
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;
// 插件释放的时候触发
function deactivate() {}
module.exports = {
activate,
deactivate
}
至此开发完成，按F5即可运行项目。按下Ctrl+Shift+P打开vscode的命令面板，输入插件中注册的命令，即可执行。我们也添加了相应的快捷键和菜单，直接使用快捷键或者点击鼠标右键出现的菜单都可以执行相应的命令。
以上就是如何开发一个vscode百度翻译插件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/144624.html