Hover I18n Hint - 国际化提示
功能介绍
这是一个 VSCode 插件,能在代码编辑器中悬停在国际化 key(如 l0359)上时显示对应的中文文案,提高开发效率。
主要特性
- ✅ 悬停提示:鼠标悬停在国际化 key 上时显示对应的中文文案
- ✅ 智能识别:支持多种格式的国际化 key(l0359, L0359, 'l0359', "l0359", {l0359})
- ✅ 多文件支持:自动查找并加载项目中的国际化资源文件
- ✅ 多格式支持:支持多种格式的国际化资源文件,包括常见的IIFE格式
- ✅ 绝对路径支持:可以使用绝对路径直接指向资源文件
- ✅ 实时更新:监听资源文件变更,自动更新提示内容
- ✅ 高性能:针对大文件做了性能优化,不影响编辑器体验
- ✅ 可配置:支持自定义资源文件路径、key 格式等
- ✅ 诊断工具:内置诊断命令,帮助排查和解决资源加载问题
- ✅ 实时监听:自动监听国际化资源文件变化,无需重启即可更新提示
安装方法
从 VS Code 扩展商店安装
- 打开 VS Code
- 点击左侧扩展图标
- 搜索 "Hover I18n Hint"
- 点击 "安装" 按钮
从 VSIX 文件安装
- 下载最新的
.vsix 文件
- 在 VS Code 中,选择 "扩展" -> "从 VSIX 安装..."
- 选择下载的
.vsix 文件
使用方法
插件会自动在工作区中查找国际化资源文件(默认路径:app/iframe/locale/zh.js )。如果找到了资源文件,则会自动加载并在编辑器中启用悬停提示功能。
交互方式:将鼠标悬停在国际化 key 上,会显示一个带有中文文案的提示框。
支持的文件类型
- JavaScript (.js)
- TypeScript (.ts)
- React (.jsx, .tsx)
- Vue (.vue)
- HTML (.html)
- JSON (.json)
支持的 key 格式
- 直接使用:
l0359 , L0359
- 字符串形式:
'l0359' , "l0359"
- 对象访问形式:
R['l0359'] , R["l0359"] , R.l0359
- window访问形式:
window.LanData.R['l0359'] , LanData.R['l0359']
- 函数调用形式:
t('l0359') , i18n.t('l0359')
- JSX 中使用:
{l0359}
- 对象属性:
strings.l0359
支持的资源文件格式
插件支持多种常见的国际化资源文件格式:
IIFE格式(立即执行函数)
(function(window){
var zhCn={
name:'zhCn',
R:{
'l0001':'搜索',
'l0025': '病案等级',
// ...
}
}
window.LanData = zhCn;
})(this)
导出对象格式
export default {
l0001: '搜索',
l0002: '保存',
// ...
}
CommonJS格式
module.exports = {
l0001: '搜索',
l0002: '保存',
// ...
}
常量对象格式
const R = {
l0001: '搜索',
l0002: '保存',
// ...
}
配置选项
可以在 VS Code 的设置中配置以下选项:
配置项 |
说明 |
默认值 |
hoverShowDes.i18nFilePath |
国际化资源文件路径(相对于工作区或绝对路径) |
app/iframe/locale/zh.js |
hoverShowDes.enabled |
启用/禁用国际化提示 |
true |
hoverShowDes.showInlineText |
是否在国际化标记后直接显示对应文案 |
true |
命令
可以通过命令面板(Ctrl+Shift+P 或 Cmd+Shift+P )执行以下命令:
HoverShowDes: 刷新国际化资源 :手动刷新国际化资源并更新提示
HoverShowDes: 切换国际化提示 :启用/禁用提示功能
常见问题
没有显示提示
- 检查是否正确安装并启用了插件
- 确认当前文件类型是否受支持
- 尝试将鼠标精确地悬停在国际化key上(必须直接悬停在key文本上)
- 尝试手动指定国际化资源文件的绝对路径
- 执行
HoverShowDes: 刷新国际化资源 命令
- 查看VSCode输出面板中的插件日志
识别到的 key 数量不正确
- 检查 zh.js 文件格式是否符合插件支持的格式
- 查看输出面板中的日志,确认资源文件是否被正确加载
- 可能需要调整正则表达式以匹配项目中使用的特定key格式
为什么改用悬停方式显示?
之前的行内装饰器方式在处理多个国际化key时容易出现文本重叠和错乱问题,特别是在大文件或复杂格式下。
悬停显示方式更可靠,不会影响代码视图的整洁度,同时提供更好的性能和用户体验。
更新zh.js后提示没有更新
当你更新zh.js文件后,插件会自动检测变化并重新加载资源。如果没有自动更新,你可以:
- 等待几秒钟,文件系统监听器有时会有短暂延迟
- 执行
HoverShowDes: 刷新国际化资源 命令手动刷新
- 确保修改的zh.js文件是插件正在使用的那个(可以查看输出面板中的日志确认)
反馈与贡献
欢迎提交问题和建议,或者参与项目开发:
许可证
MIT
| |