开发者工具箱 (DevTools Plugin)

VS Code 扩展 - 提供图片格式转换和代码压缩混淆功能

功能特性

🖼️ 图片格式转换

将常见图片格式转换为现代 Web 格式：

• 支持输入格式：PNG、JPG、JPEG、BMP、TIFF、GIF
• 支持输出格式：WebP、AVIF
• 压缩质量：0-100% 可调节
• 批量处理：支持同时选择多张图片
• 🔄 自动转换：开启后自动检测 Git 变更的图片并压缩暂存

📦 代码压缩混淆

自动监听并压缩 CSS 和 JavaScript 文件：

• CSS 压缩：one-css/*.css → css/one-all.css
• JS 压缩混淆：one-js/*.js → js/one-all.js
• 自动监听：文件保存时自动触发压缩
• 手动触发：支持一键立即压缩
• 📦 打包功能：点击"打包全部"按钮可将所有监听目录打包到统一的"发布文件夹"中，点击单个配置的"打包"按钮可将该配置单独打包
• 📁 压缩目录：右键点击目录可将其内容压缩为ZIP文件，保存在同级目录中

🔁 序列帧重命名

自动重命名序列帧图片，并可选择转换为WebP格式：

• 智能排序：根据文件名中的数字自动排序
• 格式转换：可选转换为WebP格式并删除源文件

📦 增量包生成

比较两个版本的代码包，生成只包含变更文件的增量包：

• 智能比对：自动识别变更的文件
• 差异高亮：HTML文件中的变更部分高亮显示

🚀 FTP 上传功能

支持将项目文件上传到 FTP 服务器：

• 增量上传：仅上传 Git 变更的文件
• 全量上传：上传整个项目目录
• 项目管理：支持多个项目与 FTP 路径绑定
• 连接测试：自动验证 FTP 服务器配置

🎨 代码差异高亮

在代码编辑器中可视化显示文件变更：

• 智能标记：自动识别 {remove:begin}...{remove:end} 和 {add:begin}...{add:end} 标记
• 颜色区分：删除内容显示为红色背景，新增内容显示为绿色背景
• 实时更新：编辑器内容变化时自动更新高亮显示

📂 图片智能管理

增强的图片处理和管理功能：

• 压缩状态记录：避免重复压缩未更改的图片
• 图片重命名：支持批量替换文件名中的文本
• 序列帧处理：智能排序序列帧并可选转换为WebP格式

⚡ 右键菜单集成

通过右键菜单快速访问常用功能：

• 文件夹操作：添加监听、压缩图片、上传FTP等
• 文件操作：单个图片压缩处理
• 源代码管理：快速压缩 Git 变更的图片文件

安装方法

方法一：从 VSIX 文件安装

1. 下载 .vsix 文件
2. 打开 VS Code
3. 按 Ctrl+Shift+P 打开命令面板
4. 输入 Extensions: Install from VSIX...
5. 选择下载的 .vsix 文件

方法二：开发模式安装

# 克隆项目
git clone <repository-url>
cd one.vscode.devtools

# 安装依赖
npm install

# 按 F5 启动调试

使用方法

打开工具面板

1. 点击底部面板的 "开发者工具" 标签
2. 或点击状态栏右侧的 "DevTools" 按钮
3. 或按 Ctrl+Shift+P 输入 "打开开发者工具"

💡 提示：面板可以拖动到右侧位置

图片格式转换

1. 手动转换：

   • 在工具面板中选择输出格式（WebP 或 AVIF）
   • 调整压缩质量滑块
   • 点击 "选择图片并转换"
   • 选择一张或多张图片
   • 转换后的文件保存在原图同目录

2. 自动转换：

   • 勾选 "自动转换" 选项
   • 当 Git 仓库中有新的图片变更时，自动压缩并暂存
   • 已暂存的图片不会重复处理
   • 替换图片后会重新触发转换并更新暂存

代码压缩混淆

1. 点击 "选择项目目录"
2. 选择包含 one-css 或 one-js 文件夹的项目目录
3. 修改并保存 one-css/*.css 或 one-js/*.js 文件
4. 自动生成压缩后的文件

打包功能

1. 打包全部：

   • 确保已添加多个监听目录配置
   • 点击"打包全部"按钮
   • 扩展会在所有项目路径的公共根目录下创建"发布文件夹"
   • 每个项目会被打包到该发布文件夹下的独立子目录中

2. 单个打包：

   • 在监听配置列表中，点击特定配置的"打包"按钮
   • 该配置对应的项目会被打包到其父目录下的"发布文件夹"中

3. 压缩目录：

   • 在资源管理器中右键点击任意目录
   • 选择"压缩目录"
   • 该目录的内容会被压缩为ZIP文件，保存在同级目录中
   • ZIP文件名格式为"目录名.zip"

FTP 上传功能

1. 配置 FTP 服务器：

   • 在 FTP 面板中点击"设置"
   • 输入服务器地址、端口、用户名和密码
   • 点击"测试连接"验证配置

2. 添加项目绑定：

   • 点击"添加项目"
   • 选择本地项目目录
   • 输入对应的远程路径

3. 执行上传：

   • 增量上传：仅上传 Git 变更的文件
   • 全量上传：上传整个项目目录

代码差异高亮

1. 在代码文件中使用特殊标记：

   {remove:begin}
   这段内容会被红色高亮显示
   {remove:end}
   
   {add:begin}
   这段内容会被绿色高亮显示
   {add:end}
   

2. 扩展会自动识别并高亮显示标记区间的内容

3. 可在工具面板中开关差异高亮功能

图片智能管理

1. 图片压缩：

   • 右键点击图片文件选择"压缩图片"
   • 或在工具面板中选择格式和质量后批量处理

2. 序列帧重命名：

   • 右键点击包含序列帧的文件夹
   • 选择"序列帧重命名"
   • 可选择是否同时转换为 WebP 格式

3. 图片批量重命名：

   • 在工具面板的"图片重命名"区域
   • 设置要替换的文本和目标文本
   • 选择目标文件夹执行批量重命名

目录结构

your-project/
├── one-css/           # 源 CSS 文件目录
│   ├── reset.css
│   ├── layout.css
│   └── theme.css
├── one-js/            # 源 JS 文件目录
│   ├── utils.js
│   ├── main.js
│   └── app.js
├── css/               # 输出目录（自动创建）
│   └── one-all.css    # 合并压缩后的 CSS
└── js/                # 输出目录（自动创建）
    └── one-all.js     # 合并压缩混淆后的 JS

项目结构

one.vscode.devtools/
├── src/
│   ├── extension.js                    # 扩展入口
│   ├── providers/
│   │   └── DevToolsViewProvider.js     # 视图提供者
│   ├── services/
│   │   ├── MinifierService.js          # 代码压缩服务
│   │   ├── ImageService.js             # 图片处理服务
│   │   ├── FtpService.js               # FTP 上传服务
│   │   └── IncrementalService.js       # 增量包生成服务
│   ├── images/
│   │   └── logo.png                    # 扩展图标
│   └── webview/
│       └── index.html                  # UI 界面
├── package.json                         # 扩展配置
├── package-lock.json                    # 依赖锁定文件
└── README.md                            # 说明文档

打包发布

# 安装 vsce
npm install -g @vscode/vsce

# 打包为 .vsix 文件
npm run package
# 或
vsce package

# 发布到 VS Code 市场（需要 Publisher 账号）
vsce publish

标签 (Tags)

vscode-extension image-converter webp avif css-minifier js-minifier front-end-tools developer-tools automation

依赖说明

常见问题

Sharp 模块加载失败

Sharp 是原生模块，可能需要重新编译：

npm rebuild sharp

如果仍然失败，尝试：

npm uninstall sharp
npm install sharp --platform=win32 --arch=x64

文件监听不生效

1. 确保已选择正确的项目目录
2. 确保目录下存在 one-css 或 one-js 文件夹
3. 查看 "输出" 面板中的 "DevTools 压缩日志"

FTP 连接失败

1. 检查服务器地址、端口、用户名和密码是否正确
2. 确保防火墙允许 FTP 连接
3. 某些服务器可能需要开启被动模式
4. 尝试使用其他 FTP 客户端验证连接配置

图片压缩失败

1. 确保已安装 Sharp 模块：npm rebuild sharp
2. 检查图片文件是否损坏
3. 确保输出目录有写入权限

自动转换不生效

1. 确保已勾选 "自动转换" 选项
2. 确保项目是 Git 仓库
3. 确保图片文件在 workingTreeChanges 中（未暂存状态）
4. 检查 VS Code 输出面板的 "DevTools" 日志

Git 变更检测不准确

1. 确保项目是 Git 仓库
2. 确保已安装 VS Code 的官方 Git 扩展
3. 检查 Git 状态：git status

版本历史

v1.2.1 (2025-12-17)

• 📦 打包功能增强：添加"打包全部"按钮，可将所有项目打包到统一的"发布文件夹"
• 📁 压缩目录功能：新增右键菜单"压缩目录"，可将目录内容压缩为ZIP文件
• 🎯 统一发布目录：多项目使用共享的发布根目录，便于管理
• ⚡ 功能优化：打包与压缩功能的用户体验优化

v1.2.0 (2024-12-20)

• 🔄 图片自动转换：新增 Git 变更图片自动压缩暂存功能
• 🎯 智能暂存管理：已暂存图片不重复处理，替换图片自动更新
• ⚡ Git 集成优化：仅处理未暂存变更（workingTreeChanges）
• 🛠️ 稳定性提升：修复循环触发和暂存失败问题

v1.1.6 (2024-12-20)

• 🚀 新增 FTP 上传功能：支持增量上传和全量上传到 FTP 服务器
• 🎨 代码差异高亮：可视化显示代码变更，支持自定义标记
• 📂 图片智能管理：压缩状态记录，避免重复处理
• ⚡ 右键菜单集成：快速访问常用功能
• 🔧 多项目配置：支持同时管理多个项目的监听配置
• 📊 批量操作优化：序列帧重命名、图片批量处理等功能增强
• 🛠️ 界面优化：可折叠面板，配置状态持久化

v1.0.0 (2024-12-05)

• 🎉 首次发布
• ✨ 图片格式转换功能
• ✨ CSS/JS 代码压缩混淆功能
• ✨ 文件自动监听功能

许可证

MIT License

作者

maojunhui