相信很多前端er在遇到多语言需求的时候都会遇到以下问题。开发完成后，面对众多的语言键，需要将真正的内容提取到语言包中，在不同的文件之间切换，非常繁琐，经常会遗漏。当一种语言被翻转，另一种语言被遗忘时，维护起来可能太麻烦了。遇到新需求的新语言文件时，需要同时是多种语言。同步更新和调试文件太难受了。时间长了就无法准确知道当前的key对应的是什么，需要自己查看语言包。这只是其中的一部分。还有很多问题，这里就不一一列举了。后来受不了，就去找有没有更好的解决办法，试了很多插件，直到找到了-----i18n-ally。它的出现成功的解决了上面所有的痛点，也使得无论是开发效率还是开发体验，都是指数级的增长！i18n-ally这是一个vscode插件，项目已经开源了i18n-ally，也是vuei18n项目官方推荐的第三方工具。它提供了内联提示功能，通过内联提示功能，你可以轻松调试，面对一堆按键永远不会手足无措。当前页面悬浮窗快速修改键值对应的语言文件，再也不用频繁切换语言包然后找钥匙统一修改和管理所有翻译了。可以监控已使用、未使用、翻译进度等，并提供自动翻译功能，自动翻译并将翻译结果应用到相应的语言包中。灵活方便地提取页面中未翻译的文本内容，并根据结构自动在相应位置建立相应的翻译键。更多功能请参考官方文档探索如何配置。关卡配置说明搭建高效的多语言工作环境配置工作空间首先来说说vscode工作空间。相信很多时候，很多人都是使用一个工作空间，一个通用的配置文件，这样项目就多了。项目使用时缺点尤为明显。如果在全局设置中只放一些项目需要的配置，项目多了配置文件会很乱。基于项目的工作区开发配置尤为重要。日常开发需要维护一些有特定需求的工作空间配置。比如后面要讲的多语言，只要有类似的需求，都可以在workspace中添加文件。当你有时会忘记一些开发套路的时候，因为它们都是类似的项目，你可以很容易地在同一个工作空间中找到类似的代码。执行简历操作。总的来说，workspace是vscode对不同项目应用不同配置的一种解决方案。有关工作区的更多信息，请参阅本文。我的做法是创建一个名为workspace的文件夹，里面包含所有后缀为.code-workspace的workspace配置文件，统一管理。{//工作区配置，如果要配置多个文件夹，直接添加路径即可，路径路径为当前配置文件的“文件夹”相对于真实项目路径:[{"path":"../frontStudy/vue-test-case"},//{//"path":"../company/secondProject/explorer"//}],"settings":{//vscode在当前工作区的配置}//其他选项请参考vscode文档}配置多语言多语言配置。vue项目使用vue-i18n和上面提到的i18n-ally插件的组合。安装i18n-ally，vscode插件商店直接搜索安装workspace配置文件xxx.code-workspace。可以像我一样设置专门的工具区配置文件夹，也可以直接在项目中设置，填写配置，把项目文件文件夹通过folders添加到工作区，然后通过vscode打开配置文件{//工作区配置，如果要配置多个文件夹，直接添加路径即可，路径path为当前配置文件的“文件夹”相对于真实项目路径":[{"path":"../frontStudy/vue-test-case"},//{//"path":"../company/secondProject/explorer"//}]}在项目下安装vue-i18n，并建一个语言包文件夹yarnaddvue-i18n创建语言包文件夹locales和语言文件在workspace配置文件中添加i18n-ally配置"settings":{"i18n-ally.localesPaths":["src/locales"],//配置匹配路径工作区语言包文件夹的名称，可以是多个matches"i18n-ally.extract.keygenStyle":"camelCase",//命名defaultgeneratedkey"i18n-ally.keystyle":"nested",//对key进行处理，封装nesta:{b:{c:value}},flattenflata.b.c:value"i18n-ally.review.enabled":false,"i18n-ally.annotationMaxLength":30}编写i18n.js并importimportVuefrom"vue";importVueI18nfrom"vue-i18n";importcnfrom"./zh-CN/index.jsoninmain.js";从"./en/index.json"导入en;Vue.use(VueI18n);constlangList=["en","zh"];constinitKey=initLangKey();//初始化语言keyfunctioninitLangKey(){letlangkey=localStorage.getItem("langkey");//如果没有初始化，判断浏览器应该设置什么语言if(!langkey){constlang=(navigator.language||navigator.browserLanguage).toLowerCase().substring(0,2);switch(lang){case"en":langkey="en";休息;case"zh":langkey="zh";休息;默认值：langkey="en";休息;}}elseif(!langList.includes(langkey)){//如果不是en,zh,defaultenlangkey="en";}localStorage.setItem("langkey",langkey);returnlangkey;}consti18n=newVueI18n({locale:initKey,messages:{en:Object.assign({},en),zh:Object.assign({},cn),},});导出默认i18n；在main.js中引入importi18nfrom'./locales/i18n.js'newVue({i18n,render:h=>h(App)}).$mount('#app')来享受i18n-ally带来提高生产力的考虑对于不同框架和更多功能的探索，可以通过官方示例查看。它更详细。有配置和语言包文件。不同格式的权限是不同的。对于js文件，i18n-ally只能读取key，不能写入和修改key。默认情况下，除了JSON、YAML和JSON5，??其他都关闭。如果需要支持，则需要添加配置。支持情况如下。最后，i18n-ally带给我的体验是，从刀耕火种到工业时代，大大提升了我的多语言开发体验。感谢开发者为我提供了这个划时代的开发工具。本文案例代码已放到github。
