开门见山
欢迎 star ⭐️ github 👉 github.com/Styx11/reac…
market 👉 marketplace.visualstudio.com/items?itemN…
起因
在现有的 React 项目中，我们会需要对中文文本进行国际化，目前使用的国际化框架为react-intl ，这个框架的使用流程，除了在 React 应用最外层有一个IntlProvider 外还需要提供国际化配置文件，在我们的项目中为
.
└── intl // 语言客户端
├── zh_CN.json // 中文文本配置
├── en_US.json // 英文文本配置
└── index.ts // 导出国际化配置
所以每次新增国际化文本，都要收集中英文文本，然后需要修改zh_CN, en_US 中的配置文件，最后才能在代码中添加intl.formatMessage({ id: XXX }) 。所以整体的流程比较繁琐（非常影响开发体验😢），如果现有代码中有比较多的文本需要替换，工作量就会很大，所以我们希望能够将这个工作交给外部工具进行自动化处理。
现有工具
我们参考阿里的 Kiwi 国际化方案，其中有一个 VS Code 插件 kiwi-linter 能够检测中文文本，通过一些翻译 api 将文本翻译为英文版本，并直接将中文文本替换为国际化代码
但由于 kiwi 并不支持 react-intl，并且整个国际化流程是：通过 kiwi-cli 翻译所有中文文本，然后再通过 kiwi-linter 手动将中文字符串替换为代码，这个过程就需要使用两个外部工具去完成，也是比较繁琐，所以我打算针对 react-intl 开发一个拥有监测中文文本并提供代码替换功能的 VS Code 插件——react-intl-liner
react-intl-linter
这个 linter 工具会自动检测中文字符串，并向用户抛出一个 code action 供点击，然后我们可以通过 quick picker 选择对应的 国际化代码对应的配置 id，回车后 linter 就能自动替换字符串为 react-intl 代码，并且也会自动更新配置文件。
我们团队在这个插件开发完毕并使用了一个多月后，都觉得它极大的提高了开发效率和开发体验🤣
更多细节可以参考 github 的 README ，并欢迎 star
