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 生成
✨ 侧边栏视图
✨ 批量处理功能
✨ 备份和回退功能

反馈

如果您在使用过程中遇到问题或有任何建议，请通过以下方式联系我们：

提交 Issue
发送邮件至开发者

享受多语言开发的便利！ 🚀

技术实现文件 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 进行调整，确保它能正确索引所有中文注释。

Shark-Auto

ywzzy