RSSC 开发工具箱 (RSSC Toolbox)

一款集成在 VSCode 中的常用开发工具集合插件，把日常开发里高频使用的小工具都收进一个面板里，让你在编辑器内就能完成 JSON 格式化、文本对比、时间戳转换、二维码生成、正则表达式测试、Cron 表达式解析、Curl 指令生成器等工作，不必再频繁切换到外部网站或应用。

特性一览

• 🧰 一站式工具集：多个常用工具在同一 Webview 面板内一键切换
• 🚀 开箱即用：通过命令面板或快捷键即可唤起，零配置
• 🪶 轻量无依赖（除二维码生成使用 qrcode 库）：所有工具纯前端处理，响应迅速
• 💾 状态持久化：每个工具的输入内容会自动保存，重启后仍可继续编辑
• 🔍 类 IDE 体验：内置类 VSCode 的查找/替换（Ctrl+F / Ctrl+H）
• 🖱️ 跨平台：与 VSCode 一致，支持 Windows / macOS / Linux

起源

不是为了重复造轮子——起初在 Open VSX 市场里翻了一圈，真没找到一款趁手的 JSON 格式化工具。于是心想：不如自己借助 AI 手撸一个吧？嘿嘿，一个 JSON 工具就这样诞生了。

后来一想：既然面板都搭好了，干脆把日常开发里其他高频小工具也收进来。于是从最初的一个 JSON 格式化，逐步扩展到文本对比、时间戳转换、二维码生成、正则测试、Cron 解析、Curl 指令生成……RSSC 开发工具箱 就这样一步步长成了今天的样子。

如果你也曾在 VSCode 里来回切换浏览器找工具，希望这个箱子能让你少折腾一点 😄

工具列表

安装

方式一：本地安装 VSIX（推荐用于个人使用）

1. 拉取代码并在本地打包

   npm install
   npm run package
   

2. 在项目根目录会生成 rssc-toolbox-0.0.1.vsix
3. 在 VSCode 中按 Ctrl+Shift+P 打开命令面板，执行 Extensions: Install from VSIX...，选择上一步生成的 .vsix 文件
4. 安装完成后重新加载窗口即可使用

方式二：开发模式调试（推荐用于二次开发）

1. 用 VSCode 打开本项目根目录
2. 按下 F5 启动 Extension Development Host 调试窗口
3. 在新打开的 VSCode 窗口中，按 Ctrl+Alt+2 或执行命令 打开 RSSC 开发工具箱 即可使用

快速开始

打开工具箱

• 命令面板：按 Ctrl+Shift+P 并输入 打开 RSSC 开发工具箱 后回车
• 快捷键：Ctrl+Alt+2

工具箱打开后，会以一个 VSCode Webview 面板的形式展示，顶部有 6 个工具的 Tab，可通过点击切换

右键菜单（编辑器内）

在任意编辑器中右键选中内容后，可通过 RSSC ToolBox 子菜单快速操作：

💡 提示：未选中文本时，需要选中内容的菜单项会自动置灰

工具箱主界面

工具详解

1. JSON 工具

用途：对 JSON 字符串进行格式化、压缩、转义、反转义等操作

功能按钮说明

使用步骤

1. 在左侧输入框中粘贴或输入 JSON 文本
2. 点击 格式化 即可在右侧看到美化后的 JSON；若 JSON 不合法，下方会显示具体错误位置
3. 如需将 JSON 嵌入 JS / Java 等代码字符串中，先点 压缩 再点 转义
4. 点击 🧽 清空 可快速重置

2. 文本对比（Diff）

用途：对比两段文本的差异，常用于排查代码改动、接口字段变化、配置差异等场景

核心能力

• 字符级 LCS 差异算法：精确到字符级别标红/标绿显示
• 左右双栏同步：同时展示原始文本与目标文本
• 忽略空白：可勾选「忽略空白」，比较时忽略每行首尾空白字符
• 差异导航：右上角悬浮工具栏显示「当前差异 / 总差异数」，并提供「上一个 ▲ / 下一个 ▼」按钮快速跳转
• 同步滚动：左右两栏滚动位置自动同步

使用步骤

1. 切换到「文本对比」Tab
2. 在左侧「输入1」框中粘贴原始文本，右侧「输入2」框中粘贴目标文本
3. 工具会自动计算并以颜色高亮差异：
   • 红色背景：仅存在于左侧的差异
   • 绿色背景：仅存在于右侧的差异
   • 黄色背景：被修改的行内差异字符
4. 如需忽略格式差异（仅比较内容），勾选右上角「忽略空白」复选框
5. 通过右上角 ▲ / ▼ 按钮在所有差异点之间跳转
6. 点击 🧽 清空 一键清空两侧内容

3. 时间转换工具

用途：在 Unix 时间戳与人类可读日期之间进行双向转换，并支持时区切换

核心能力

• 时间戳 ↔ 日期：输入 10 位（秒）或 13 位（毫秒）时间戳，输出本地化日期、ISO 标准日期
• 日期 → 时间戳：支持多种日期格式输入（YYYY-MM-DD、YYYY-MM-DD HH:mm:ss 等）
• 时区切换：下拉框可切换目标时区，跨时区调试时特别好用
• 实时时钟：顶部展示当前时区的实时时间，方便对照

使用步骤

1. 切换到「时间转换工具」Tab
2. 时间戳转日期
   • 在「时间戳」输入框中填入数字（如 1718985600 或 1718985600000）
   • 下方自动显示格式化后的日期（本地 + ISO 标准）
3. 日期转时间戳
   • 在「日期」输入框中输入日期字符串（如 2024-06-22 12:00:00）
   • 下方自动输出对应的时间戳（毫秒）
4. 在顶部下拉框中选择时区，所有结果会即时刷新

4. 二维码生成

用途：把任意文本、URL 生成二维码图片，并可一键下载到本地

核心能力

• 实时生成：输入文本后自动生成 300×300 的 PNG 二维码
• 一键下载：点击「下载二维码」可保存到本地任意位置
• 默认文件名：自动以 qr-{时间戳}.png 命名

使用步骤

1. 切换到「二维码生成」Tab
2. 在输入框中输入文本（URL、WiFi 名卡、纯文本均可）
3. 右侧即时显示生成的二维码预览
4. 点击 📥 下载二维码 按钮，在弹出的保存对话框中选择保存路径，确认即可
5. 点击 🧽 清空 重新开始

5. 正则表达式

用途：在线测试正则表达式，实时高亮匹配结果，支持捕获组展示与替换预览，内置常用模板

核心能力

• 实时匹配：边输入边高亮匹配项
• 标志位（Flags）：支持 g / i / m / s / u / y 等正则标志（点击 ? 图标查看说明）
• 捕获组：展示每个匹配项的分组捕获
• 替换预览：填写替换表达式后，实时显示替换后的文本
• 常用模板：内置「校验类 / 数字类 / 文本提取 / 日期时间」等分类的常用正则
• 帮助弹窗：解释常用元字符、量词、字符类的含义

使用步骤

1. 切换到「正则表达式」Tab
2. 在「正则表达式」输入框中填写模式（如 [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}）
3. 在右侧「flags」输入框中设置标志位（默认 g）
4. 在主输入区填入待匹配的文本，匹配项会以黄色背景高亮，下方显示匹配数与捕获组
5. 如需替换，在「替换为」输入框中填写替换表达式（如 $1@company.com），下方会实时预览替换结果
6. 点击「常用正则」下拉按钮，可快速选择预置模板（邮箱、URL、IPv4、整数、日期等）
7. 点击右上角 ? 按钮可查看正则元字符说明

6. Cron 表达式

用途：可视化地编写与解析 Quartz 风格的 Cron 表达式，并预测未来若干次运行时间

核心能力

• 字段可视化：秒 / 分 / 时 / 日 / 月 / 周 / 年 七个字段分开配置，避免手写表达式出错
• 双向同步：可视化配置与文本输入框实时双向绑定
• 模式切换：每个字段支持「任意值 / 指定值 / 范围 / 步长 / 列表」等多种模式
• 自然语言描述：实时把当前表达式翻译为「每 5 秒执行一次」这样的中文描述
• 下次运行时间：显示未来 5 次运行时间，方便确认调度是否符合预期
• 常用模板：内置「每分钟 / 每 5 分钟 / 每小时 / 每天 0 点 / 每周一 0 点 / 每月 1 日 0 点」等模板
• 帮助弹窗：解释每个字段的取值范围与特殊字符

使用步骤

1. 切换到「Cron 表达式」Tab
2. 方式 A（可视化）：逐个点击七个字段（秒 / 分 / 时 / 日 / 月 / 周 / 年），在弹出的面板中选择「任意 / 范围 / 步长 / 指定值 / 列表」等模式，确认后表达式会自动拼接
3. 方式 B（直接输入）：在「编辑表达式」输入框中直接输入标准 Cron 表达式（如 0 0 12 * * ?），可视化字段会同步更新
4. 表达式下方实时显示自然语言描述
5. 右侧「下次运行时间」区域显示未来 5 次触发时间
6. 点击「复制表达式」按钮，把当前表达式复制到剪贴板
7. 点击「常用模板」下拉按钮，可一键套用预置模板
8. 点击「帮助」按钮查看字段说明

7. Curl 指令生成器

用途：通过可视化界面配置 HTTP 请求参数（方法、URL、参数、请求头、请求体），实时生成对应的 curl 命令行指令

核心能力

• 请求方法切换：支持 GET / POST / PUT / DELETE / PATCH / HEAD / OPTIONS 七种 HTTP 方法
• 请求地址历史：自动记录已使用的 URL，支持下拉选择历史记录与删除
• 请求参数（Query String）：键值对形式配置，与 URL 的 ? 后参数实时联动同步
• 请求头管理：键值对可自由增删改，常见 Header 键名（Content-Type、Authorization 等）提供输入提示
• 请求体编辑：支持 JSON / 表单等格式输入，内置「格式化」按钮可美化 JSON
• 实时生成：填写请求地址后右侧即时生成完整 curl 指令
• 一键复制：点击「复制」按钮将 curl 指令复制到剪贴板，同时以 URL 为键保存所有配置到本地存储

使用步骤

1. 切换到「Curl 指令生成器」Tab
2. 在「请求方法」下拉框中选择 HTTP 方法（默认 POST）
3. 在「请求地址」输入框中填写目标 URL（如 https://api.example.com/users），支持从「历史记录」下拉选择之前用过的地址
4. 在「请求参数」区域以键值对形式添加 Query 参数（如 page=1、size=10），参数会自动同步到 URL 的查询字符串中
5. 在「请求头」区域添加需要的 Header（如 Content-Type: application/json、Authorization: Bearer xxx），常见键名会有提示
6. 如需发送请求体（POST/PUT/PATCH），在「请求体」文本框中填写内容，支持 JSON 格式并可点击「格式化」按钮美化
7. 右侧「CURL 指令」区域会实时显示生成的 curl 命令
8. 点击 📋 复制 按钮将 curl 指令复制到剪贴板，同时保存当前所有配置
9. 点击 🧽 清空 可重置所有内容

快捷键

全局快捷键

工具箱内快捷键

macOS 用户请将 Ctrl 替换为 ⌘ Cmd

通用操作

每个工具的输入区都具备以下通用能力

• 🧽 清空按钮：一键清空当前工具的输入与结果
• 💾 状态持久化：输入内容自动保存到本地，重启 VSCode 后仍可恢复
• 📋 右键复制：输入框 / 输出框支持系统右键菜单的复制 / 粘贴 / 全选
• 🔄 实时计算：大部分工具在停止输入 300ms 后自动计算结果

项目结构

vscode-rssc-toolbox/
├── src/
│   ├── extension.ts              # 插件入口（注册命令、快捷键）
│   └── webview/
│       ├── toolboxPanel.ts       # Webview 面板主控（Tab 切换、消息分发）
│       └── tools/
│           ├── jsonTool.ts       # JSON 工具
│           ├── diffTool.ts       # 文本对比
│           ├── timestampTool.ts  # 时间转换
│           ├── qrcodeTool.ts     # 二维码生成
│           ├── regexTool.ts      # 正则表达式
│           ├── cronTool.ts       # Cron 表达式
│           └── curlTool.ts       # Curl 指令生成器
├── esbuild.js                    # 构建配置
├── package.json                  # 插件清单
└── README.md                     # 本文档

开发与构建

# 安装依赖
npm install

# 启动开发模式（自动 watch + F5 调试）
npm run watch

# 类型检查
npm run check-types

# 代码检查
npm run lint

# 编译成 VSIX
npm run package

反馈与贡献

如果你在使用过程中遇到问题或有更好的想法，欢迎：

• 提交 Issue 描述问题或建议
• Fork 仓库并提交 Pull Request

许可证

本项目遵循 MPL-2.0 License