VS Code 里 I18n Ally 突然不显示中文的排查记录

# VS Code 里 I18n Ally 突然不显示中文的排查记录

最近项目里遇到一个小问题：之前在 Vue 文件里写 `$t('common.name')` 时，I18n Ally 会直接在旁边显示中文，比如 `姓名`。但不知道什么时候开始，中文提示突然没了，开发时又要手动去翻国际化 JSON，挺影响效率。

## 项目情况

项目使用的是 Vue + vue-i18n，国际化入口大概是这样：

```js
import VueI18n from 'vue-i18n'
import en from './lang/en.json'
import zh from './lang/zh.json'

const i18n = new VueI18n({
  locale: localStorage.getItem('localize_lang') || 'zh',
  messages: {
    en,
    zh
  }
})

语言包目录是：

common/language/lang
├── zh.json
└── en.json

比如 zh.json 里有：

{
  "common": {
    "name": "姓名"
  }
}

正常情况下，代码里写：

$t('common.name')

I18n Ally 应该能显示对应的中文。

问题原因

这次主要有两个原因：

1. VS Code 打开的目录层级和 I18n Ally 配置里的 localesPaths 不一致。

   如果 VS Code 打开的是项目根目录，那么路径应该是：

   "i18n-ally.localesPaths": [
     "src/common/language/lang"
   ]
   

   但如果 VS Code 直接打开的是 src 目录，那么路径就应该是：

   "i18n-ally.localesPaths": [
     "common/language/lang"
   ]
   

   路径一旦不匹配，I18n Ally 就扫不到语言包。

2. VS Code / I18n Ally 没有重新加载配置。

   修改 .vscode/settings.json 后，扩展不一定会立刻重新扫描语言包。
   所以看起来配置没错，但页面里仍然没有中文提示。

解决方式

我最后在对应的 .vscode/settings.json 里补了配置。

如果打开的是项目根目录：

{
  "i18n-ally.localesPaths": [
    "src/common/language/lang"
  ],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.enabledParsers": ["json", "json5"],
  "i18n-ally.sourceLanguage": "zh",
  "i18n-ally.displayLanguage": "zh",
  "i18n-ally.annotations": true,
  "i18n-ally.encoding": "utf-8",
  "i18n-ally.enabledFrameworks": [
    "vue"
  ]
}

如果打开的是 src 目录：

{
  "i18n-ally.localesPaths": [
    "common/language/lang"
  ],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.enabledParsers": ["json", "json5"],
  "i18n-ally.sourceLanguage": "zh",
  "i18n-ally.displayLanguage": "zh",
  "i18n-ally.annotations": true,
  "i18n-ally.encoding": "utf-8",
  "i18n-ally.enabledFrameworks": [
    "vue"
  ]
}

配置好之后，执行：

Developer: Reload Window

重新加载 VS Code 窗口后，$t('common.name') 旁边的中文提示就恢复了。

关于 I18n Ally: Restart

我一开始也想找 I18n Ally: Restart，但命令面板里没搜到，也没反应。

这个不一定是项目问题，可能是当前版本没有暴露这个命令，或者扩展当时没有正确激活。实际处理时，Developer: Reload Window 更稳定，因为它会重新加载 VS Code 窗口和扩展环境，让 I18n Ally 重新读取配置、重新扫描语言包。

总结

以后如果 I18n Ally 突然不显示中文，可以优先检查这几个点：

1. i18n-ally.localesPaths 路径是否和当前 VS Code 打开的目录层级一致。
2. i18n-ally.displayLanguage 是否设置成了 zh。
3. i18n-ally.annotations 是否开启。
4. 语言包文件是否确实在配置路径下。
5. 修改配置后执行 Developer: Reload Window。

这类问题本质上不是 $t 写法错了，也不是 vue-i18n 出问题了，而是 VS Code 扩展没有正确识别到语言包配置。