Vscode series: make a translation plug-in with five internal organs

The effect is as follows: a translation function~

Need preparation

• Baidu translation developer account, get appid and key
• npm install -g yo generator-code

Key vscodeapi

• Gets the text selected by the currently active editor

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

• Call quick select panel

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

Start coding

Scaffold creation folder code

yo code

Select JavaScript (extension) and press enter after all. The default is OK.

Baidu translation api code

establishtranslate-api.jsfile

Here we need to know how to get the user configuration, after all, the same appid and key call times are limited. The following steps are required.

• Registered contribution point

In vscode, menus, commands, views, and other functions that need to be displayed in front of users need to be displayed in the package.json Registered contribution points in
Contribution configuration items are as follows

"contributes": {
    "configuration": [
      {
        "title": "translateNamed",
        "properties": {
          "translate.appid": {
            "type": "string",
            "default": "20200921000570318",
            "Description": "Baidu translation API appid"
          },
          "translate.secret": {
            "type": "string",
            "default": "8iaGzb7v0225xQ8SVxqq",
            "Description": "Baidu translation API key"
          }
        }
      }
    ]
  },

• User configuration found

  OK, after registering the contribution point, you can find the newly registered configuration item through the API

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

• Call API

  I’m used to itaxiosthereforeyarn add axios md5Yes, among themmd5Baidu translation API is needed.

OK, here’s the followingtranslate-api.jsCode for.

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 = {
  /**
   *Translation methods
   *@ param {string} Q query string
   *@ param {string} from source language
   *@ param {string} to target language
   * @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),
      },
    })
  },
}

If you need to replace it with another translation API, such as Google translation, you only need to change thistranslate-api.jsJust code.

Operation vscode

go back toextension.jsMedium.

First, we need to find the text selected by the current editor.

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

amongcurrentEditor.document.getTextWhat the method needs isRangeBut because ofselectionInherited fromRangeYou can putcurrentEditor.selectionPut it in the parameter.

The second step is to segment the words.

The translated words are generally separated by spaces, so they can be separated by spaces.

const list = result.split(" ")
const arr = []
//- connection
arr.push(list.map((v) => v.toLocaleLowerCase()).join("-"))
//Underline connection
arr.push(list.map((v) => v.toLocaleLowerCase()).join("_"))
//Great hump
arr.push(list.map((v) => v.charAt(0).toLocaleUpperCase() + v.slice(1)).join(""))
//Little hump
arr.push(
  list
    .map((v, i) => {
      if (i !== 0) {
        return v.charAt(0).toLocaleUpperCase() + v.slice(1)
      }
      return v.toLocaleLowerCase()
    })
    .join("")
)

The third step is to put the results into the quick selection panel.

let selectWord = await vscode.window.showQuickPick(arr, {
  Placeholder: "please select the variable name to replace",
})

The fourth step replaces the selected text with the selected result

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

To view all the code, you can go to GitHub:github

The entry file isextension.js

For more convenience, register the menu

For more convenience, register menu contribution points.

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

Among them,

whenWhen menu options appear,editorHasSelectionWhen the editor has selected text. Check when. What other options are available?Vscode when contribution point document

commandIt refers to the command to be executed when clicking on the menu

groupIt refers to the place where the menu is placed. Check the group. What other options are available?Vscode group documentation

Add Icon

In package.json Medium configuration

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

Among them, images/ icon.png It’s a 128 * 128 pixel picture.

Add git repository, modify readme, etc

If the GIT repository is not added, there will be a warning when it is released.

If you do not modify readme, you will not be able to publish!

Create account token

First of all, you must create a Microsoft account and open the link below

https://aka.ms/SignupAzureDevOps

In the upper right corner, click User Settings > personal access tokens

According to the prompt new token

When choosing the scope, choose this way

Sign in

vsce create-publisher your-publisher-name

release

vsce publish

Plug in address:https://marketplace.visualstudio.com/items?itemName=chendm.translate&ssr=false#overview

Vscode searchtranslateNamedTo experience.

GitHub View Code:https://github.com/chendonming/translate