1. 介绍
随着科技的进步，越来越多的人开始使用英语，但是有时候我们在使用英语时还是会遇到很多语言障碍，这时候一个好用的翻译插件就十分必要。 VSCode 作为一款主流的代码编辑器，也内置了一些翻译插件（如：Deepl、Google Translate 等），但是这些插件有时候存在翻译不准确、不能翻译所有语种等问题。所以，如何开发出自己的翻译插件，就成为了一个严峻的问题。
本篇文章针对 VSCode 翻译插件的开发，通过调用 azure 翻译 API ，开发出一个五脏俱全的翻译插件。
2. 翻译插件开发流程
2.1 获取开发者订阅 Key
在使用 Azure 作为翻译 API 之前，我们需要获取一个订阅 Key。Azure 订阅的价格从免费到企业合同价格不等。如果您是第一次使用 Azure，可以通过进行免费试用体验而获取订阅，订阅有以下两种选择。
步骤：
访问 Azure 免费帐户
单击“开始免费试用”，登录您的 Microsoft 帐户并按照指示操作。
在创建帐户后，转到“Azure 门户”。
展开左侧导航菜单，找到 “订阅”，然后选择 "+ 创建订阅"。
根据要求填写信息创建订阅。
2.2 创建VSCode插件项目
步骤：
安装前置条件：Node.js & Git 。
初始化 VSCode 插件项目
npx yo code注：如果此处报错则需要先安装 yo
npm install yo -g 根据提示进行设置，其中 Extension Identifier 是插件唯一标识。
进入插件项目目录，即可根据需要修改插件源码。
2.3 调用Azure翻译API
在本示例中，我们使用的是 Azure 翻译 API v3.0 版本。
步骤：
安装依赖：
npm install @azure/ms-rest-js @azure/cognitiveservices-translator 在插件的 src/extension.ts 中添加翻译函数：
import { TranslatorTextClient, TranslatorTextModels } from '@azure/cognitiveservices-translator';
import { ApiKeyCredentials } from '@azure/ms-rest-js';
export const translate = async (text: string, to: string) => {
const subscriptionKey = '这里填写你自己的Azure订阅Key';
const endpoint = 'https://api.cognitive.microsofttranslator.com';
const credentials = new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': subscriptionKey } });
const translatorClient = new TranslatorTextClient(credentials, endpoint);
const listResult = await translatorClient.translate(text, to);
return listResult[0].translations[0].text;
};
在上述代码中，我们首先导入@azure/cognitiveservices-translator和@azure/ms-rest-js库，并且创建了一个translate函数用于翻译。
接下来，我们在 extension.ts 中利用 translate 函数进行翻译，extension.ts 类似于 Vue 中的 main.js 或 Angular 中的 app.module.ts，是插件的入口文件。
import * as vscode from 'vscode';
import { translate } from './translate';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('extension.translate', async () => {
const editor = vscode.window.activeTextEditor;
const selection = editor?.selection;
const text = editor?.document.getText(selection);
if (text) {
const to = await vscode.window.showQuickPick([
{ label: 'en', description: '英语' },
{ label: 'de', description: '德语' },
{ label: 'zh-Hans', description: '中文（简体）' },
{ label: 'ja', description: '日语' },
{ label: 'es', description: '西班牙语' },
]);
if (to) {
const result = await translate(text, to.label);
vscode.window.showInformationMessage(result);
}
}
})
);
}
上述代码中，我们注册了一个命令，即在编辑器中选中单词后按下快捷键将单词翻译为所选语言。在该函数中，我们先获取当前选中单词并且打开语言选择窗口，选择需要翻译到的语言，之后调用 translate 函数进行翻译最终结果弹出 VSCode 的通知。
3. 运行和安装
3.1 运行罐装
对于初次使用者，在项目目录下运行以下命令生成安装包：
vsce package如果安装成功会在项目目录下生成 vscode-translate-${version}.vsix 的打包文件。
3.2 安装插件
在 VSCode 中键入 Ctrl + Shift + X 来打开插件市场或者在应用商店进行搜索：'VSCode 翻译插件'。
在插件商店点击 'Install' 按钮进行安装。
4. 总结
通过简单的几个步骤，我们已经可以成功开发出 VSCode 翻译插件，可以对日常开发中的语言障碍有很大的帮助。此外，我们还介绍了利用 Azure 翻译 API 来实现翻译功能，对于使用其他语言进行开发的童鞋们也可以参考使用。