不少项目早期都在“追业务速度”，文案直接写在页面里。等要支持多语言时，问题就来了：
- 文案散落在模板、脚本、属性里，人工找一遍都费劲
- 改造流程长：提词条、起 key、写翻译、替换代码
- 一轮改下来，总有漏的、错的，还不好回溯
这篇文章想分享一个更“工程化”的方案：
使用 VS Code 插件 i18n Mage 的「硬编码文本提取」能力
把一个未做国际化的 Vue 项目，从 0 到 1 快速启动。
一句话说结论
你可以先正常写业务文案。
执行一次提取命令后，插件会自动完成：
- 扫描硬编码文本（基于 AST，准确定位）
- 生成语义化 key（支持英文 / 拼音策略）
- 批量翻译并写入多语言文件
- 自动替换原文为 i18n 函数调用
全程可视、可控、可回退。
这个方案解决了哪些痛点？
1）未国际化项目也能“从 0 到 1”启动
不是要求你先把 i18n 基建搭好才能用。
首次提取时，插件会引导你完成关键配置：翻译目录、文件类型、函数名、写入规则等，然后才开始扫描与提取。
2）三段式流程，不是“扫描完就改代码”
改造过程分三步，每一步都能确认和调整：
- 引导配置：填写提取规则
- 扫描确认：查看所有硬编码文本，支持勾选、忽略
- 预览确认：最终变更预览，确认后再应用
对大项目来说，这很关键：可控、可回退、可解释。
3）支持多种翻译服务，包括 AI
插件支持 Google、DeepL、百度、腾讯、有道等传统翻译服务，也支持 OpenAI、DeepSeek 等 AI 服务（还可以自定义 Prompt，让翻译更符合团队术语风格）。
4）自动生成语义化的 key
很多 i18n 工具生成的 key 是一串无意义的哈希（如 msg_1），后期维护会非常痛苦。
i18n Mage 在提取时，会自动生成语义化 key：
- key 策略：支持基于英文 / 拼音生成 key，key 过长时可调用 AI 智能生成
- key 风格：支持大驼峰、小驼峰、下划线、连字符等
- key 前缀：支持基于文件路径生成前缀以进行模块分类
不仅解决“提取”，还解决了“长期维护可读性”。
实战：改造一个“未做 i18n 的 Vue 项目”
下面按真实流程走一遍。
Step 1：执行提取命令
- 打开命令面板（
Cmd/Ctrl + Shift + P） - 输入并执行：
i18nMage.extractHardcodedTexts
Step 2：首次引导配置（关键）
假设这是一个 Vue 项目，还没有任何 i18n 文件。进行提取时，需要在引导页里分别配置好项目设置、写入规则和提取设置。
项目设置用来配置国际化框架、国际化函数使用方式和需要支持的语言等。
- 国际化框架：如
vue-i18n - 翻译文件路径：不存在会自动创建
- Vue 模板函数名 / 脚本函数名：如
$t/t - JS/TS 与 Vue 脚本的导入/初始化语句：用于自动注入
写入规则用来配置翻译文件及数据的写入风格，支持动态预览写入效果。
提取设置用来配置所要提取的范围。
Step 3：扫描确认——先看“要提什么”
进入扫描确认页后，你会看到所扫描出来的按文件分组的候选硬编码文本。
这一步可以做三件事：
- 勾选/取消本次要提取的文本
- 把文件加入长期黑名单
- 把某些文本加入长期忽略列表
页面会实时预估摘要：
- 预计新增 key 数
- 预计修改文件数
- 预计写入语种数
Step 4：预览确认——再决定是否应用
扫描确认后会进入预览页，你可以看到：
- 哪些 key 会新增
- 哪些代码会被替换
- 各语种 value 的变更
确认后再应用，风险会比“直接改代码”小得多。
改造前后示例（Vue）
语言文件会自动新增这些 key，并按你配置的规则格式化。
除了硬编码提取，这个插件还能做什么？
硬编码提取是“从 0 到 1”的入口。
如果你继续用 i18n Mage，后面还能覆盖完整日常链路：
- 翻译树管理与可视化浏览
- 行内翻译提示
- i18n 智能补全
- 缺失翻译自动填充
- 未使用 key 检测
- 翻译搜索
- Excel 导入/导出
- 跨项目翻译迁移
它不是一个单点提取工具，而是一个全流程 i18n 工具链。
最后
如果你手上正好有一个“历史包袱重、硬编码多”的 Vue 项目，
建议先拿一个子模块试跑一次这个流程，通常第一轮就能看到效率收益。
相关链接
- GitHub：github.com/baimohui/i1…
- VS Code Marketplace：marketplace.visualstudio.com/items?itemN…
