手把手带你开发一个vscode百度翻译插件-猿码集

1. 简介

本篇文章将手把手地指导你开发一个vscode百度翻译插件。这个插件将会使你的翻译工作更加高效快捷，同时也是一次学习vscode插件开发的绝佳机会。下面我们将一步步地实现这个插件。

2. 创建工程

2.1 安装vscode插件开发工具

在开始之前，我们需要先安装好vscode插件开发工具。如果你还没有安装该工具，可以通过以下命令安装：

npm install -g yo generator-code

该命令将会全局安装yo和generator-code两个工具。yo是一个可重复生成文件的工具，而generator-code则是一个vscode插件开发的脚手架。

2.2 创建项目

接下来我们需要通过generator-code来创建一个vscode插件开发的项目。可以使用以下命令创建：

yo code

在这个过程中，需要输入插件的名称、描述、作者等信息。除此之外，还需要指定语言选择框架。由于我们要用到百度翻译API，因此需要选择支持nodejs的框架。在本篇文章中，我们选择TypeScript。

等待项目创建完成后，我们就可以在vscode中打开它：

code my-extension

3. 集成百度翻译API

3.1 获取百度翻译API密钥

在开始使用百度翻译API之前，我们需要先获取一个API密钥。可以通过以下步骤完成：

登录百度开发者中心

创建一个应用

在应用管理页面中找到“翻译API”并申请开通

获取API密钥

3.2 安装依赖

我们需要使用npm安装两个依赖包，分别是request和crypto-js。可以通过以下命令完成安装：

npm install request crypto-js

request是一个用于发送http请求的库，而crypto-js则是一个加密解密库。

3.3 实现API调用逻辑

在本步骤中，我们需要创建一个BaiduTranslator类，并在该类中实现API调用的逻辑。

首先，我们需要在BaiduTranslator类的构造函数中初始化API密钥：

import CryptoJS = require('crypto-js');
import * as request from 'request';
export class BaiduTranslator {
  private key: string;
  private secret: string;
  constructor(key: string, secret: string) {
    this.key = key;
    this.secret = secret;
  }
}

接下来，我们需要实现一个transalte方法。该方法接受一个字符串类型的text参数，并返回一个Promise对象，该对象的resolve方法将会返回翻译后的结果。

public translate(text: string): Promise<string> {
  const salt = Math.floor(Math.random() * 100000).toString();
  const sign = CryptoJS.MD5(this.key + text + salt + this.secret).toString();
  const url = \`https://fanyi-api.baidu.com/api/trans/vip/translate?q=\${encodeURIComponent(text)}&from=en&to=zh&appid=\${this.key}&salt=\${salt}&sign=\${sign}\`;
  return new Promise((resolve, reject) => {
    request.get(url, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        resolve(JSON.parse(body).trans_result[0].dst);
      }
    });
  });
}

在这个方法中，我们使用了request库发送了一个get请求。在请求的url中，我们将应用ID、随机数、翻译内容以及密钥拼接在一起，通过CryptoJS.MD5方法生成一个签名，最终拼接在url中进行访问。

4. 实现vscode插件

4.1 菜单项

我们需要在编辑器中添加一个菜单项，以便用户可以选择对文字进行翻译。我们可以在extension.ts文件中实现：

import * as vscode from 'vscode';
import { BaiduTranslator } from './translator';
export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('extension.translateSelection', async () => {
    const key = vscode.workspace.getConfiguration('translate', null).get('apiKey', '');
    const secret = vscode.workspace.getConfiguration('translate', null).get('secretKey', '');
    const translator = new BaiduTranslator(key, secret);
    if (!key || !secret) {
      vscode.window.showErrorMessage('请先在设置中填写API Key和Secret Key');
      return;
    }
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      return;
    }
    const selection = editor.selection;
    if (selection.isEmpty) {
      return;
    }
    const text = editor.document.getText(selection);
    const result = await translator.translate(text);
    editor.edit((editBuilder) => {
      editBuilder.replace(selection, result);
    });
  });
  context.subscriptions.push(disposable);
}

在这个方法中，我们首先获取了用户填写的API密钥，并创建了一个BaiduTranslator实例。然后，获取了用户选中的文本，调用BaiduTranslator.translate方法进行翻译，并将翻译结果替换原文本内容。

接下来，我们需要在package.json文件中增加以下配置：

"contributes": {
  "commands": [
    {
      "command": "extension.translateSelection",
      "title": "翻译选中文字"
    }
  ]
}

这样就可以在“查看”菜单下创建一个“翻译选中文字”的菜单项。

总结

通过本篇文章的介绍，我们手把手地开发了一个可以在vscode中使用的百度翻译插件。通过该插件，我们可以更加轻松地进行翻译工作，同时也学习了vscode插件开发的基础知识。

手把手带你开发一个vscode百度翻译插件