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 文檔