Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>react-i18n-nextNew to Visual Studio Code? Get it now.
react-i18n-next

react-i18n-next

dengmmyy

|
169 installs
| (3) | Free
A vscode extension for i18next
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

react-i18n-next

react-i18n-next 多语言插件(需要配置远端语料地址)

开始

vscode 插件市场搜索 react-i18n-next,下载安装

命令行 作用
配置中文语料远端地址(i18nZhConfig) 配置远端语料地址到项目
更新中文语料(i18nUpdate) 同步远端语料库到项目
中文语料转换到 key(i18nTransform) 中文文本替换成t(key)
中文搜索 key(i18nSearch) 通过中文搜索,查出包含该 key 的文件

配置

  1. 复制多语言平台的中文 cdn 地址到粘贴板,一般是项目测试环境的语料
  2. 打开 vscode 命令行,输入 配置中文语料远端地址(i18nZhConfig),选择此命令
  3. 粘贴刚复制的中文语料链接(json 数据格式)
  4. 配置成功

同步远端语料

如果多语言远端有更新,打开 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
};

pic

中文转换成多语言 key

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

中文搜索定位到对应的文件

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

  1. 输入想搜索的中文
    tranform
  2. 选择要跳转的文件
    tranform
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft