开发vscode插件变量翻译需要从零到一。或者我不知道。这个时候我之前的做法是打开浏览器，打开谷歌翻译，输入中文，复制英文，然后切换回vscode，粘贴结果。真是麻烦。小时候身体很好，记性很好。我能记住大部分英语单词。但是随着年龄的增长，头发越来越少，记忆力也越来越差。重复以上步骤的次数越来越多，所以痛定思痛开发了这个插件。因为这几天也是在从零开始学习插件开发，所以这篇文章完整的记录了小白的插件开发之路。从功能设计到发布的完整旅程。功能设计环境搭建插件功能开发插件打包发布插件已经上线，在vscode插件商店搜索TranslateVariable即可体验，代码也开源了，源码在这里.用翻译后的英文变量替换中文变量。多个单词需要自动驼峰。解决的场景是日常开发中经常遇到的“英语卡死”单词翻译。自动将各种语言翻译成中文。解决的场景是有时候看国外项目的源码注释，会遇到不知道什么意思的词，影响效率。搭建环境的第一步就是搭建安装脚手架，yo和generator-code，这两个工具可以帮助我们快速搭建项目，具体见Github//installyarnglobaladdyogenerator-code安装vsce，vsce即可用于将开发的代码打包成后缀为.根据自己的情况填写初始化信息//初始化并生成项目yo代码这一步完成后，选择直接打开。打开Openwithcode后，会自动创建一个工作空间，生成这些文件。大家可以根据需要删除文件，完成这一步后，我们就可以直接开发调试了。如何调试？进入运行调试面板，点击RunExtention，或者快捷键F5。Mac可以直接点击touchbar上的debug按钮打开，会弹出一个新的vscode窗口。这个新窗口就是你的测试环境（扩展开发主机），你的插件功能就是要在这个新窗口中进行测试的。打印的信息在上一个窗口的调试控制台，比如内置的例子。在我们的新窗口cmd/ctrl+shift+p输入Helloworld后，会出现窗口的console，在这里打印一些信息，开发准备环境就准备好了。接下来就是开始正式的插件功能开发了。插件功能开发在插件开发中，有两个重要的文件，一个是package.json，一个是extension重要的.js文件说明了package.jsonactivationEvents是用来注册激活事件的，使用表示在什么情况下会激活extension.js中的active函数。常见的有onLanguage，onCommand...更多信息请参考vscode文档。activationEventsmain表示插件贡献的主要入口，用于注册命令（commands）、绑定快捷键（keybindings）、配置设置项（configuration）等，更多可配置项可以在文档扩展中找到。jsextention.js主要作为插件功能的实现点，通过active、deactive函数，以及vscode提供的api和一些事件钩子来完成插件功能的开发，实现翻译功能翻译这里主要用到3个服务，谷歌、百度翻译、有道翻译。谷歌翻译使用@vitalets/google-translate-api，无需配置，但需要能访问外网环境consttranslate=require('@vitalets/google-translate-api');异步函数getGoogleTransResult(text,opt){const{from,to}=opt;try{constresult=awaittranslate(text,{from:from,to:to});console.log("[谷歌翻译]",结果);返回结果.text;}赶上（错误）{console.log（错误）；}}module.exports=getGoogleTransResult百度翻译，百度翻译比较简单，申请服务，获取appid和key，然后构造请求url直接请求。不知道怎么申请，可以看看我之前的文章Electron+Vue从零开始搭建本地文件翻译器来申请constmd5=require("md5");constaxios=require("axios");constconfig=require('../config/index.js');axios.defaults.withCredentials=true;axios.defaults.crossDomain=true;axios.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded";//百度翻译异步函数getBaiduTransResult(text="",opt={}){const{from,to,appid,key}=opt;尝试{constq=文本；constsalt=parseInt(Math.random()*1000000000);让str=`${appid}${q}${salt}${key}`;const符号=md5(str);constquery=encodeURI(q);constparams=`q=${query}&from=${from}&to=${to}&appid=${appid}&salt=${salt}&sign=${sign}`;consturl=`${config.baiduBaseUrl}${params}`;控制台日志（网址）；constres=awaitaxios.get(url);console.log('百度翻译结果',res.data.trans_result[0]);返回res.data.trans_result[0];}catch(error){console.log({error});}}module.exports=getBaiduTransResult;有道翻译需要申请applicationid和applicationkey。新人提供50张免费注册券，但使用后要收费，不太划算。constconfig=require('../config/index.js');const{createHash}=require('crypto');constqs=require('querystring');constaxios=require("axios");函数散列（字符串）{returncreateHash（'sha256'）.update（string）.digest（'hex'）;}functiongetInput（text）{如果（！text）{return;}让输入；conststrLength=text.length;如果（strLength<=20）{输入=文本;}else{input=`${text.substring(0,10)}${strLength}${text.substring(strLength-10,strLength)}`;}returninput;}asyncfunctiongetYouDaoTransResult(text,opt={}){const{from,to,appid,secretKey}=opt;常量输入=getInput(文本);constsalt=(newDate).getTime();constcurtime=Math.round(newDate().getTime()/1000);conststr=`${appid}${input}${salt}${curtime}${secretKey}`;constsign=hash(str);constparams={q:text,appKey:appid,salt:salt,from:from,to:to,sign:sign,signType:"v3",curtime:curtime,}尝试{constres=awaitaxios.post(config.youdaoBaseUrl,qs.stringify(params));console.log(`有道翻译结果${res.data.translation[0]}`);返回res.data.translation[0];}catch(err){console.log(error);}}module.exports=getYouDaoTransResult获取选中的文本使用事件钩子onDidChangeTextEditorSelection获取选中的文本onDidChangeTextEditorSelection(({textEditor,selections})=>{text=textEditor.document.getText(选择[0]);})获取和更新配置项通过vscode.workspace.getConfiguration获取workspace中的配置项，然后通过事件钩子onDidChangeConfiguration监听配置项的变化获取和更新配置项const{getConfiguration}=vscode.workspace;constconfig=getConfiguration();//注意get中的参数其实就是package.json配置项中的contributions.configuration.properties.xxxconstisCopy=config.get(IS_COPY);constisReplace=config.get(IS_REPLACE);constisHump=config.get(IS_HUMP);constservice=config.get(SERVICE);constbaiduAppid=config.get(BAIDU_APPID);constbaiduKey=config.get(BAIDU_KEY);//使用update方法进行更新，第三个参数为true应用于全局config.update(SERVICE,selectedItem,true);监听配置项变化const{getConfiguration,onDidChangeConfiguration}=vscode.workspace;constconfig=getConfiguration();//监听变化constdisposeConfig=onDidChangeConfiguration(()=>{config=getConfiguration();})监听各个配置项的变化constdisposeConfig=onDidChangeConfiguration((e)=>{if(e&&e.affectsConfiguration(BAIDU_KEY)){//Whattodo}})获取当前打开的编辑器对象vscode.window.activeTextEditor代表当前打开的编辑器，如果切换tabs时没有设置监听，那么这个对象不会自动更新,所以需要用onDidChangeActiveTextEditor来监听替换之前的编辑器对象const{activeTextEditor,onDidChangeActiveTextEditor}=vscode.window;letactive=activeTextEditor;constedit=onDidChangeActiveTextEditor((textEditor)=>{console.log('activeEditorchanged');//替换打开的编辑器对象if(textEditor){active=textEditor;}})单词翻译的悬停提示通过vscode.languages.registerHoverProvider注册一个Hover，然后通过activeTextEditor获取选中的单词进行翻译，然后使用newvscode.Hover暂停翻译结果//单词翻译检测constdisposeHover=vscode.languages.registerHoverProvider("*",{asyncprovideHover(document,position,token){constservice=config.get(SERVICE);constbaiduAppid=config.get(BAIDU_APPID);constbaiduKey=config.get(BAIDU_KEY);letresponse,responseText;constselected=document.getText(active.selection);//谷歌翻译if(service==='google'){response=awaitgetGoogleTransResult(selected,{from:'auto',to:'zh-cn'});responseText=response.text;}//百度翻译if(service==='baidu'){response=awaitgetBaiduTransResult(selected,{from:"auto",to:"zh",appid:baiduAppid,key:baiduKey});responseText=response.dst;}//悬停提示returnnewvscode.Hover(`${responseText}`);}})替换选中的文本得到activeTextEditor，调用它的edit方法，然后在回调中使用replace//是否替换原来的文本if(isReplace){letselectedItem=active.selection;active.edit(editBuilder=>{editBuilder.replace(selectedItem,result)})}使用vscode.env.clipboard.writeText复制到剪贴板；//是否复制翻译结果if(isCopy){vscode.env.clipboard.writeText(result);}驼峰处理函数toHump(str){if(!str){return}conststrArray=str.split('');constfirstLetter=[strArray.shift()];constnewArray=strArray.map(item=>{return`${item.substring(0,1).toUpperCase()}${item.substring(1)}`;})constresult=firstLetter.concat(newArray)复制代码。加入（''）;返回结果；}module.exports=toHump；通过vscode.commands.registerCom绑定快捷键mand注册绑定前在package.json中设置的keybindings，需要注意registerCommand的第一个参数需要和keybindings绑定的命令保持一致registerCommand('translateVariable.toEN',async()=>{//做点什么})//package.json"keybindings":[{"key":"ctrl+t","mac":"cmd+t","when":"editorTextFocus","command":"translateVariable.toEN"}],插件打包发布vsce包打包后，会在目录下生成.vsix后缀的插件。在线发布需要到微软插件商店的管理页面创建发布者信息。如果您没有Microsoft帐户，则需要申请一个。创建完成后，选择发布到vscodestore安装到本地。直接安装.vsix后缀插件即可。找到插件菜单选择从VSIX安装，安装上面打包好的插件。最后，vscode的中文资料有点少，这次开发大半时间都花在看英文文档和上网找资料上了。英语真的很重要。以后我会学更多的英语。希望自己用这个自己做的插件的次数越来越少。该项目已经开源。、使用说明及源码传送门
