Shark-Auto VSCode 插件
自动维护多语言代码映射关系的 VSCode 插件
功能特性
✅ 智能文本识别: 使用可配置的正则表达式识别代码中的中文文本
✅ 自动映射生成: 自动生成有意义的 key 并维护映射文件
✅ 批量处理: 支持单文件和文件夹批量处理
✅ 可视化管理: 侧边栏显示语言映射和变更历史
✅ 一键回退: 支持一键回退上次转换操作
✅ 智能菜单: 根据文件类型和状态动态显示右键菜单
✅ InlayHint 提示: 在代码中直接显示中文原文,并支持悬停查看详情
安装
- 在 VSCode 中按
Ctrl+Shift+X
打开扩展面板
- 搜索 "Shark-Auto"
- 点击安装
或者手动安装:
# 克隆项目
git clone https://git.dev.sh.ctripcorp.com/zzhiyong/shark-auto.git
cd shark-auto
# 安装依赖
npm install
# 编译插件
npm run package
# 打包为.vsix文件
npm run vsix
快速开始
1. 配置插件
打开 VSCode 设置 (Ctrl+,
),搜索 "shark-auto" 进行配置:
- 正则表达式模式: 定义如何匹配中文文本
- 文件类型: 指定需要处理的文件类型 (如 .tsx, .jsx, .ts, .js)
- 排除模式: 排除不需要处理的文件/文件夹
- 映射文件路径: 语言映射文件的位置
- 翻译函数名: 替换时使用的函数名 (默认为
t
)
2. 使用方法
src/
├── controllers/ # 控制器层
│ ├── MainController.ts # 主控制器
│ ├── TransformController.ts # 文件转换控制器
│ ├── ExtractController.ts # 多语言提取控制器
│ ├── RevertController.ts # 回退控制器
│ ├── ReportController.ts # 报告控制器
│ └── SettingsController.ts # 设置控制器
├── views/ # 视图层
│ ├── ExtractLanguageMappingView.ts # 多语言提取视图
│ └── WebViewManager.ts # WebView 管理器
├── models/ # 模型层
│ ├── StatusManager.ts # 状态管理
│ └── CommandRegistry.ts # 命令注册
├── services/ # 现有服务层
└── extension.ts # 简化后的入口文件
方法一:右键菜单
- 在支持的文件中右键 → 选择 "转化多语言"
- 在文件夹上右键 → 选择 "转化文件夹中的多语言"
方法二:命令面板
按 Ctrl+Shift+P
打开命令面板,输入:
Shark Auto: 转化多语言
Shark Auto: 转化文件夹中的多语言
Shark Auto: 显示转化报告
Shark Auto: 回退上次多语言转化
方法三:侧边栏
点击活动栏中的 Shark Auto 图标,使用可视化界面进行操作。
转换示例
转换前:
import React from 'react';
const TestComponent = () => {
return (
<div>
<h1>测试标题</h1>
<p>这是一段中文文本,用于测试多语言转换功能</p>
<button>点击按钮</button>
</div>
);
};
转换后:
import React from 'react';
const TestComponent = () => {
return (
<div>
<h1>{t("title")}</h1>
<p>{t("long_text_a1b2")}</p>
<button>{t("long_text_c3d4")}</button>
</div>
);
};
生成的映射文件 (shark.ts):
import transform from './utils/transform'
const map = {
welcome: '欢迎使用', // 欢迎使用
settings: '设置', // 设置
language: '语言', // 语言
title: '测试标题', // 测试标题
long_text_a1b2: '这是一段中文文本,用于测试多语言转换功能', // 这是一段中文文本,用于测试多语言转换功能
long_text_c3d4: '点击按钮', // 点击按钮
}
export default transform(map)
配置说明
默认正则表达式
插件预设了两个正则表达式来匹配中文文本:
- 双引号中文:
"([\\u4e00-\\u9fa5]+[^"]*?)"
- 单引号中文:
'([\\u4e00-\\u9fa5]+[^']*?)'
自定义正则表达式
可以添加更多正则表达式来匹配特定场景:
{
"shark-auto.regexPatterns": [
{
"name": "双引号中文",
"regex": "\"([\\u4e00-\\u9fa5]+[^\"]*?)\"",
"group": 1
},
{
"name": "JSX标签内容",
"regex": ">([\\u4e00-\\u9fa5][^<]*?)<",
"group": 1
}
]
}
高级配置
{
"shark-auto.includeFileTypes": [".tsx", ".jsx", ".ts", ".js", ".vue"],
"shark-auto.excludePatterns": [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/*.test.ts",
"**/*.spec.ts"
],
"shark-auto.languageMapFile": "src/i18n/zh-CN.ts",
"shark-auto.translationFunctionName": "i18n.t"
}
智能 Key 生成
插件会根据中文内容智能生成有意义的 key:
中文文本 |
生成的 Key |
确定 |
confirm |
取消 |
cancel |
保存 |
save |
删除 |
delete |
用户管理 |
user |
短文本 |
short_text_xxxx |
长文本内容 |
long_text_xxxx |
特色功能
1. 侧边栏视图
- 语言映射: 显示当前项目的所有语言映射条目
- 最近变更: 查看最近一次转换的详细信息
- 插件设置: 快速访问插件配置
2. 智能菜单
- 只在支持的文件类型中显示转换菜单
- 只在有可回退操作时显示回退菜单
- 动态根据上下文调整菜单选项
3. 批量处理
- 支持选择文件夹进行批量转换
- 显示处理进度和统计信息
- 自动跳过不支持的文件类型
4. 备份和回退
- 自动备份原始文件
- 支持一键回退到上次转换前的状态
- 安全的文件操作,防止数据丢失
5. InlayHint 中文提示与搜索
- 直观中文提示: 在代码中 t() 函数旁直接显示对应的中文注释
- 悬停查看详情: 将鼠标悬停在提示上可查看完整的键值对和中文原文
- 中文搜索功能: 支持通过以下方式搜索中文内容:
- 符号搜索: 按下
Ctrl+T
(Windows/Linux)或 Cmd+T
(Mac)输入中文关键词
- 工作区符号搜索: 按下
Ctrl+Shift+O
(Windows/Linux)或 Cmd+Shift+O
(Mac)搜索当前文件中的中文
- 跨文件符号搜索: 所有 t() 函数中的中文内容都可通过符号搜索找到
- 支持注释优先: 搜索时优先匹配 shark.ts 文件中的注释内容,提高搜索准确性
使用示例:
- 在任何包含 t("key") 的文件中,会自动显示对应的中文注释
- 按 Ctrl+T 输入你要查找的中文内容,可直接定位到对应的代码位置
- 即使文件中不存在实际的中文字符,也能通过符号搜索找到
开发
本地开发
# 安装依赖
npm install
# 启动开发模式
npm run dev
# 在VSCode中按F5启动调试
构建发布
# 编译
npm run compile
# 打包生产版本
npm run package
# 生成VSIX文件
npm run vsix
贡献
欢迎提交 Issue 和 Pull Request!
许可证
MIT License
更新日志
v0.0.1
- 🎉 初始版本发布
- ✨ 支持基本的中文文本识别和替换
- ✨ 可配置的正则表达式匹配
- ✨ 智能 key 生成
- ✨ 侧边栏视图
- ✨ 批量处理功能
- ✨ 备份和回退功能
反馈
如果您在使用过程中遇到问题或有任何建议,请通过以下方式联系我们:
享受多语言开发的便利! 🚀
技术实现
文件 ID 提取:从 URL 的 state 参数中解析文件 ID(如 1se0712000csvlfcq506D.xlsx)
Cookie 管理:登录成功后自动获取新的 Cookie
错误处理:完善的错误提示和日志记录
用户体验:友好的界面和清晰的操作提示
📱 二维码界面特性
响应式设计,适配不同屏幕尺寸
加载动画和状态提示
自动刷新过期二维码
支持用户取消操作
🔄 工作流程
用户触发下载 → 重定向到登录页面
自动弹出二维码登录窗口
用户扫码登录 → 系统检测登录状态
登录成功 → 获取新 Cookie → 访问原始页面
尝试提取直接下载链接 → 如果没有则模拟点击下载
成功下载文件
1. 问题修复
1.1 重复转换问题修复
问题:{t('发送成功')}
会被错误转换成{t({t("success")})}
解决方案:
- 在
src/services/textDetectionService.ts
中添加了 isAlreadyInTranslationFunction
方法
- 使用多种正则表达式模式精确检测已经在翻译函数中的文本
- 支持检测各种翻译函数格式:
t()
、{t()}
、message.error(t())
等
/**
* 检查文本是否已经在翻译函数中
* @description 使用多种正则表达式模式检测已经在翻译函数中的文本,避免重复转换
*/
private isAlreadyInTranslationFunction(text: string, matchIndex: number, matchLength: number): boolean
强化工作区符号搜索
通过 VSCode 的符号搜索功能直接定位到代码:
按下 Ctrl+T 打开工作区符号搜索
输入中文关键词,例如"以下栏目我社专用"
直接跳转到相应文件位置
需要对 WorkspaceSymbolProvider 进行调整,确保它能正确索引所有中文注释。