react-i18n-next
react-i18n-next 多语言插件(需要配置远端语料地址)
开始
vscode 插件市场搜索 react-i18n-next
,下载安装
命令行 |
作用 |
配置中文语料远端地址(i18nZhConfig) |
配置远端语料地址到项目 |
更新中文语料(i18nUpdate) |
同步远端语料库到项目 |
中文语料转换到 key(i18nTransform) |
中文文本替换成t(key) |
中文搜索 key(i18nSearch) |
通过中文搜索,查出包含该 key 的文件 |
配置
- 复制多语言平台的中文 cdn 地址到粘贴板,一般是项目测试环境的语料
- 打开 vscode 命令行,输入
配置中文语料远端地址(i18nZhConfig)
,选择此命令
- 粘贴刚复制的中文语料链接(json 数据格式)

- 配置成功
同步远端语料
如果多语言远端有更新,打开 vscode 命令行,执行 更新中文语料(i18nUpdate)
,可以同步刚刚发布的语料到本地
特点
key hover 提示
支持识别 useTranslation
和 useI18n
hook 传入的命名空间,需要使用t
作为转换函数名字
export const Test = () => {
const { t } = useTranslation();
return <div>{t("key")}</div>;
};
export const Test = () => {
const t = useI18n();
return <div>{t("key")}</div>;
};
export const Test = () => {
const { t } = useTranslation("namespace");
return <div>{t("key")}</div>; // namespace.key
};
export const Test = () => {
const t = useI18n("namespace");
return <div>{t("key")}</div>; // namespace.key
};

中文转换成多语言 key
光标选中需要转换的代码(cmd+A 全选也可以),右键选择中文语料转换到key(i18nTransform)
,可以将中文替换为对应的 key。

中文搜索定位到对应的文件
因为代码里都是多语言的 key,常规搜索无法通过中文搜出文件位置,可以打开 vscode 命令行,执行 中文搜索key(i18nSearch)
,输入想搜索的中文,可查找到该中文对应的文件位置
- 输入想搜索的中文

- 选择要跳转的文件
