VSCode本身不提供多语言翻译功能,仅作为开发支持i18n应用的编辑器;需借助插件(如i18n-ally)、JSON Schema校验、文件对比及CI约束等实现高效国际化开发。
vscode 本身不提供多语言翻译或国际化(i18n)功能,它只是一个代码编辑器;所谓“vscode 实现多语言翻译”,实际是指在 vscode 中高效开发支持 i18n 的应用——比如配置工具链、管理翻译文件、快速跳转键值、校验缺失项等。核心不在 vscode,而在你项目中用的 i18n 方案和插件配合。
如何在 VSCode 中高效编辑 en.json 和 zh.json 等翻译文件
直接双击打开 JSON 文件效率低,容易漏字段、错格式。推荐组合使用:
- 安装插件
vscode-json(内置,无需额外装),开启"json.schemas"配置,为locales/*.json绑定 i18n schema(如 i18next 的schema.json),获得键名自动补全和类型校验 - 用
Compare Folders(右键文件夹 → “Select for Compare”)对比en.json与zh.json,快速发现新增 key 或缺失翻译 - 禁用
"json.format.enable": false,避免保存时自动重排键顺序——保持与源语言一致的 key 排序更利于人工比对
为什么 t('button.submit') 没有跳转到对应 JSON 键?
这是最常被误认为“VSCode 不支持”的问题。VSCode 默认无法解析运行时 i18n 函数调用,需插件辅助:
- 对 i18next:安装
i18n-ally插件,并在项目根目录加.i18nrc.json,指定"paths": ["src/locales/**"]和"i18nSvc": "i18next" - 对 vue-i18n:确保
localeDir配置路径正确,且namespace模式下需在t()中写全路径如t('common.button.submit') - 若仍无法跳转,检查是否启用了
"i18n-ally.enabled": true,以及当前文件是否被插件识别为“支持 i18n 的语言”(如.vue或.ts文件中含import { useI18n })
i18n-ally 提示 “Missing keys” 却找不到哪里用了该 key
这个提示只反映“JSON 中有、但代码里没调用”的 key,不是报错,但容易误导。真实风险反而是“代码里调用了、JSON 里却没定义”——i18n-ally 默认不报这个错,除非开启严格模式:
- 在
.i18nrc.json中添加"checkUnusedKeys": true和"checkMissingKeys": true - 注意:
checkMissingKeys依赖插件能静态分析所有t()调用,对动态拼接 key(如t(`error.${code}`))会漏报,这类必须靠单元测试覆盖 - 如果项目用的是自定义 hook(如
useT()),需在配置中通过"functions": ["useT"]告知插件哪些函数是翻译入口
真正难的不是配插件,而是让团队所有人遵守同一套 key 命名规范、同步更新多语言文件、处理复数/占位符等格式差异——这些 VSCode 插件帮不上忙,得靠 CI 检查和 PR 模板约束。










