因为懒,我写了个vscode插件。

160 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 3 天,点击查看活动详情

前言

因为英格里希不好所以基于vscode写了个翻译插件。

效果图

11.gif

开发前须知

开发vscode插件需要安装以下的库:

npm install yo generator-code -g

1.yo code安装框架详细文档

2.主要文件:image.png extension.js是入口文件。

3.VS Code默认具有以下界面。

1:活动栏,2:侧边栏,3:编辑栏,4:面板栏,5:状态栏

image.png

不多说上代码

1.在extension.js中加入下列代码,翻译采用的有道词典(有个50元的券所以个人玩够了)

//extension
function truncate(q) {
  var len = q.length;
  if (len <= 20) {
    return q;
  }
  return q.substring(0, 10) + len + q.substring(len - 10, len);
}

 const youdao =  async  function(query) {
  const appKey = "*******";//appID
  const key = "*******"; //appSecret
  const salt = new Date().getTime();
  const curtime = Math.round(new Date().getTime() / 1000);
  // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
  const from = "AUTO";
  const to = "AUTO";
  const str1 = appKey + truncate(query) + salt + curtime + key;
  const sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
  const res = await axios.post(
    "http://openapi.youdao.com/api",
    querystring.stringify({
      q: query,
      appKey,
      salt,
      from,
      to,
      sign,
      signType: "v3",
      curtime,
    })
  );
  return res.data.translation;
}
function activate (context) {
 let disposable = vscode.commands.registerCommand('vs-demo.helloWorld', function () {
  vscode.window.showInformationMessage('Hello World from vs-demo!');
 });
//registerHoverProvider:注册hover事件
//vscode.Hover:hover提示
 let provideTips = vscode.languages.registerHoverProvider(['javascript', 'vue'], {
    async provideHover  (document, position, token) {
    let wordAtPosition = document.getWordRangeAtPosition(position);
    var word = document.getText(wordAtPosition);
    console.log(word,'word')
    let data = await youdao(word)
    return new vscode.Hover('翻译结果:'+data[0]);
  }
 })
 context.subscriptions.push(disposable);
 context.subscriptions.push(provideTips);
}

2.在package.json中加入触发activate的条件我这里主要是以打开js文件触发

//package.json
"activationEvents": [
  "onLanguage:javascript"
 ],

3.按下f5进行调试(为了避免其他插件的影响建议注释掉setting.json里的配置)