VS Code 扩展 - 提供图片格式转换和代码压缩混淆功能
功能特性
🖼️ 图片格式转换
将常见图片格式转换为现代 Web 格式：
- 支持输入格式：PNG、JPG、JPEG、BMP、TIFF、GIF
- 支持输出格式：WebP、AVIF
- 压缩质量：0-100% 可调节
- 批量处理：支持同时选择多张图片
📦 代码压缩混淆
自动监听并压缩 CSS 和 JavaScript 文件：
- CSS 压缩：
one-css/*.css → css/one-all.css
- JS 压缩混淆：
one-js/*.js → js/one-all.js
- 自动监听：文件保存时自动触发压缩
- 手动触发：支持一键立即压缩
安装方法
方法一：从 VSIX 文件安装
- 下载
.vsix 文件
- 打开 VS Code
- 按
Ctrl+Shift+P 打开命令面板
- 输入
Extensions: Install from VSIX...
- 选择下载的
.vsix 文件
方法二：开发模式安装
# 克隆项目
git clone <repository-url>
cd one.vscode.devtools
# 安装依赖
npm install
# 按 F5 启动调试
使用方法
打开工具面板
- 点击底部面板的 "开发者工具" 标签
- 或点击状态栏右侧的 "DevTools" 按钮
- 或按
Ctrl+Shift+P 输入 "打开开发者工具"
💡 提示：面板可以拖动到右侧位置
图片格式转换
- 在工具面板中选择输出格式（WebP 或 AVIF）
- 调整压缩质量滑块
- 点击 "选择图片并转换"
- 选择一张或多张图片
- 转换后的文件保存在原图同目录
代码压缩混淆
- 点击 "选择项目目录"
- 选择包含
one-css 或 one-js 文件夹的项目目录
- 修改并保存
one-css/*.css 或 one-js/*.js 文件
- 自动生成压缩后的文件
目录结构
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 # 压缩服务
│ └── webview/
│ └── index.html # UI 界面
├── package.json # 扩展配置
└── README.md # 说明文档
打包发布
# 安装 vsce
npm install -g @vscode/vsce
# 打包为 .vsix 文件
npm run package
# 或
vsce package
# 发布到 VS Code 市场（需要 Publisher 账号）
vsce publish
依赖说明
| 依赖包 |
版本 |
用途 |
| sharp |
^0.34.5 |
图片格式转换 |
| clean-css |
^5.3.3 |
CSS 压缩 |
| terser |
^5.44.1 |
JS 压缩混淆 |
常见问题
Sharp 模块加载失败
Sharp 是原生模块，可能需要重新编译：
npm rebuild sharp
如果仍然失败，尝试：
npm uninstall sharp
npm install sharp --platform=win32 --arch=x64
文件监听不生效
- 确保已选择正确的项目目录
- 确保目录下存在
one-css 或 one-js 文件夹
- 查看 "输出" 面板中的 "DevTools 压缩日志"
版本历史
v1.0.0 (2024-12-05)
- 🎉 首次发布
- ✨ 图片格式转换功能
- ✨ CSS/JS 代码压缩混淆功能
- ✨ 文件自动监听功能
许可证
MIT License
作者
One Design
| |
