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

|
664 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 命令面板(command+shift+P),输入 更新中文语料(i18nUpdate),选择此命令 alt text
  3. 点击去配置 alt text
  4. 粘贴刚复制的中文语料链接(json 数据格式) alt text
  5. 配置成功

同步远端语料

如果多语言远端有更新,打开 vscode 命令行,执行 更新中文语料(i18nUpdate),可以同步刚刚发布的语料到本地

特点

key hover 提示

支持识别 useTranslation 和 useI18n hook 传入的命名空间(需要限制一个文件只有一个命名空间),需要使用 t或者I18n或者i18n作为转换函数名字

支持通过 react-i18n-next.translateFn 字段配置翻译函数,默认 t|I18n|i18n

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
};

alt text

中文转换成多语言 key

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

通过中文查找 key

打开 vscode 命令行,执行 中文定位到key(i18nSearch),输入想搜索的中文,可查找到该中文对应的文件位置

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