I18nTrace在 VS Code 里不修改源码地常驻显示 i18n 译文,并把 功能1. 代码内常驻显示译文(Inlay Hint)自动识别代码中的 i18n key,从语言文件读取对应文案,用低干扰气泡显示在调用后面:
2.
|
| 类型 | 支持 |
|---|---|
| JS / TS / JSX / TSX | ✅ 通用调用识别 |
Vue SFC(<template> + <script>) |
✅ 含 $t / v-t / <i18n-t keypath> / <i18n path> |
| HTML / Svelte | ✅ 通用调用识别 |
| Vue I18n / Nuxt、react-i18next / i18next / Next.js | ✅(调用形式层面) |
React Intl、Angular $localize / ngx-translate / Transloco |
✅ formatMessage({ id })、显式 id、管道和属性写法 |
识别的调用形式:t('k')、$t("k")、i18n.t(\k`)、i18n.global.t('k')、translate('k'), 以及 Vue 指令与组件属性、React Intl formatMessage({ id })、ngx-translate / Transloco 管道、Angular $localize显式 id 等位置。可通过i18nTrace.translationFunctions` 增补函数名。
动态 key(t(\a.${x}`)、t('a.' + x)、t(variable)`)无法可靠解析,直接跳过,不误判。
语言文件格式
| 格式 | 支持 |
|---|---|
| JSON / JSON5 | ✅ |
| YAML / YML | ✅(叶子节点带精确定位) |
| JS / TS / MJS / CJS | ✅ 静态解析 export default { ... } / module.exports = { ... }(不执行代码;import 拼接、展开外部对象、运行时计算值不支持) |
支持:嵌套 key、扁平 key、多 locale、多个 locale 目录、monorepo、多根工作区,以及 i18next 常见的 locales/en/common.json、locales/en/pages/home.json 和 i18n/common/en/index.json 命名空间布局。
配置项
| 键 | 默认 | 说明 |
|---|---|---|
i18nTrace.enabled |
true |
总开关 |
i18nTrace.localeDirs |
[] |
手动指定语言文件目录 / glob;非空时完全以此为准 |
i18nTrace.localeFileGlob |
见设置 | 自动检测语言文件的 glob |
i18nTrace.displayLocale |
"" |
气泡显示语种;留空自动选(优先中文) |
i18nTrace.sourceLocale |
"" |
按译文反查时使用的语种;留空跟随显示语种 |
i18nTrace.keySeparator |
"." |
嵌套语言对象拍平时的 key 分隔符 |
i18nTrace.keyPrefixes |
["++","+","@","#"] |
原 key 不命中时尝试剥离的自定义前缀;清空可关闭 |
i18nTrace.translationFunctions |
["t","$t","$tc","i18n.t","i18n.global.t","translate","$translate","translate.instant","translate.get","translate.stream","transloco.translate"] |
识别为翻译函数的名称(支持点号形式) |
i18nTrace.inlayHints.enabled |
true |
显示译文气泡 |
i18nTrace.inlayHints.maxLength |
40 |
气泡译文截断长度 |
i18nTrace.inlayHints.showWhenMissing |
true |
语言文件里完全找不到该 key 时提示 |
i18nTrace.inlayHints.showWhenIncomplete |
true |
key 存在但缺部分语种时提示(漏翻检测) |
i18nTrace.inlayHints.missingIcon |
"⚠️" |
key 完全缺失的图标;留空只显示 key |
i18nTrace.inlayHints.incompleteIcon |
"🌐" |
漏翻的图标;留空则只在悬浮框里提示 |
i18nTrace.inlayHints.wrap |
"none" |
给行内译文加包裹符(「」 / 『』 / 【】 / ‹› / () / []),便于和代码里的字符串区分 |
i18nTrace.languageSelector |
见设置 | 生效的语言(languageId) |
i18nTrace.search.enhanceCtrlF |
true |
Ctrl+F 增强开关(当前文件) |
i18nTrace.search.enhanceCtrlShiftF |
true |
Ctrl+Shift+F 增强开关(全局) |
i18nTrace.search.maxKeysPerSearch |
50 |
单次增强查找最多纳入的 key 数 |
i18nTrace.search.excludeLocaleFiles |
true |
全局按译文查找时排除语言文件本身 |
命令
I18nTrace: 按译文查找(增强 Ctrl+F)—i18nTrace.findI18nTrace: 按译文全局查找(增强 Ctrl+Shift+F)—i18nTrace.findInFilesI18nTrace: 切换显示语种—i18nTrace.switchDisplayLocaleI18nTrace: 重建索引—i18nTrace.reindexI18nTrace: 开关译文气泡—i18nTrace.toggleInlayHintsI18nTrace: 显示诊断信息—i18nTrace.showDiagnostics(打印扫到的语言文件、locale、key 数、当前文件每个t()的命中情况到「I18nTrace」输出频道,排查用)
架构
Framework Adapter ─┐
Locale Parser ─────┼─→ 统一 I18nIndex ─→ InlayHints / FindEnhancer
│ ↑
└── ConfigService + ProjectScanner(自动检测 + 手动覆盖)
LocaleWatcher(FileSystemWatcher → 增量更新)
I18nIndex维护「规范 key(含命名空间)→ 各语种译文」「别名 → 规范 key」「key 末段 → 规范 key」「归一化译文 → key」几张表,均由语言文件构建key → 代码引用按需在当前活动文档即时扫描,不建全局索引;全局查找则把候选 key 交给 VS Code 自己的搜索引擎去筛- 新增框架 / i18n 库 / 语言文件格式 = 新增一个
FrameworkAdapter/LocaleParser实现并在 registry 注册一次, 核心索引、气泡、搜索逻辑不动
开发
pnpm install
pnpm run watch # esbuild 监听打包
# 按 F5 启动「运行扩展」,会以 test-fixtures 为工作区打开扩展开发宿主
pnpm test # 编译 + 打包 + 在真实 VS Code 中跑单测与集成测试
pnpm run lint
pnpm run typecheck
发布
node scripts/release.mjs # 补丁号 +1(1.0.3 → 1.0.4)
node scripts/release.mjs minor # 或 major / 1.4.0(指定版本号)
node scripts/release.mjs --dry-run # 只演练
node scripts/release.mjs --ovsx # 顺带发 Open VSX
node scripts/release.mjs --no-github # 各平台可单独关
node scripts/release.mjs --publish-only # 补发当前版本到之前跳过/失败的平台(不升版本、不动 git)
执行顺序:写版本 → 打包 → 本地 commit + tag → 发布所有平台 → 全部成功才 git push。
任一平台失败就不 push,并打印回退(全失败)或「用 --publish-only 补发 + 手动 push」(部分成功)的指引。
凭据:Marketplace 读 VSCE_PAT,Open VSX 读 OVSX_PAT,GitHub 用已登录的 gh。
想发的平台缺凭据时:交互模式会让你确认,--yes 模式直接中止(加 --allow-skip 才跳过)。
被跳过或失败时退出码为 1。发布说明取 CHANGELOG.md 对应 ## <版本> 小节。
已知限制
- 全局按译文查找不与实际调用取交集(那需要自建全局代码引用索引),少数情况下会有误报,例如 key 名恰好出现在注释、文档或字符串常量里
- 全局查找的结果树不显示译文,只显示源码里的 key —— VS Code 的搜索结果树不渲染 Inlay Hint,无扩展点
- JS/TS 语言文件仅静态解析
export default { … }/module.exports = { … }里的对象字面量;通过import组合子模块、import.meta.glob动态聚合、运行时计算的翻译取不到(碰到时用I18nTrace: 显示诊断信息排查,或用i18nTrace.localeDirs直接指向叶子语言文件目录) - Angular 无显式
@@id的$localize、Svelte 专用写法需后续 Adapter .vue/.svelte的 languageId 依赖对应语言扩展;未安装时按文件扩展名兜底识别