1. 插件安装
首先在VSCode扩展市场中搜索并安装 i18n Ally 插件。
2. 配置文件设置
在项目根目录下创建或编辑 .vscode/settings.json 文件,添加以下配置:
js
{
"i18n-ally.localesPaths": ["src/locales"],
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": ["ts"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue"],
"i18n-ally.editor.preferEditor": true
}
3. 配置项说明
- i18n-ally.localesPaths : 指定翻译文件所在目录,项目中为 src/locales 。
- i18n-ally.keystyle : 设置翻译键的风格,项目中使用嵌套对象格式( nested )。
- i18n-ally.enabledParsers : 启用TypeScript解析器( ts ),因为项目中的翻译文件是 .ts 格式。
- i18n-ally.sourceLanguage : 设置源语言为英语( en )。
- i18n-ally.displayLanguage : 设置显示语言为中文( zh-CN )。
- i18n-ally.enabledFrameworks : 启用Vue框架支持。
4. 使用方法
配置完成后,i18n Ally插件会自动识别项目中的翻译文件,并提供以下功能:
- 在代码中悬停翻译键时显示翻译内容
- 侧边栏提供翻译管理界面
- 支持自动翻译和批量操作
- 检测缺失的翻译键
5. 注意事项
- 确保翻译文件格式与配置一致(项目中使用TypeScript模块导出对象)。
- 如果修改了翻译文件结构,需要重启VSCode或重新加载插件使配置生效。
- 插件支持Vue I18n 9.x的Composition API模式(项目中设置了 legacy: false )。 通过以上配置,i18n Ally插件可以很好地与项目中的Vue I18n集成,提升国际化开发效率。