vscode系列: 作个五脏俱全的翻译插件

时间 2020-09-23

标签 vscode 系列五脏俱全翻译插件繁體版

原文原文链接

要作的效果以下，就是一个翻译功能~
ios

须要准备

百度翻译开发者帐号，取得 appid 和密钥
npm install -g yo generator-code

关键 vscodeAPI

获取当前活动编辑器选中的文字

vscode.window.activeTextEditor.document.getText(range?: Range)

调用快速选择面板

vscode.window.showQuickPick(items: string[] | Thenable<string[]>, options?: QuickPickOptions)

开始 CODING

脚手架建立文件夹代码

yo code

选择 JavaScript(Extension), 后面所有按 Enter 默认就行。git

百度翻译 API 代码

建立translate-api.js文件github

这里须要知道如何获取用户配置，毕竟同一个 appid 和密钥调用次数有限。须要如下步骤。npm

注册贡献点

在 vscode 中，菜单、命令、视图等等一切须要在用户面前展现的功能都须要在 package.json 中注册贡献点
贡献配置项以下

"contributes": {
    "configuration": [
      {
        "title": "translateNamed",
        "properties": {
          "translate.appid": {
            "type": "string",
            "default": "20200921000570318",
            "description": "百度翻译API-appid"
          },
          "translate.secret": {
            "type": "string",
            "default": "8iaGzb7v0225xQ8SVxqq",
            "description": "百度翻译API-密钥"
          }
        }
      }
    ]
  },

找到用户配置
ok, 注册贡献点后，就能经过 API 找到刚刚注册的配置项啦json

vscode.workspace.getConfiguration().get((section: string))

调用 API
我习惯使用axios因此yarn add axios md5了，其中md5是百度翻译 API 所须要的。axios

OK，如下是translate-api.js的代码。api

const axios = require("axios")
const vscode = require("vscode")
const md5 = require("md5")
const appid = vscode.workspace.getConfiguration().get("translate.appid")
const secret = vscode.workspace.getConfiguration().get("translate.secret")

module.exports = {
  /**
   * 翻译方法
   * @param {string} q 查询字符串
   * @param {string} from 源语言
   * @param {string} to 目标语言
   * @returns {{data: {trans_result:[{src: string, dst: string}]}}} Promise翻译结果
   */
  translate(q, from, to) {
    var salt = Math.random()
    return axios({
      method: "get",
      url: "https://fanyi-api.baidu.com/api/trans/vip/translate",
      params: {
        q,
        appid,
        from,
        to,
        salt,
        sign: md5(appid + q + salt + secret),
      },
    })
  },
}

若是须要替换成其余翻译 API，如：google 翻译只须要更改此 translate-api.js代码就行了。

操做 vscode

回到extension.js中。app

第一步，咱们须要找到当前编辑器选中的文本。dom

const currentEditor = vscode.window.activeTextEditor
const currentSelect = currentEditor.document.getText(currentEditor.selection)

其中currentEditor.document.getText方法须要的是Range，可是因为selection继承于Range能够直接把currentEditor.selection放入参数中。编辑器

第二步分割单词。

翻译出来的单词通常是空格隔开的，因此用空格分割便可。

const list = result.split(" ")
const arr = []
// - 号链接
arr.push(list.map((v) => v.toLocaleLowerCase()).join("-"))
// 下划线链接
arr.push(list.map((v) => v.toLocaleLowerCase()).join("_"))
// 大驼峰
arr.push(list.map((v) => v.charAt(0).toLocaleUpperCase() + v.slice(1)).join(""))
// 小驼峰
arr.push(
  list
    .map((v, i) => {
      if (i !== 0) {
        return v.charAt(0).toLocaleUpperCase() + v.slice(1)
      }
      return v.toLocaleLowerCase()
    })
    .join("")
)

第三步将结果放入快速选择面板中。

let selectWord = await vscode.window.showQuickPick(arr, {
  placeHolder: "请选择要替换的变量名",
})

第四步将选择的结果替换选中的文本

if (selectWord) {
  currentEditor.edit((editBuilder) => {
    editBuilder.replace(currentEditor.selection, selectWord)
  })
}

查看所有代码能够到 github：github

入口文件就是extension.js

为了更方便，注册菜单

为了更方便，注册菜单贡献点。

"menus": {
    "editor/context": [
      {
        "when": "editorHasSelection",
        "command": "translate.zntoen",
        "group": "navigation"
      }
    ]
  }

其中,

when是指何时出现菜单选项, editorHasSelection是指存在编辑器有选中文本时。查看 when 还有那些可用选项?vscode when 贡献点文档

command是指点击菜单时须要执行的命令

group是指菜单放置的地方, 查看 group 还有那些可用的选项？vscode group 文档