I18n Inline Translation
🌍 智能国际化翻译内联显示插件 - 让翻译键值在代码中实时显示对应的翻译内容
Languages: English | 中文
✨ 核心特性
🎯 内联翻译显示
- 实时预览：直接在代码中显示翻译内容，无需切换文件
- 智能编辑：点击翻译内容时自动切换到编辑模式显示原键值
- 无缝体验：光标离开时自动恢复翻译显示
- 多语言支持：自动识别项目语言配置
// 编辑状态：显示原键值
t('user.profile.name')
// 预览状态：显示翻译内容
t('user.profile.name') → 用户姓名
🔍 智能代码助手
- 悬停提示：鼠标悬停显示完整翻译信息和参数详情
- 跳转定义：一键跳转到语言包文件的具体位置
- 智能补全：输入时提供翻译键值的智能建议
- 参数提示：支持插值参数的智能补全和预览
🚀 高级功能
- 多框架支持：Vue、React、Angular、原生 JavaScript
- 灵活配置：支持自定义语言包路径和扫描规则
- 性能优化：基于 reactive-vscode 的响应式架构
- 实时更新：语言包文件变更时自动刷新
📦 安装
方式一：手动安装 (推荐)
- 下载最新的
.vsix 文件
- 打开 VSCode，按
Ctrl+Shift+P (macOS: Cmd+Shift+P)
- 输入
Extensions: Install from VSIX...
- 选择下载的
.vsix 文件
- 重启 VSCode
方式二：命令行安装
code --install-extension i18n-inline-translation-0.1.3.vsix
⚙️ 配置
基础配置
在 VSCode 设置中搜索 mplat-i18n 或编辑 settings.json：
{
"mplat-i18n.autoDiscovery": true,
"mplat-i18n.defaultLocale": "zh-CN",
"mplat-i18n.fallbackLocale": "en",
"mplat-i18n.enableInlineTranslation": true,
"mplat-i18n.enableHover": true,
"mplat-i18n.enableDefinition": true,
"mplat-i18n.enableCompletion": true
}
高级配置
{
"mplat-i18n.scanPatterns": [
"src/locales/**/*.{ts,js,json}",
"src/i18n/**/*.{ts,js,json}",
"locales/**/*.{ts,js,json}",
"lang/**/*.{ts,js,json}"
],
"mplat-i18n.manualPaths": [
"src/assets/i18n",
"public/locales"
]
}
配置项详解
| 配置项 |
类型 |
默认值 |
描述 |
autoDiscovery |
boolean |
true |
自动发现项目中的语言包文件 |
scanPatterns |
string[] |
["src/locales/**/*.{ts,js}"] |
语言包文件扫描规则 |
manualPaths |
string[] |
[] |
手动指定的语言包目录路径 |
defaultLocale |
string |
"zhCN" |
默认显示语言 |
fallbackLocale |
string |
"en" |
备用语言 |
enableInlineTranslation |
boolean |
false |
启用内联翻译显示 |
enableHover |
boolean |
true |
启用悬停提示 |
enableDefinition |
boolean |
true |
启用跳转定义 |
enableCompletion |
boolean |
true |
启用智能补全 |
🎮 使用方法
支持的文件类型
- TypeScript (
.ts)
- JavaScript (
.js)
- Vue (
.vue)
- JSX/TSX (
.jsx, .tsx)
支持的函数格式
Vue 项目
<template>
<!-- Vue 模板语法 -->
<div>{{ $t('welcome.message') }}</div>
<button>{{ $t('button.submit') }}</button>
</template>
<script setup>
// Composition API
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const message = t('user.profile.title')
const greeting = t('welcome.greeting', { name: 'John' })
</script>
React 项目
import { useTranslation } from 'react-i18next'
function Component() {
const { t } = useTranslation()
return (
<div>
<h1>{t('page.title')}</h1>
<p>{t('user.description', { count: 5 })}</p>
</div>
)
}
原生 JavaScript
// 各种调用方式
i18n.t('menu.home')
this.t('error.network')
translate('success.saved')
$t('loading.please_wait')
语言包文件格式
TypeScript/JavaScript 格式
// src/locales/zh-CN.ts
export default {
welcome: {
message: '欢迎使用我们的应用',
greeting: '你好，{name}！'
},
user: {
profile: {
title: '用户资料',
name: '姓名',
email: '邮箱地址'
}
},
button: {
submit: '提交',
cancel: '取消',
save: '保存'
}
}
JSON 格式
{
"welcome": {
"message": "Welcome to our application",
"greeting": "Hello, {name}!"
},
"user": {
"profile": {
"title": "User Profile",
"name": "Name",
"email": "Email Address"
}
}
}
🔧 功能演示
1. 内联翻译显示
当光标不在翻译键值上时，显示翻译内容：
const title = t('user.profile.title') → 用户资料
当点击或编辑翻译键值时，自动切换到编辑模式：
const title = t('user.profile.title') // 显示原键值供编辑
2. 智能补全
输入 t('user. 时会显示：
user.profile.title → 用户资料user.profile.name → 姓名user.profile.email → 邮箱地址
3. 悬停提示
悬停在 t('welcome.greeting', { name: 'John' }) 上显示：
🌍 Translation
📝 你好，John！
📋 Details
🔑 Key: welcome.greeting
🌍 Locale: zh-CN
🔧 Parameters: name
💡 Usage Example
t('welcome.greeting', { name: 'value' })
4. 跳转定义
Ctrl+Click (macOS: Cmd+Click) 或按 F12 跳转到语言包文件的对应位置。
🏗️ 项目结构支持
插件支持多种常见的项目结构：
项目根目录/
├── src/
│ ├── locales/ # 推荐结构
│ │ ├── zh-CN.ts
│ │ ├── en.ts
│ │ └── index.ts
│ ├── i18n/ # 备选结构
│ │ └── lang/
│ └── assets/
│ └── i18n/ # 静态资源结构
├── locales/ # 根目录结构
├── lang/ # 简化结构
└── public/
└── locales/ # 公共资源结构
🎨 自定义配置示例
Vue 项目配置
{
"mplat-i18n.scanPatterns": [
"src/locales/**/*.{ts,js}",
"src/i18n/lang/**/*.{ts,js}"
],
"mplat-i18n.defaultLocale": "zh-CN",
"mplat-i18n.enableInlineTranslation": true
}
React 项目配置
{
"mplat-i18n.scanPatterns": [
"src/locales/**/*.{ts,js,json}",
"public/locales/**/*.json"
],
"mplat-i18n.defaultLocale": "en",
"mplat-i18n.fallbackLocale": "en"
}
多包项目配置
{
"mplat-i18n.scanPatterns": [
"packages/*/src/locales/**/*.{ts,js}",
"packages/*/src/i18n/**/*.{ts,js}",
"apps/*/src/locales/**/*.{ts,js}"
]
}
🔍 故障排除
常见问题
Q: 为什么看不到翻译内容？
A: 请检查：
- 是否启用了内联翻译：
"mplat-i18n.enableInlineTranslation": true
- 语言包路径是否正确配置
- 语言包文件格式是否支持
Q: 智能补全不工作？
A: 请确认：
- 文件类型是否受支持 (
.ts, .js, .vue)
- 是否在正确的函数调用位置 (
t(', $t(')
- 语言包是否被正确扫描
Q: 跳转定义失败？
A: 请检查：
- 语言包文件是否存在
- 键值是否在语言包中定义
- 文件路径是否可访问
调试模式
打开 VSCode 开发者工具 (Help > Toggle Developer Tools) 查看控制台输出：
MPLAT I18n Plugin (Reactive) is now active!
I18n service created successfully
🚀 性能优化
- 响应式架构：基于 reactive-vscode，只在需要时重新计算
- 智能缓存：语言包内容缓存，减少文件读取
- 增量更新：文件变更时仅更新相关部分
- 限制结果：智能补全限制为 50 项，提升性能
🛠️ 开发
本地开发
# 克隆项目
git clone <repository-url>
cd i18n-inline-translation
# 安装依赖
npm install
# 编译
npm run compile
# 监听模式
npm run watch
# 打包
npx vsce package
技术栈
- TypeScript - 类型安全的开发体验
- reactive-vscode - 响应式 VSCode 扩展框架
- Babel - 代码解析和 AST 处理
📝 更新日志
v0.1.3
- 🎯 重大更新：实现基于光标位置的智能内联编辑
- ✨ 新功能：参照 PNPM Catalog Lens 的交互逻辑
- 🔧 优化：移除点击切换，改为自动检测编辑状态
- 🚀 性能：简化状态管理，提升响应速度
- 🐛 修复：解决插件重启无响应问题
v0.1.2
- 🎨 增强补全：支持模糊搜索和层级匹配
- 📝 丰富文档：添加使用示例和参数提示
- 🔧 扩展支持：支持更多翻译函数格式
- ⚡ 性能优化：限制补全结果数量
v0.1.1
- ✅ 修复语言包识别问题
- ✅ 优化内联显示布局
- ✅ 改进显示效果和颜色
- ✅ 增强语言包扫描
v0.1.0
- 🎉 初始版本发布
- 🔍 悬停提示功能
- 🎯 跳转到定义功能
- ✨ 内联翻译显示功能
- 🎨 智能补全功能
🤝 贡献
欢迎提交 Issue 和 Pull Request！
- Fork 项目
- 创建特性分支
- 提交更改
- 推送到分支
- 创建 Pull Request
📄 许可证
MIT License
🙏 致谢
享受智能的国际化开发体验！ 🌍✨
