教你如何在VSCode中开发设计一个翻译插件

WWW.lllT.neT这篇文章内容带大家一起来写一个vscode翻译插件，根据完成一个翻译插件案例的方法来了解 VS Code 软件开发设计的普遍作用和方式，期待对必须的小伙伴有些协助！

文中将根据完成一个翻译插件案例的方法来了解 VS Code 软件开发设计的普遍作用和方式。自然我们可以前去 VS Code 官方网站API 和官方网 GitHub 实例 查询和学习培训。【建议学习培训：《vscode入门教程》】

要求

相匹配程序猿而言，翻译工作是个很普遍的要求，特别是在像我这样一个英语不好的程序猿。

• 可以立即更换翻译成中文为用户标识符

• 划词翻译，用以源代码中的注解翻译工作

开发设计

复位新项目

实行钢管脚手架，复位新项目

yo code

hello world

建立好文件目录后，我们可以到通道文档寻找通道文档 ./src/extension.ts 中有一个 active方式

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "vscode-fanyi" is now active!');
  let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    () => {
      vscode.window.showInformationMessage("Hello World from vscode-fanyi!");
    }
  );
  context.subscriptions.push(disposable);
}

active 方式是软件的通道方式，申请注册了一个 vscode-fanyi.helloWorld 方式

"activationEvents": [
    "onCommand:vscode-fanyi.helloWorld"
],
"contributes": {
    "commands": [
        {
            "command": "vscode-fanyi.helloWorld",
            "title": "Hello World"
        }
    ]
}

随后在 package.json中配备了激话的事情，和实行事情的文章标题是 Hello World

按 F5 调节, 便会自行开启一个新的 vscode 拓展调节对话框，运行命令可以看下如下所示实际效果。

翻译工作API

翻译api 我这边挑选应用 有道在线云智能，自然我们可以挑选别的翻译工作API，挑选它的缘由是由于：申请注册就会有100元的免费试用金，针对本人应用彻底充足了。

最先建立一个运用，挑选服务项目为自然语言理解翻译公司，连接方法为API

建立进行后可以得到运用ID和密匙。

依据官方网 JS demo 改为 Nodejs 版本号

import CryptoJS from "crypto-js";
import axios from "axios";
import querystring from "querystring";

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

async function youdao(query: string) {
  var appKey = "3dde97353116e9bf";
  var key = "xxxxxxxxxx"; //留意：曝露appSecret，有失窃用导致损害的风险性
  var salt = new Date().getTime();
  var curtime = Math.round(new Date().getTime() / 1000);
  // 好几个query可以用n联接  如 query='applenorangenbanananpear'
  var from = "AUTO";
  var to = "AUTO";
  var str1 = appKey   truncate(query)   salt   curtime   key;

  var 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;
}

最先要组装这3个包，在其中 crypto-js 转化成签字，axios Nodejs post请求库。

组装

yarn add crypto-js axios querystring

查询记录

假如恰当一定存有 translation 中

{
  "errorCode":"0",
  "query":"good", //查看恰当时，一定存有
  "translation": [ //查看恰当时一定存有
      "好"
  ],
  "basic":{ // 有道词典-基本上字典,查单词时才有
      "phonetic":"gʊd",
      "uk-phonetic":"gʊd", //英式音标
      "us-phonetic":"ɡʊd", //美式音标
      "uk-speech": "XXXX",//英式发音
      "us-speech": "XXXX",//美式发音
      "explains":[
          "益处",
          "好的",
          "好",
      ]
  },
}

随后变更申请注册事情为多线程回到

let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    async () => {
      const res = await youdao(
        'Congratulations, your extension "vscode-fanyi" is now active!'
      );
      vscode.window.showInformationMessage(res.translation[0]);
    }
  );
  context.subscriptions.push(disposable);

看来下调节結果

划词更换

先获得挑选文字, 随后翻译工作，最终翻译完成后更换原先文字。

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("vscode-fanyi.replace", async () => {
      let editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }
      let selection = editor.selection;
      let text = editor.document.getText(selection);//挑选文字

      //有选定翻译工作选定的词
      if (text.length) {
        const res = await youdao(text);
        //vscode.window.showInformationMessage(res.translation[0]);
        editor.edit((builder) => {
          builder.replace(selection, res.translation[0]);//更换选定文字
        });
      }
    })
  );
}

跟新下 package.json 中的配备

"activationEvents": [
    "onCommand:vscode-fanyi.replace"
 ],
 "contributes": {
    "commands": [
      {
        "command": "vscode-fanyi.replace",
        "title": "翻译工作"
      }
    ],
    "keybindings": [
      {
        "command": "vscode-fanyi.replace",
        "key": "ctrl t",
        "mac": "cmd t",
        "when": "editorTextFocus"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorTextFocus",
          "command": "vscode-fanyi.replace",
          "group": "vscode-fanyi"
        }
      ]
    }
  },

增加一个右键，关联快捷键.

下面的图是vscode 官方网菜单栏分类，将分类放到改动编码一部分

一起来看下实际效果

划词翻译

VS code 给予一个 provideHover 当鼠标挪动在上面的过程中就可以依据目前的英语单词做一些具体步骤，可是这一翻译工作的情景下，单独一个英语单词不足，因此要依据选定的词来翻译工作。一起来看下编码吧。

vscode.languages.registerHoverProvider("*", {
    async provideHover(document, position, token) {
      const editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }

      const selection = editor.selection;
      const text = document.getText(selection);

      const res = await youdao(text);

      const markdownString = new vscode.MarkdownString();

      markdownString.appendMarkdown(
        `#### 翻译工作 nn ${res.translation[0]} nn`
      );
      if (res.basic) {
        markdownString.appendMarkdown(
          `**美** ${res.basic["us-phonetic"]}　　　　**英** ${res.basic["uk-phonetic"]}　nn`
        );

        if (res.basic.explains) {
          res.basic.explains.forEach((w: string) => {
            markdownString.appendMarkdown(`${w} nn`);
          });
        }
      }
      if (res.web) {
        markdownString.appendMarkdown(`#### 互联网释意 nn`);
        res.web.forEach((w: Word) => {
          markdownString.appendMarkdown(
            `**${w.key}:** ${String(w.value).toString()} nn`
          );
        });
      }
      markdownString.supportHtml = true;
      markdownString.isTrusted = true;

      return new vscode.Hover(markdownString);
    },
  });

原本想 MarkdownString 假如适用 html 得话， 可以把翻译工作效果的声频也放在里边，怎奈不兼容，不清楚是否有小伙伴们做了相近的作用，可以在发表评论沟通交流。

最核心的一步,必须在 package.json 中变更 activationEvents 为 "=onStartupFinished，这一点可以在文本文档中寻找.

此激话事情将被传出，而且有关拓展将在VS编码运行后的某一時间被激话。这类似激话事情，但不容易减少VS编码运行的速率。当今，此事情在全部激话的拓展进行激话后传出。

"activationEvents": [
    "onStartupFinished"
  ],

实际效果

骆驼峰变换

如果是自变量是驼峰命名，很有可能没法翻译工作，必须变换下成空格符

function changeWord(text: string): string {
  if (!text.includes(" ") && text.match(/[A-Z]/)) {
      const str = text.replace(/([A-Z])/g, " $1");
      let value = str.substr(0, 1).toUpperCase()   str.substr(1);
      return value;
  }
  return text;
}

自定配备

将有道在线 appKey 和 appSecret 改为客户拓展配备, 在下 package.json 中的配备 contributes 加上 configuration配备

"configuration": {
  	"title": "Vscode  fanyi",
  	"type": "object",
  	"properties": {
  	  "vscodeFanyi.youdaoApiname": {
  		"type": "string",
  		"description": "youdao appKey"
  	  },
  	  "vscodeFanyi.youdaoApikey": {
  		"type": "string",
  		"description": "youdao appSecret"
  	  },
  	}
  }

就可以在拓展下边填写配备了

随后在编码中 得到配备，并传到到原来的翻译工作涵数中就可以了

const config = vscode.workspace.getConfiguration("vscodeFanyi");
const appKey = config.get("youdaoAppkey") as string;
const appSecret = config.get("youdaoAppSecret") as string;

总结

本软件与 comment-translate 比照

1、API 不一样

• 本软件现阶段只适用有道在线，用完完全免费等同于是付钱

• comment-translate 适用百度谷歌和bing搜索，是完全免费API

2、完成方法不一样

• 本软件是运用 provideHover 划词翻译，完成起來非常简单

• comment-translate 是hover 翻译工作，应用 Language Server Extension Guide 完成起來较为复杂

最终另附连接和github

vscode 应用范畴在扩张，从extensions market 销售市场上还可以发觉，各种各样作用的软件基本上都很齐备。这篇只详细介绍了其作用的冰山一角，与此同时 vscode extensions 开发设计门坎不高，热烈欢迎大伙儿试着，或是将有趣的 extensions 建议在发表评论。

期待这篇文章对各位有些协助，还可以参照我以往的文章内容或是在发表评论沟通交流你的见解和体会心得，热烈欢迎一起探寻前面。

大量有关VSCode的有关专业知识，请浏览：vscode实例教程！！

以上便是教你如何在VSCode中开发设计一个翻译插件的详尽具体内容，大量请关心自学java网其他相关文章！

WWW.lllT.neT