要做的成果如下， 就是一个翻译性能~

须要筹备

  • 百度翻译开发者账号，获得 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 默认就行。

百度翻译 API 代码

创立translate-api.js文件

这里须要晓得如何获取用户配置，毕竟同一个 appid 和密钥调用次数无限。须要以下步骤。

  • 注册奉献点
在 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 找到刚刚注册的配置项啦

vscode.workspace.getConfiguration().get((section: string))
  • 调用 API

    我习惯应用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 目标语言   * @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中。

第一步， 咱们须要找到以后编辑器选中的文本。

const currentEditor = vscode.window.activeTextEditorconst 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 文档

增加图标

在 package.json 中配置

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

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

增加 git 仓库，批改 readme 等

如果不增加 git 仓库，公布的时候会有正告。

如果不批改 readme, 将无奈公布！

创立账号 token

首先你必须先得创立一个微软账号， 创立结束后关上如下链接

https://aka.ms/SignupAzureDevOps

右上角点击用户设置-> Personal access tokens

依据提醒new token

抉择范畴的时候,这样抉择

登录

vsce create-publisher your-publisher-name

公布

vsce

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

vscode搜寻translateNamed, 即可体验。

github查看代码: https://github.com/chendonming/translate