如何在VSCode中查找未用i18next翻译的文本？

先明确场景：项目里未翻译的文本一般是这些形式（已翻译内容会用{t('xxx')}包裹）

未翻译示例：

<Button className="w-full" onClick={onClick}>
  Save
<Button>

<ContentWrapper title="Connection" headerAction={<Button size="small">Add</Button>}>
  <div>{`Connection`}</div>
</ContentWrapper>

<div>
  {mediaRecorder?.state === 'recording' ? (
    <Button onClick={handleStop}>{t('Stop')}</Button>
  ) : (
    <Button onClick={handleStart}>Start</Button>
  )}
</div>

已翻译示例：

<Button>{t('Save')}</Button>

<ContentWrapper title={t('Connection')} headerAction={<Button size="small">{t('Add')}</Button>}>
  <div>{t('Connection')}</div>
</ContentWrapper>

最直接的方式：用VSCode正则全局搜索 #

打开VSCode全局搜索（Ctrl+Shift+F），点开「正则表达式」开关（界面上的.*按钮），然后根据不同场景使用对应正则：

1. 匹配标签内的纯文本 #

针对<Button>Save</Button>这类标签包裹的硬编码文本，用这个正则：

>([^<>{}\s]+(?:\s+[^<>{}\s]+)*)<

规则说明：抓取标签闭合符>和<之间的非空文本，自动跳过{t('xxx')}这类已翻译内容。

2. 匹配JSX属性中的硬编码 #

针对title="Connection"这类属性值，用这个正则：

\w+="([^"{]+)"

规则说明：只匹配双引号内的纯文本，不会抓取title={t('xxx')}这类动态属性。

3. 匹配模版字符串中的硬编码 #

针对{Connection}这类模版字符串，用这个正则：

{`([^`]+)`}

规则说明：精准匹配包裹在{``}里的纯文本。

4. 一键覆盖多数场景 #

嫌分开搜索麻烦，用这个组合正则一次性匹配常见未翻译文本：

>([^<>{}\s]+(?:\s+[^<>{}\s]+)*)<|\w+="([^"{]+)"|{`([^`]+)`}

注意：该正则可能误匹配注释、样式类名，需要手动筛选结果

大规模项目用插件更高效 #

如果项目文件数量多，正则筛选效率低，可以安装VSCode专用插件：

• i18n-ally：自动识别未翻译文本，支持批量提取，还能直接在编辑器内替换为t()包裹的格式
• react-i18next-extract：专门针对react-i18next的工具，精准扫描所有未使用t()的硬编码文本

实用小技巧 #

• 搜索时限定文件类型，在「文件包含」输入框中填写*.jsx,*.tsx，只扫描React组件文件，减少无关结果
• 条件渲染中的纯文本（比如示例里的Start），上述正则也能抓取到，只要它是标签内的纯文本内容

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