i18n Ally 是 VSCode 中专用于前端国际化工作流的智能辅助工具,支持自动提取翻译键、跨文件实时预览、批量修复缺失/冗余键及自定义框架适配。

如果您在使用 VSCode 进行前端项目开发时需要高效管理多语言资源,但发现手动维护 JSON 语言包、同步键值、检测缺失翻译等任务繁琐易错,则可能是由于缺乏专用于国际化工作流的智能辅助工具。i18n Ally 是一个深度集成于 VSCode 的扩展,可实时解析、导航、编辑和校验各类 i18n 格式文件。以下是针对其核心功能的实操说明:
本文运行环境:MacBook Pro,macOS Sequoia。
一、安装与基础配置
i18n Ally 扩展需通过 VSCode 扩展市场安装,并配合项目中的语言配置文件启用语义感知能力。该步骤确保插件能识别项目所用的 i18n 框架(如 Vue I18n、i18next、React Intl)及对应资源路径结构。
1、打开 VSCode,点击左侧活动栏的扩展图标(或按 Cmd+Shift+X)。
立即学习“前端免费学习笔记(深入)”;
2、在搜索框中输入 i18n Ally,找到由 Antfu 发布的官方扩展。
3、点击“安装”,安装完成后重启 VSCode 或点击“重载窗口”。
4、在项目根目录下创建 .i18nrc.json 配置文件,指定 locales 文件夹路径与默认语言。
二、快速提取与注入翻译键
该功能支持在代码中直接选取字符串并一键生成带命名空间的翻译键,自动写入对应语言文件,避免手动拼写错误与路径误配,适用于 Vue、React、Svelte 等模板与脚本上下文。
1、在 .vue 或 .tsx 文件中选中待国际化的字符串,例如 "提交表单"。
2、右键选择 “Extract to locale file”,或使用快捷键 Cmd+Shift+P → 输入 “i18n Ally: Extract”。
3、在弹出面板中确认键名(如 form.submit)、目标语言(如 zh-CN)及命名空间(如 form)。
4、插件将自动在 locales/zh-CN.json 中添加 "form": { "submit": "提交表单" } 结构。
三、跨文件实时翻译预览
当光标停留在代码中的 $t('xxx')、t('xxx') 或 {{ $t('xxx') }} 等调用处时,i18n Ally 可即时显示所有已配置语言下的对应译文,无需跳转至 JSON 文件,提升多语言对照效率。
1、将光标置于任意翻译函数调用内部,例如 t('user.name') 的引号内。
2、等待约 300ms,右侧将浮出翻译预览面板,列出 en-US、ja-JP、zh-CN 等语言的当前值。
3、若某语言缺失该键,对应条目将显示为 [missing] 并标红提示。
四、批量修复缺失与冗余键
插件内置扫描引擎可对比源码中所有引用键与各语言文件实际键集,识别出未使用的键(dead keys)和仅存在于部分语言中而其他语言缺失的键(inconsistent keys),支持一键补全或清理。
1、按下 Cmd+Shift+P,输入 i18n Ally: Scan project for issues 并执行。
2、在侧边栏打开 i18n Ally Issues 视图,查看分类后的缺失键列表。
3、对某一条目右键,选择 “Add missing key to all languages”,插件将向所有语言 JSON 文件写入该键并赋空值。
4、对冗余键条目选择 “Remove key from all languages”,确认后自动从全部 locales 文件中删除该键。
五、自定义语言服务与框架适配
对于非标准 i18n 实现(如自定义 hooks、静态 JSON 加载器、或混合使用多个库),可通过修改 .i18nrc.json 中的 parsers、codePaths 和 languageFiles 字段,使插件准确识别翻译调用语法与资源位置。
1、在 .i18nrc.json 中添加 "parsers": ["json", "yaml"] 支持多格式语言文件解析。
2、设置 "codePaths": ["src/**/*.{ts,tsx,vue}"] 明确扫描范围。
3、配置 "languageFiles": ["locales/**/*.{json,yaml}"] 声明语言资源匹配模式。
4、若项目使用自定义 t 函数,可在 "functions": ["t", "tc"] 中追加函数名以激活调用识别。










