写一个vscode插件帮助阅读i18n项目的代码介绍OK按钮的ok文案一定要翻译成语言不同国家的，所以我们在代码中往往不能直接命名为ok，可能会命名为user_base_plan_edit_ok_button，为了和其他名字区别i18n，我们团队会采用全大写的方式，类似于USER_BASE_PLAN_EDIT_OK_BUTTON，而这种代码看多了会眼干，类似下图的伪代码：文字上会出现一个弹框，这个弹框至少要告诉我这个词的中文或英文意思.效果如下：可以看出，如果这个插件做得好，可能不仅仅用于i18n。它可以有多种使用方式，比如某个代码103993283是什么意思，可以作为插件显示。一：初始化vscode项目超详细的插件编写实践分享会（推荐收藏）（下）这次做的插件是针对我现在的项目，适用范围不是很广，所以未发布到官方vscode。开发完成后打包发给公司互联网和群就ok了。创建项目：这里的项目名称暂定为i18n2c哟代码2：初始化架构extension.js文件我们清理：constvscode=require("vscode");functionactivate(context){vscode.window.showInformationMessage("i18n翻译插件加载完成");}module.exports={activate,};修改package.json文件：设置在加载资源时加载我们的插件{//..."activationEvents":["onStartupFinished"],//...}点击f5打开调试模式，如下会出现图片，证明插件可以正常启动：三：初始化悬停文件我们把悬停逻辑放在src:简单修改extension.xml文件。:constvscode=require("vscode");consthover=require("./src/hover");functionactivate(context){vscode.window.showInformationMessage("i18n翻译插件加载");上下文。订阅。推（悬停）；}module.exports={激活，}；hover.jsexporthover处理方法constvscode=require("vscode");module.exports=vscode.languages.registerHoverProvider("*",{provideHover(document,position){returnnewvscode.Hover(`i18n插件助你渡过难关`);},});当你悬停在任意位置时，效果如下：四：i18ntargetcopyrecognitionper每个团队的技术方案都不一样。这里我只针对我们团队的解决方案进行设计，希望能起到启发作用：我们团队的i18n文案是大写的，用下划线相互链接，我发现字符串中除了i18n的copy不超过3个下划线，而i18n的copy至少有4个下划线，所以目前我是用判断是否字符串包含三个以上的'_'constvscode=require("vscode");module.exports=vscode.languages.registerHoverProvider("*",{provideHover(document,position){constword=document.getText(document.getWordRangeAtPosition(position));if(word.split("_").length>3){returnnewvscode.Hover(`i18n插件来帮你渡劫`);}},});上面的词就是我们得到的悬停词文本5：如何翻译成中文‖一个json文件，不同的每个键都是小写的，大致如下：我要做的就是读取这个文件，然后把要翻译的副本转成小写，再匹配就ok了。constvscode=require("vscode");constfs=require("fs");module.exports=vscode.languages.registerHoverProvider("*",{provideHover(document,position){constword=document.getText(document.getWordRangeAtPosition(position));letjsonCN=JSON.parse(fs.readFileSync("/xxxx/xxxxx/langs/zh-CN.json"));if(word.split("_").length>3){returnnewvscode.Hover(`i18n插件来帮你渡劫了:-中文:${jsonCN[word.toLocaleLowerCase()]}`);}},});我们的i18n词典都放在同一个文件夹下，所以我只需要知道这个文件夹，默认把里面的中英文文案拿出来，修改即可。constvscode=require("vscode");constfs=require("fs");module.exports=vscode.languages.registerHoverProvider("*",{provideHover(document,position){constword=document.getText(document.getWordRangeAtPosition(position));if(word.split("_").length>3){consti18nPath="/xxxx/xxxxx/langs";constjsonUrlCN=i18nPath+"/zh-CN.json";constjsonUrlEN=i18nPath+"/en.json";让jsonCN=JSON.parse(fs.readFileSync(jsonUrlCN));letjsonEN=JSON.parse(fs.readFileSync(jsonUrlEN));returnnewvscode.Hover(`i18nplugin来帮你渡劫:-中文:${jsonCN[word.toLocaleLowerCase()]}-英语：${jsonEN[word.toLocaleLowerCase()]}`);}},});这里的i18nPath当然可以由用户自己来配置，接下来我们研究一下。六：设置配置我们翻译词典文件的位置一定不能硬编码在插件里。很多情况下，需要用户自行设置。这时候我们就需要vscode中setting的概念，如下图所示：第一步：初始化配置项我们来到package.json文件中添加setting配置项：{"contributes":{"configuration":{"type":"object","title":"i18n翻译配置","properties":{"vscodePluginI18n.i18nPath":{"type":"string","default":"","description":"翻译文件的位置"},"vscodePluginI18n.open":{"type":"boolean","default":true,"description":"Enable18ntranslation"}}}},}type设置为Boolean和会自动生成一个CheckBox，非常方便。第二步：初始插件读取配置extension.js文件：constvscode=require("vscode");functionactivate(context){consti18nPath=vscode.workspace.getConfiguration().get("vscodePluginI18n.i18nPath");constopen=vscode.workspace.getConfiguration().get("vscodePluginI18n.open");if(open&&i18nPath){vscode.window.showInformationMessage("i18n翻译插件就位");consthover=require("./src/hover");context.subscriptions.push（悬停）；}}module.exports={激活,};这里注意，ifconsthover=require("./src/hover");写在最上面，可能会导致无法关闭悬停翻译效果。这里面有坑，后面会详细说。第三步：悬停时读取路径hover.js文件：constvscode=require("vscode");constfs=require("fs");module.exports=vscode.languages.registerHoverProvider("*",{provideHover(document,position){consti18nPath=vscode.workspace.getConfiguration().get("vscodePluginI18n.i18nPath");constopen=vscode.workspace.getConfiguration().get("vscodePluginI18n.open");if(i18nPath&&open){constword=document.getText(document.getWordRangeAtPosition(position));if(word.split("_").length>3){consti18nPath="/xxxxx/xxxx/langs";constjsonUrlCN=i18nPath+"/zh-CN.json";constjsonUrlEN=i18nPath+"/en.json";让jsonCN=JSON.parse(fs.readFileSync(jsonUrlCN));letjsonEN=JSON.parse(fs.readFileSync(jsonUrlEN));returnnewvscode.Hover(`i18n插件来帮你渡劫:-中文:${jsonCN[word.toLocaleLowerCase()]}-英语：${jsonEN[word.toLocaleLowerCase()]}`);}}},});七：何时判断是否开启插件如果在extension.js文件中引入了hover模块，即使我们判断用户没有开启i18n翻译过程，我们也会去hover模块，但是如果我们在判断是否有hover模块后引入hover模块用户开启了i18n翻译，会导致，如果用户更改配置开始翻译不能及时响应，需要用户重启，所以这里怎么设计就看大家自己斟酌了八：提示框如果用户打开了i18n翻译但是没有配置路径，那么我们其实可以显示一个弹框提示用户是否填写翻译词典的路径，类似下图的效果：在extension.js文件方法中使用showInformationMessage，但需要添加两个参数：constvscode=require("vscode");functionactivate(context){consti18nPath=vscode.workspace.getConfiguration().get("vscodePluginI18n.i18nPath");const打开=vscode。workspace.getConfiguration().get("vscodePluginI18n.open");if(open&&i18nPath){vscode.window.showInformationMessage("i18n翻译插件就位");consthover=require("./src/hover");context.subscriptions.push（悬停）；}elseif(open&&!i18nPath){vscode.window.showInformationMessage("是否设置翻译文件路径","Yes","No").then((result)=>{if(result==="Yes"){}});}}module.exports={激活,};九：选择文件当用户点击'Yes'时，我们需要使用vscode提供的api进行文件导出Select，并获取文件的返回值进行active设置操作：vscode.window.showOpenDialog方法，它有四个主要参数：canSelectFiles为可选文件canSelectFolders为可选文件夹canSelectMany可选择多个openLabel提示文案的返回值是一个数组。第一个元素的路径属性是文件的全局路径。最后使用update方法主动更新全局配置。vscode.window.showInformationMessage("是否设置翻译文件路径","Yes","No").then((result)=>{if(result==="Yes"){vscode.window.showOpenDialog({canSelectFiles:false,//是否可选文件canSelectFolders:true,//是否可选文件夹canSelectMany:false,//是否可以选择多个openLabels:"请选择一个翻译文件夹",}).then(function(res){vscode.workspace.getConfiguration().update("vscodePluginI18n.i18nPath",res[0].path,true);});}});}end????????????????????????????????????????????????????????
