Arb Editor插件可高效管理Flutter多语言ARB文件,支持结构化编辑、路径配置、内联翻译、实时校验及CSV/XLSX导出导入。

如果您在使用 VSCode 开发 Flutter 应用时需要高效管理多语言 ARB 文件,则可能遇到手动编辑 JSON 格式字符串、键名不一致、缺少实时预览或翻译状态追踪等问题。以下是针对 VSCode 中 Arb Editor 插件的多种配置与使用方法:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装并启用 Arb Editor 插件
Arb Editor 是专为 Flutter 国际化设计的 VSCode 扩展,提供结构化界面编辑 ARB 文件,支持键值对增删、语言切换与基础校验。需确保插件已正确安装并激活,否则无法识别 .arb 文件类型及触发编辑功能。
1、打开 VSCode,点击左侧活动栏的扩展图标(或按 Cmd+Shift+X)。
2、在搜索框中输入 Arb Editor,找到作者为 localizely 的官方插件。
3、点击“安装”,安装完成后点击“重新加载”按钮使插件生效。
二、配置 arb-files 目录路径
插件需明确识别项目中 ARB 文件所在目录,否则无法自动加载语言列表与主文件。默认情况下插件会查找 lib/l10n/arb/ 或 lib/localizations/,但可手动指定更符合项目结构的路径。
1、按下 Cmd+, 打开设置界面,切换至“工作区”标签页。
2、在搜索框中输入 arb files path,找到 Arb Editor: Arb Files Path 选项。
3、将值修改为相对路径,例如 lib/l10n/,确保该目录下包含 app_en.arb、app_zh.arb 等文件。
三、使用内联翻译面板编辑键值对
Arb Editor 提供左右分栏视图,左侧显示所有键名与源语言内容,右侧动态呈现各语言对应值,支持单键跨语言同步编辑,避免手动复制粘贴导致的遗漏或格式错误。
1、在资源管理器中双击打开任意 .arb 文件(如 app_en.arb)。
2、等待右下角出现 Open in Arb Editor 提示,点击该链接。
3、在打开的编辑界面中,点击某一行键名右侧的 + Add translation 按钮,选择目标语言代码(如 zh、ja)。
4、在对应列中直接输入翻译文本,支持换行与占位符语法(如 {name})。
四、校验 ARB 文件结构完整性
ARB 文件必须符合 JSON 格式且所有语言版本键名严格一致,缺失键或类型错误会导致 Flutter generate 命令失败。插件内置实时校验机制,可高亮显示不匹配项。
1、在 Arb Editor 视图中点击右上角的 Validate All Files 图标(漏斗形状)。
2、查看底部状态栏提示,若显示 All ARB files are valid,则结构无误。
3、若提示缺失键,定位到报错语言列,补全对应键值,注意保持引号闭合与逗号位置正确。
五、导出与同步翻译内容
当团队协作中存在外部翻译人员时,可将当前编辑状态导出为 CSV 或 XLSX,便于离线处理后再批量导入,避免直接修改 ARB 文件引发冲突。
1、在 Arb Editor 界面点击右上角三个点菜单,选择 Export Translations。
2、选择导出格式为 CSV (UTF-8),保存至本地指定文件夹。
3、收到更新后的 CSV 文件后,点击同一菜单中的 Import Translations,选择该文件完成覆盖写入。










