使用i18n-unused检测react-i18next未用翻译误报问题求助

我在项目中用react-i18next实现国际化，使用i18n-unused工具检测未使用的翻译内容时，大量实际已在代码中使用的翻译（比如header.documents）被误判为未使用，以下是相关配置及代码示例，求可行解决方法：

相关配置及代码示例 #

翻译文件（en.json） #

{
  "translation": {
    "header": {
       "comment": "Comment"
     }
  }
}

i18n初始化代码（i18n.ts） #

import en from 'assets/locales/en.json';

const resources = {
  en: { ...en, translation: { ...en.translation } },
};

export const initLanguage = async () => {
  await i18next.use(initReactI18next).init({
    compatibilityJSON: 'v3',
    resources: resources,
    lng: "en",
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
  });
};

i18n-unused配置 #

module.exports = {
  localesPath: 'assets/locales',
  srcPath: 'src',
};

代码中使用翻译的示例 #

import { useTranslation } from 'react-i18next';
// ...
const { t } = useTranslation();
// ...

return (
  <Header title={t('header.documents')}/>
)

可行解决方法 #

• 自定义翻译函数匹配规则
  i18n-unused默认识别逻辑可能未覆盖react-i18next的用法，在配置文件中添加functionName，指定所有被使用的翻译函数名：

  module.exports = {
    localesPath: 'assets/locales',
    srcPath: 'src',
    functionName: ['t', 'i18next.t']
  };
  

• 简化翻译资源结构
  初始化代码中对en资源的解构合并是多余的，会导致资源结构与工具解析逻辑不匹配，直接改为：

  const resources = {
    en: en,
  };
  

• 校验路径配置准确性
  确认localesPath和srcPath是项目中正确的相对路径，例如若assets在src目录下，路径应改为src/assets/locales，避免工具扫描不到目标文件。

• 开启debug模式排查
  运行命令时添加--debug参数，查看工具的扫描日志：

  i18n-unused display-unused --debug
  

  从日志中可以确认工具是否正确识别了代码中的翻译调用、是否读取到翻译文件的键值，定位具体误判原因。

• 更新工具版本
  旧版本i18n-unused对react-i18next的支持可能不完善，更新到最新版本：

  npm update i18n-unused --save-dev
  

内容的提问来源于stack exchange，提问作者CCCC