解决前端国际化中繁琐的操作，吾有一计！

通过 frontend-i18n-plugin – 前端国际化插件 插件，让你国际化效率提高十倍！如果这个插件帮助到了您，请不要吝啬您的 star！！

前言

我实习过程中，有一个需求，就是前端的工程中，需要进行国际化的处理🌍，处理了几天，发现整个流程重复且繁琐，并且需要多个 json 文件来回切换，找来找去 json 路径，眼睛都看花了，而且还有出错的概率⚠️。

为了化简这个过程，我先是去网上寻找了一些插件，发现比较少，能真正帮上忙的 vscode 插件，或许就只有 copy-json-path 这个插件了🔍

copy-json-path 功能： 在 json 中，选择一个键值对，右键能一键复制当前键值对的 json 路径

这个功能，省去了在 json 中慢慢找 json 路径的这个操作，在很大程度上简化了国际化的步骤！🚀

后面在这个插件的启发下，我开发了这个插件 frontend-i18n-plugin – 前端国际化插件 💡，很大程度上简化了繁琐的步骤！🎉

如果您对我的开发思路过程并不感兴趣，急于使用插件，请手动跳转到 插件介绍 && 插件使用教程 部分，或者直接前往项目地址，如果这个插件帮助到了您，请不要吝啬您的 star！！

正常前端国际化流程

首先我们回顾一下，正常国际化前端操作的流程，及其耗时。至少我一开始做的时候需要按照这个流程！😓😓

1. 在文件夹目录中通过正则把所有中文搜索出来，逐个选中。（用时1秒）
2. 复制待翻译的文字，前往两个（或以上）的 json 文件中去全文件检索待翻译内容（如果找到跳转第四步，若没搜索到，则进入第三步）。（用时5秒）
3. 两个 json 中都没有搜索到，然后把复制的文本，拿到翻译平台进行翻译，然后加入进 json 文件中。（用时10秒）
4. 逐级检索当前键值对的 json 路径，并且复制到剪切板以.进行拼接 。用时10秒
5. 回到待翻译文件中，把待翻译内容以注释的方式写在旁边（供后续开发者理解）。用时2秒
6. 输入 / 粘贴 对应的国际化格式，并且替换 json 路径。用时5秒

整个流程下来替换一个词，大概需要33秒。

按照一天工作八小时来满打满算，一天大约能替换(60*60*8)÷33 = 872.7272（个）

🤪🤪按照一个前端工程师 1.2w 月薪，日薪 400 来算的话，400 ÷ 872 约等于 0.45（元）。

也就是说，如果您是老板，国际化当中一个单词（一段文本）的国际化，就至少价值0.45元人民币。

思路演变（开发心路、插件进化之路）

首先，我从上面上面多个步骤开始思考，然后去网上寻找插件，然后找到一款插件名为copy-json-path的插件，它能简化上述的步骤 4，一键复制当前 json 的全路径。

于是我后面的开发都基于copy-json-path进行了。

进化 1：一键复制特定格式的 json 路径

然后我就想，既然能复制，能不能连带把国际化的格式都复制了呢？$t{xxx.xxx}、{{ $t{xxx.xxx} }}、this.$t{xx.xxx}。

于是对copy-json-path进行了小改动，大概就是在 json 文件中右键，会多出三个复制按钮，你可以一键选择复制哪种格式，然后切换文件直接粘贴即可。

该功能简化了步骤 4、6（共计节约 15 秒/词）。

经过这一进化，整个流程大概需要 18 秒。

进化 2：自动匹配 json，解放双手无需频繁切换 json 搜索

经过上面的简化步骤，但是仍然有许多重复且费时的步骤，比如步骤 2、3、5。

于是我进一步对插件进行改造，在 setting 中让用户设置两个特定的匹配 json，当用户选中文本的时候，右键有三个按钮，点击可以自动匹配 json 中的路径，然后一键替换选中文本为 正确的国际化格式的 json 路径。

该功能简化了步骤 2（共计节约 5 秒/词）。

经过这一进化，整个流程大概来到了 13 秒。

进化 3：无需切换 json 自动新增键值对，结合讯飞星火大模型自动生成对应的变量名称（如小驼峰）

这是目前版本 1.2.0 最后的进化了

当 json 文件中没有词汇的时候，支持用户在当前页面就能够有输入框输入 key 值，自动插入进 json。同时又 AI 按钮，可以使用 AI 一键生成替换。

设置部分：

该功能简化了步骤 3（共计节约 10 秒/词）。

经过这一最终进化，整个流程大概来到了 3 秒。

也就是说经过本插件最后版本，一个词，从需要 33 秒 / 个 缩减到了 3 秒 / 个，效率整整提升十倍！（从老板角度来说，也就是说我的时间价值被压缩了十倍🤡🤡🤡）

感谢您看到这里，如果您觉得这个插件有意义，请不要吝啬您的 star！frontend-i18n-plugin – 前端国际化插件

插件介绍

如果这个插件帮助到了您，请不要吝啬您的 star！！

项目地址：frontend-i18n-plugin – 前端国际化插件

功能：

• 🔍 快速查找已有的国际化词条（选中中文，右键，选择对应的替换国际化形式，一键自动替换）
• 🚀 一键替换选中文本为国际化路径
• 🤖 支持 AI 自动生成国际化 key，并且自动插入设置好的文件及 json 路径（基于星火大模型）
• 📝 支持自定义多种国际化格式（t、$t、{{t}} 等）
• 💾 自动保存新增的国际化词条
• 🎯 支持自定义国际化文件路径

如果自动插入的键值重复，会提醒你修改然后再次插入！

插件使用教程

方式一：

1. vsscode 插件中搜索frontend-i18n-plugin安装即可

方式二：

1. 在 release 中下载最新版本的安装包 Release
2. vscode 中点击扩展、三个点、点击从visx安装
3. 进入插件设置中进行相关的设置
4. 大功告成，开启您的使用！

🔧 配置

在 VSCode 设置中配置以下选项：

• 此处设置您在 json 文件中右键复制的格式，总共有一个默认和三个格式，可以自定义

此处设置您的国际化文件路径，可以自定义（优先级有区分，优先从第一个搜索）

此处新增国际化的键值对，需要设置新增键值对的文件、以及 json 路径

此处设置讯飞星火大模型密钥，可以一键生成国际化 key，以及您自定义的提示词

此处设置您选中待国际化文本的替换方式，总共有三种，可以自定义