vscode實(shí)戰(zhàn)之如何開發(fā)一個(gè)翻譯插件

這篇文章主要為大家展示了vscode實(shí)戰(zhàn)之如何開發(fā)一個(gè)翻譯插件，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“vscode實(shí)戰(zhàn)之如何開發(fā)一個(gè)翻譯插件”這篇文章吧。

vscode有什么用

Visual Studio Code 是一個(gè)運(yùn)行于 OS X，Windows和 Linux 之上的，針對(duì)于編寫現(xiàn)代 web 和云應(yīng)用的跨平臺(tái)編輯器，它為開發(fā)者們提供了對(duì)多種編程語言的內(nèi)置支持，并且正如 Microsoft 在Build 大會(huì)的 keynote 中所指出的，這款編輯器也會(huì)為這些語言都提供了豐富的代碼補(bǔ)全和導(dǎo)航功能。

要做的效果如下， 就是一個(gè)翻譯功能~

需要準(zhǔn)備

• 百度翻譯開發(fā)者賬號(hào)，取得 appid 和密鑰

• npm install -g yo generator-code

關(guān)鍵 vscodeAPI

• 獲取當(dāng)前活動(dòng)編輯器選中的文字

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

• 調(diào)用快速選擇面板

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

開始 CODING

腳手架創(chuàng)建文件夾代碼

yo code

選擇 JavaScript(Extension), 后面全部按 Enter 默認(rèn)就行。

百度翻譯 API 代碼

創(chuàng)建translate-api.js文件

這里需要知道如何獲取用戶配置，畢竟同一個(gè) appid 和密鑰調(diào)用次數(shù)有限。需要以下步驟。

• 注冊(cè)貢獻(xiàn)點(diǎn)

在 vscode 中，菜單、命令、視圖等等一切需要在用戶面前展示的功能都需要在 package.json 中注冊(cè)貢獻(xiàn)點(diǎn)

貢獻(xiàn)配置項(xiàng)如下

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

• 找到用戶配置

  ok, 注冊(cè)貢獻(xiàn)點(diǎn)后，就能通過 API 找到剛剛注冊(cè)的配置項(xiàng)啦

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

• 調(diào)用 API

  我習(xí)慣使用axios所以yarn add axios md5了， 其中md5是百度翻譯 API 所需要的。

OK， 以下是translate-api.js的代碼。

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 目標(biāo)語言
   * @returns {{data: {trans_result:[{src: string, dst: string}]}}} Promise翻譯結(jié)果
   */
  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中。

第一步， 我們需要找到當(dāng)前編輯器選中的文本。

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

其中currentEditor.document.getText方法需要的是Range，但是由于selection繼承于Range可以直接把currentEditor.selection放入?yún)?shù)中。

第二步 分割單詞。

翻譯出來的單詞一般是空格隔開的， 所以用空格分割即可。

const list = result.split(" ")
const arr = []
// - 號(hào)連接
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("")
)

第三步 將結(jié)果放入快速選擇面板中。

let selectWord = await vscode.window.showQuickPick(arr, {
  placeHolder: "請(qǐng)選擇要替換的變量名",
})

第四步 將選擇的結(jié)果替換選中的文本

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

查看全部代碼可以到 github：github

入口文件就是extension.js

為了更方便，注冊(cè)菜單

為了更方便，注冊(cè)菜單貢獻(xiàn)點(diǎn)。

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

其中,

when是指什么時(shí)候出現(xiàn)菜單選項(xiàng), editorHasSelection是指存在編輯器有選中文本時(shí)。查看 when 還有那些可用選項(xiàng)?vscode when 貢獻(xiàn)點(diǎn) 文檔

command是指點(diǎn)擊菜單時(shí)需要執(zhí)行的命令

group是指菜單放置的地方, 查看 group 還有那些可用的選項(xiàng)？vscode group 文檔

添加圖標(biāo)

在 package.json 中配置

"icon": "images/icon.png",

其中 images/icon.png 是 128*128 像素的圖片。

添加 git 倉(cāng)庫(kù)，修改 readme 等

如果不添加 git 倉(cāng)庫(kù)，發(fā)布的時(shí)候會(huì)有警告。

如果不修改 readme, 將無法發(fā)布！

創(chuàng)建賬號(hào) token

首先你必須先得創(chuàng)建一個(gè)微軟賬號(hào)， 創(chuàng)建完畢后打開如下鏈接

https://aka.ms/SignupAzureDevOps

右上角點(diǎn)擊用戶設(shè)置-> Personal access tokens

根據(jù)提示new token

選擇范圍的時(shí)候,這樣選擇

登錄

vsce create-publisher your-publisher-name

發(fā)布

vsce publish

插件地址: https://marketplace.visualstudio.com/items?itemName=chendm.translate&ssr=false#overview

vscode搜索translateNamed, 即可體驗(yàn)。

以上就是關(guān)于“vscode實(shí)戰(zhàn)之如何開發(fā)一個(gè)翻譯插件”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。