HTML中用data-i18n-pending属性标记未翻译文本，推荐写法为<p data-i18n-pending="true">用户尚未登录</p>或带key的data-i18n-pending="auth.login.message"。
HTML里怎么标出还没翻译的文本
直接用 data-i18n-pending 属性标记。这是最轻量、最易识别的方式，不干扰渲染，工具链也容易扫描。
- 别用注释（
<!-- TODO: 翻译 -->），构建时难提取，编辑器里还容易被忽略 - 别用占位符字符串（比如
[TRANSLATE_ME]），会混进可访问性树，影响屏幕阅读器 - 推荐写法：
<p data-i18n-pending="true">用户尚未登录</p>，或更明确的data-i18n-pending="auth.login.message"（对应 key） - 如果项目用了 i18n 框架（如 i18next、vue-i18n），确保其插件能识别该属性，否则扫描脚本得自己补
浏览器里快速高亮所有待翻译节点
开发阶段靠 CSS 临时标红，比肉眼扫快得多，且不影响生产环境。
- 在 devtools 控制台粘贴这行就能生效：
document.querySelectorAll('[data-i18n-pending]').forEach(el => el.style.border = '2px dashed #ff6b6b') - 想持久化？加到本地样式表（仅 dev）：
[data-i18n-pending] { outline: 2px dashed #ff6b6b !important; } - 注意：别用
background-color，遮盖原有背景色后可能看不见文字；outline 或 border 更安全 - 如果用了 Shadow DOM，需额外遍历，普通 CSS 选不到
构建时检测遗漏的 data-i18n-pending
CI 流程里加个检查脚本，能卡住带未翻译内容的代码合入主干。
- 用
grep -r 'data-i18n-pending' src/ | grep -v 'false\|resolved'快速确认是否还有残留 - 更可靠的是解析 HTML（如用 cheerio）：查所有
data-i18n-pending值为"true"或未设值的元素 - 警告但不停止构建（warn only），避免阻塞紧急发布；严重项目可设为 error
- 注意：服务端渲染（SSR）页面要检查生成后的 HTML，不是源 JSX/Templates
和 i18n 工具链怎么配合
关键不是“标出来”，而是“标得工具能懂”。不同工具对属性名、值格式有硬性要求。
立即学习“前端免费学习笔记（深入）”；
- i18next 的
extract插件默认不认data-i18n-pending，得配attr选项：{ attr: ['data-i18n-pending'] } - linguiJS 要在
lingui.config.js里加sourceLocale和fallbackLocale，否则 pending 节点可能被当成缺失 key 报错 - Vue 项目慎用
v-html渲染带data-i18n-pending的内容——指令不会解析自定义属性，得手动绑定 - 最保险的做法：pending 状态只出现在静态文本节点，动态内容走 i18n 函数调用（如
{t('login.button')}）
真正麻烦的不是标记动作本身，而是团队对“什么算完成翻译”的定义不一致：是只要填了 key 就删 pending，还是必须通过 QA 多语言验收？这个边界一旦模糊，data-i18n-pending 就会变成永远不消失的幽灵属性。
