Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Shark-AutoNew to Visual Studio Code? Get it now.
Shark-Auto

Shark-Auto

ywzzy

|
2 installs
| (0) | Free
自动维护BMS多语言代码映射关系的VSCode插件
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Shark-Auto VSCode 插件

自动维护多语言代码映射关系的 VSCode 插件

功能特性

✅ 智能文本识别: 使用可配置的正则表达式识别代码中的中文文本
✅ 自动映射生成: 自动生成有意义的 key 并维护映射文件
✅ 批量处理: 支持单文件和文件夹批量处理
✅ 可视化管理: 侧边栏显示语言映射和变更历史
✅ 一键回退: 支持一键回退上次转换操作
✅ 智能菜单: 根据文件类型和状态动态显示右键菜单 ✅ InlayHint 提示: 在代码中直接显示中文原文,并支持悬停查看详情

安装

  1. 在 VSCode 中按 Ctrl+Shift+X 打开扩展面板
  2. 搜索 "Shark-Auto"
  3. 点击安装

或者手动安装:

# 克隆项目
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)

配置说明

默认正则表达式

插件预设了两个正则表达式来匹配中文文本:

  1. 双引号中文: "([\\u4e00-\\u9fa5]+[^"]*?)"
  2. 单引号中文: '([\\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 文件中的注释内容,提高搜索准确性

使用示例:

  1. 在任何包含 t("key") 的文件中,会自动显示对应的中文注释
  2. 按 Ctrl+T 输入你要查找的中文内容,可直接定位到对应的代码位置
  3. 即使文件中不存在实际的中文字符,也能通过符号搜索找到

开发

本地开发

# 安装依赖
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 进行调整,确保它能正确索引所有中文注释。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft