背景：由于经常遇到需要国际化的项目，每次要了解字串是什么意思，都要去搜索对应的字串是什么意思，比较消耗时间
i18n-ally
功能
i18n-ally 支持多种前端框架，包括 Angular、Vue 和 React。默认情况下，它支持使用 translate 管道符的 Angular、Vue 中的 $t 方法和 React 的 react-i18next 库。此外，它还可以通过自定义匹配字段来支持其他框架或自定义用法。以下是 i18n-ally 的主要功能：
- 扫描项目并提取所有需要翻译的字符串；
- 将提取的字符串存储在 JSON 或其他资源文件中以便翻译；
- 与 Google 翻译 API 集成以自动完成翻译；
- 支持多种语言的翻译，并可视化显示每种语言翻译的状态；
- 在代码中直接查看和编辑翻译文本；
- 自定义匹配字段以支持其他框架或自定义用法。
支持的框架
默认支持的框架包括 vue、angular、react 等原生的 i18n 工具
配置
在vscode中下载i18n-ally插件后，在settings.json 中配置
{
// 资源文件路径
"i18n-ally.localesPaths": ["src/locale", "src/common/lang"],
// 资源文件的文件种类，默认为json
"i18n-ally.enabledParsers": ["js", "ts"],
// 资源文件的文件名作为第一个key
"i18n-ally.namespace": true,
// 资源的key
"i18n-ally.pathMatcher": "{namespaces}/{locale}.js",
// 默认展示语言
"i18n-ally.displayLanguage": "zh",
// flat({"a.b.c": "..."}) or nested({"a": {"b": {"c": "..."}}})
"i18n-ally.keystyle": "nested"
}
自定义匹配字段
如果不在其中需要自定义
新建.vscode/i18n-ally-custom-framework.yml, 在其中写入
# 在哪些文件中显示翻译
languageIds:
- html
- javascript
- typescript
- javascriptreact
- typescriptreact
usageMatchRegex:
# The following example shows how to detect `t("your.i18n.keys")`
# the `{key}` will be placed by a proper keypath matching regex,
# you can ignore it and use your own matching rules as well
- "\\s?['\"`]({key})['\"`]\\s?\\|\\s?i18n"
- "[^\\w\\d]t\\(['\"`]({key})['\"`]"
- "[^\\w\\d]transform\\(['\"`]({key})['\"`]"
monopoly: true
上述自定义主要是针对一下形式的国际化
{{ 'xx.xx.xx' | i18n }}
transfrom('xx.xx.xx')
