很久之前就考虑分享方案了,但是懒癌晚期,一直懒得写文章,今天想了想还是写下来,分享给需要的人.
此外,本文仅限 VSCode

关于 i18n-ally

i18n ally 是一个集成到代码编辑器中的国际化(i18n)工具,专门用于简化多语言应用程序的开发和维护。它主要用于处理和管理应用程序中的翻译文件,使开发者能够更轻松地在项目中添加、编辑和管理多语言内容。

以下是 i18n Ally 的一些主要功能:

  1. 多语言支持:支持多种语言的翻译文件格式,如 JSON、YAML、TOML 等。
  2. 实时翻译预览:在编辑翻译文件时,可以实时预览翻译的效果。
  3. 自动提示:在代码中使用翻译键时,提供自动补全和提示功能,帮助开发者快速找到正确的翻译键。
  4. 翻译管理:方便地在多个语言文件之间切换和管理翻译条目。
  5. 一致性检查:帮助发现和修复翻译文件中的缺失或重复条目,确保翻译的一致性和完整性。

此外, 通过配置文件,i18n Ally 还提供了对自定义框架的支持,这使得,我们只需要编写少量的正则表达式即可完成对 Flutter 的支持,如:实时翻译预览

关于 slang

slang 是一个 Dart 和 Flutter 的本地化/国际化 (i18n) 解决方案。它通过源代码生成使用 JSON、YAML、CSV 或 ARB 文件创建类型安全的翻译。这个包旨在简化多语言支持的实现和维护。

主要特性包括:

  1. 类型安全的翻译:利用 Dart 的类型系统,通过生成的代码确保在编译时检查翻译键的正确性。
  2. 多种文件格式支持:支持 JSON、YAML、CSV 和 ARB 文件作为翻译文件。
  3. Flutter 支持:通过 slang_flutter 包,提供与 Flutter 框架的集成,包括 RichText 支持和 BuildContext 翻译功能等

使用 slang 可以使得应用在国际化方面更加可靠和易于维护。

相对于 Flutter 官方的 i18n 方案,我更倾向于使用slang + json

Slang 配置 DEMO

如下是一个 slang.yaml 的配置 demo,我是多文件的,后续的 i18n ally 配置也将依照该配置

base_locale: zh-CN
fallback_strategy: base_locale
input_directory: lib/i18n/translations
output_directory: lib/i18n
output_file_name: localized.g.dart
output_format: multiple_files
class_name: Localized
maps:
  # ...
interfaces:
  # ...

如下是 i18n 源文件以及 slang 生成结果示例

lib/i18n
├── localized.g.dart
├── localized_en_US.g.dart
├── localized_es.g.dart
├── localized_ja.g.dart
├── localized_map.g.dart
├── localized_zh_CN.g.dart
├── localized_zh_TW.g.dart
└── translations
    ├── strings_en-US.i18n.json
    ├── strings_es.i18n.json
    ├── strings_ja.i18n.json
    ├── strings_zh-CN.i18n.json
    └── strings_zh-TW.i18n.json

i18n Ally 插件配置

源文件配置

为了 i18n Ally 能读取到多语言源文件,我们需要在 .vscode 下的 settings.json 中配置 i18n 源文件信息

现根据如上的信息,配置如下

{
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.localesPaths": "lib/i18n/translations",
  "i18n-ally.pathMatcher": "strings_{locale}.i18n.{ext}",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.enabledFrameworks":[
    "custom"
  ]
}

目标框架配置

为了 i18n Ally 能适配 Flutter,我们需要再 .vscode 目录下创建 i18n-ally-custom-framework.yml 来对自定义框架进行适配

languageIds:
  - dart

usageMatchRegex:
  - "[^\\w\\d]t\\.({key})(?=\\s|\\)|\\,|\\(|;)"

languageIds 表示框架语言 ID, 详情请见 VSCode 官方文档

usageMatchRegex 表示从代码中匹配 i18n key 的正则表达式

如上配置可匹配形如 t.pageOne.titlecontext.t.pageOne.title 等形式,其中 t 可在 slang的配置文件的 translate_var中自定义(默认为 t)

倘若是以 map 的形式访问 i18n,如 t["pageOne.title"],也可以配置为如下

usageMatchRegex:
  - "[^\\w\\d]t\\.({key})(?=\\s|\\)|\\,|\\(|;)"
  - "[^\\w\\d]t\\[\\\"({key})\\\"\\](?=\\s|\\)|\\,|\\(|;)"

如上自定义框架配置仅做 DEMO 展示,具体请根据自己的项目编写

效果展示

翻译实时预览

配置之后

配置之前

翻译编辑器

翻译进度展示

若有 key 缺失翻译,可进行校对和翻译

最后修改:2024 年 07 月 16 日
如果觉得我的文章对你有用,请随意赞赏