CodeBuddy提取中文字符串生成raw-zh.txt,i18n-mcp据此生成语义化key及zh.ts/en.ts,VS Code插件补全动态文案并校验多语言一致性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你需要在现有前端项目中快速完成国际化改造,把散落在.vue、.ts文件里的中文字符串自动提取出来,生成标准的zh.ts和en.ts资源文件,同时保留原始代码结构不被破坏。
用CodeBuddy提取原始中文字符串
这一步是整个流程的起点,必须确保只提取真实需要翻译的文案,跳过注释、HTML属性值(如id、class)、变量名等干扰项。
1、打开CodeBuddy主界面,点击【源码解析】工具模块。
2、批量上传项目中所有待处理的.vue、.ts、.js文件,【务必排除node_modules和构建产物目录】。
3、在解析设置中仅启用“提取中文字符串”,关闭“自动翻译”“格式化JSON”等无关选项——开启它们会导致raw-zh.txt混入非人工校验内容,后续i18n-mcp会误判上下文。
4、点击“开始解析”,系统逐行扫描并识别\u4e00-\u9fa5范围内的连续中文字符序列,自动过滤掉注释块中的中文(如//按钮点击后弹出提示)。
5、导出为raw-zh.txt,每行一条未去重文案,保留原始出现顺序——这个顺序会被i18n-mcp用于推断key语义层级。
用i18n-mcp生成语义化Key与多语言文件
i18n-mcp不是简单做字符串映射,它会根据代码位置、父级标签、相邻属性名来生成像header.userProfile.title这样的key,避免手动命名冲突。
方法一:基础提取
在项目根目录执行:npx i18n-mcp extract --input raw-zh.txt --output src/locales/zh.ts
方法二:带上下文策略的提取
先创建.i18nrc.json配置文件,写入:{"keyGenerationStrategy": "semantic-context"}
再运行相同命令,此时会生成actions.deleteButtonLabel而非delete_1。
方法三:跳过key生成,直接进翻译环节
如果你已有key命名规范文档,可加--skip-keygen参数,强制使用raw-zh.txt每行首词作为key前缀,例如“用户登录成功”→userLoginSuccess。
用VS Code插件i18n Text Converter完成现场替换
当代码里还残留少量未被CodeBuddy捕获的动态拼接字符串(比如`const msg = '操作' + status + '成功'`),就得靠编辑器插件实时补位。
第一步:在VS Code扩展市场安装i18n Text Converter,重启编辑器。
第二步:打开任意.vue文件,选中一段中文文本(如“提交失败,请重试”),右键→“Convert to i18n”。
第三步:插件自动模糊匹配已有key,若出现多个候选(如errors.submitFailed、messages.submitError),【必须手动选择最贴合当前语境的那一个】,否则运行时t()调用会返回undefined。
第四步:匹配失败时,输入新key(如form.validation.requiredField),插件立即在zh.json中追加该key,并同步调用Copilot后台生成en.json对应译文。
第五步:检查控制台是否报warning——如果看到“[i18n] missing key: form.validation.requiredField”,说明en.json没写入成功,需手动打开en.json确认字段层级是否与zh.json完全一致。


















