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

react i18n

think2011

|
3,416 installs
| (1) | Free
🔖 这个插件能够帮到你方便浏览和编写 react i18n
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

logo

vscode-react-i18n

Visual Studio Marketplace Version Visual Studio Marketplace Downloads Visual Studio Marketplace Installs

为什么要做这个插件?因为写 i18n 真的很啰嗦很麻烦啊 😫

这个插件能够帮到你方便查看和编写 i18next 🎉

⚡ 主要功能

提取并自动翻译文案 (快捷键 ⌘+.)

直观的看到对应的翻译文案

通过翻译中心管理翻译

🦉 如何使用?

1. 首先你的目录应该是类似这样的结构

  locales 
  ├── en.json
  ├── zh-CN.json
  ├── zh-TW.json
  ├── ...
  └── <contry-code>.json

或者

  locales
  ├── en
  |   ├── common.json
  |   ├── buttons.json
  |   ├── ...
  |   └── <filenames>.json
  ├── zh-CN
  |   ├── common.json
  |   ├── buttons.json
  |   └── ...
  └── <contry-code>
      ├── common.json
      ├── buttons.json
      └── ...

2. 那么安装好插件后就会自动识别目录了

如果不是的话,那请执行如图的命令吧 😝

3. 但是组件的语法还不支持

像是这样的

<Translation ns="ns1"> // 识别不了 🙊
  {(t) => <p>{t('my translated text')}</p>} 
</Translation>

📆 功能列表

  • [x] 翻译提示
  • [x] 翻译注释
  • [x] 翻译中心
  • [x] 删除多个语言
  • [x] google、youdao、baidu在线翻译
  • [x] 字段补全
  • [x] 自动配置翻译目录
  • [x] 手动配置翻译目录
  • [x] 可指定翻译源语言
  • [x] 重复、覆盖检测
  • [x] YAML支持
  • [ ] 快捷跳转到对应翻译文件
  • [ ] 翻译率提示
  • [ ] 组件的语法支持

QA

怎么安装?

在 vscode 插件里搜索 react-i18n,或者点击上上方的小徽章安装吧!

怎么不开 Issues?

估计很长一段时间里都比较忙,而且懒,如果你遇到了实在难以解决的问题或者非要~~提需求~~ 吐槽,那你给我发封邮件吧 452125301.hzplay@gmail.com,要是可以贡献 PR 那真的太棒了 🙂

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft