如果你还在为翻译而烦恼，今天给你安利一波翻译插件，让你的工作效率飞跃~
du i18n翻译插件为本地开发工作提供敏捷的开发模式，提供扫描中文、提取文案、文案回显、同步翻译、文案上传、拉取线上文案、文案漏检、切换语言以及分析统计等功能。兼容vue2，vue3，react，同时满足不同阶段多语言发展的开发模式，无论是本地保存文案模式，还是线上保存文案模式皆可适用。
1. 功能
- 支持文案回显
- 支持一键扫描中文
- 支持中文提取到指定文件
- 支持本地或远程在线翻译
- 支持文案上传到远程服务
- 支持拉取线上文案，定位文案的代码位置
- 支持翻译漏检功能
- 支持语言切换显示
- 支持分析统计
- 支持配置化，满足不同开发场景
2. 技术栈
- i18n + vue + js/ts
- i18n + vue3 + js/ts
- i18n + react + js/ts
3. 兼容性
开发模式：支持多种不同阶段多语言发展的开发模式，保存在本地的模式，保存在线上的模式； 技术栈：兼容vue2，vue3，react（含js和ts）
4. 安装与配置
1）安装du-i18n插件，输入du i18n即可搜索
2）配置 安装好之后，点击设置，自动生成配置文件du-i18n.config.json
| 序号 | 字段 | 说明 | 配置内容 | 备注 |
|---|---|---|---|---|
| 1 | quoteKeys | 引用key集合 | ["this. |
可以配置引用key |
| 2 | defaultLang | 默认显示语言 | 'zh' | 默认取tempLangs第一个元素 |
| 3 | tempLangs | 扩展语言集合 | ['zh', 'en'] | 扩展语言集合 |
| 4 | transSourcePaths | 翻译源文件路径 | /src/i18n/source/ | 本地同步翻译的源文案文件夹，中文作为key，翻译对的内容作为value，如{"你好": "hello"}，文件名即是语言（如/i18n/source/en.json），同时会自动与线上已有的翻译源合并，线上的优先级更高 |
| 5 | tempPaths | 新增翻译文案路径 | /src/i18n/temp/ | 新增翻译文案的文件夹，默认生成随机文件，可通过tempFileName指定固定文件 |
| 6 | tempFileName | 翻译指定生成文件 | 新增翻译文案的文件，若不指定，每次生成随机文件名 | |
| 7 | multiFolders | 复杂文件夹 | ['src', 'pages'] | 复杂文件夹，用于分割模块 |
| 8 | uncheckMissKeys | 跳过翻译漏检-key集合 | [] | 设置的key，会跳过翻译漏检机制，用于打标某些key空值是合法的 |
| 9 | isOverWriteLocal | 是否覆盖本地已填写的翻译 | false | 是否覆盖本地用户已填写的翻译，默认false，若设置为true，用户即使填写了会被远程的文案覆盖 |
| ... | ... | |||
| 15 | bigFileLineCount | 大文件行数 | 1000 | 可自定义大文件行数 |
| 17 | langPaths | 拆分语言文件路径 | /src/i18n/locale/ | 本地使用，线上的忽略，对本地生成的语言包，按照语言拆分成多个语言json文件，文件名即为语言 |
| 18 | isSingleQuote | key的引用是单引号还是双引号 | true | key的引用是单引号还是双引号，默认是单引号 |
| 19 | isOnlineTrans | 是否支持在线翻译 | true | 直接调用百度在线翻译 |
| …… |
5. 使用
1）回显文案
2）扫描中文
在/src/i18n/temp/自动生成随机文件，路径和文件名都可以自主配置，生成随机文件名主要是解决代码冲突问题
3）线上翻译
分三种场景：
1）场景1：接入deyi，这种场景下，会直接调用deyi上该项目的已有的文案进行翻译；
2）场景2：没有接入deyi，创建本地翻译源文案/src/i18n/source/，会采用这里的翻译源进行翻译，如下图；
3）场景3：没有接入deyi，直接调用百度在线翻译API进行翻译，需要配置isOnlineTrans=true;
下面是直接调用百度在线翻译的场景：
理论上可以进行任意的语言转换（比如中文翻译英文，日语翻译韩语），只要切换默认语言即可，下面就以英文翻译其他语言为例，如图
切换英文en，以英文翻译其他语言，如图
更多的语言code请参考https://fanyi-api.baidu.com/doc/21 ，在配置文件du-i18n.config.json中配置tempLangs扩展语言code即可。
4）翻译漏检
主要用于检查翻译遗漏情况，哪些没有翻译的文案会检测出来
5）批量操作
如批量扫描中文 会将选择的文件夹中所有文件进行扫描中文，提取中文操作
6）语言切换
6. 常见问题
1）react项目中如何配置quoteKeys？
答：原则上你可以配置任何的key，但需要注意，在js/ts文件中，默认引用最后一个key。比如quoteKeys: ["props.t", "i18n.t"]，那么jsx/tsx中引用key是props.t，而ts/js则是i18n.t。
2）是否支持将各种文件拆分一个个单独的语言文件？
答：支持，你可以集中在其中一个json文件，也可以按语言拆分不同json文件，这些都是可以配置的。
如遇任何问题，欢迎咨询。
