vscodepython翻译插件(vscode中好用的中文翻译插件)

• 攻略

技术如何开发一个vscode百度翻译插件本篇文章给大家分享的是有关如何开发一个vscode百度翻译插件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。每次给元

这篇文章是关于如何开发一个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

主要有以下配置

  • configuration JSON格式的键值对，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

赞 (0)

相关推荐

  • Redis面试常见问题有哪些

    技术Redis面试常见问题有哪些本篇内容主要讲解“Redis面试常见问题有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Redis面试常见问题有哪些”吧!1. 什么是缓存

    攻略 2021年11月18日

  • sql怎么优化效率(sql如何调优化)

    技术SQL该怎么优化这篇文章主要讲解了“SQL该怎么优化”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“SQL该怎么优化”吧！一、避免进行null判断。 应尽量避免在 wh

    攻略 2021年12月17日

  • IE8下DIV嵌套出现错误怎么办

    技术IE8下DIV嵌套出现错误怎么办这篇文章给大家分享的是有关IE8下DIV嵌套出现错误怎么办的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。IE8下DIV嵌套出现错误解决方案最近用DIV写了几

    攻略 2021年11月6日

  • zookeeper存在什么问题(zookeeper的作用是怎么实现的)

    技术ZooKeeper的问题都有哪些这期内容当中小编将会给大家带来有关ZooKeeper的问题都有哪些，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1. 面试官：工作中使用过Zooke

    攻略 2021年12月24日

  • 网络协议tcp和udp(tcp和udp协议通过什么区分)

    技术网络协议TCP和UDP怎么理解这篇文章主要讲解了“网络协议TCP和UDP怎么理解”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“网络协议TCP和UDP怎么理解”吧！国际

    攻略 2021年12月21日

  • oracle实例的内存结构(oracle实例由内存结构和什么组成)

    技术Oracle内存和架构知识点有哪些本篇内容介绍了“Oracle内存和架构知识点有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，

    攻略 2021年12月22日