SVG Mono Compress - VSCode 插件
一个强大的 VSCode 插件,用于压缩 SVG 文件并支持单色转换。基于 SVGO 官方库,提供高质量的 SVG 优化功能。
功能特性
- SVG 压缩:使用 SVGO 官方默认配置压缩 SVG 文件
- 单色转换:将彩色 SVG 转换为单色版本,自动继承父元素颜色
- 批量处理:支持同时处理多个 SVG 文件
- 智能识别:自动识别 SVG 文件,过滤非 SVG 文件
- 配置支持:支持项目级别的 SVGO 自定义配置文件
- 右键菜单:集成到 VSCode 右键菜单,使用便捷
安装使用
从 VSCode 市场安装
- 打开 VSCode
- 按
Ctrl+Shift+X
打开扩展面板
- 搜索 "SVG Mono Compress"
- 点击安装
本地安装(开发版本)
- 下载
.vsix
文件
- 在 VSCode 中按
Ctrl+Shift+P
- 输入 "Extensions: Install from VSIX"
- 选择下载的
.vsix
文件
使用方法
基本使用
- 在 VSCode 中右键点击 SVG 文件
- 选择以下选项之一:
- 压缩 SVG:使用默认配置压缩文件
- 压缩为单色 SVG:压缩并转换为单色版本
批量处理
- 选择多个 SVG 文件(按住 Ctrl 点击)
- 右键选择压缩选项
- 插件会自动处理所有选中的 SVG 文件
自定义配置
在项目根目录创建 svgo.config.js
文件:
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
};
开发环境
环境要求
- Node.js 18+
- npm 或 yarn
- VSCode 1.74.0+
开发设置
# 克隆项目
git clone <repository-url>
cd svg-mono-compress
# 安装依赖
npm install
# 编译项目
npm run compile
# 监听模式(开发时使用)
npm run watch
调试插件
- 在 VSCode 中打开项目
- 按
F5
启动调试
- 在新打开的 VSCode 窗口中测试插件功能
测试
运行测试
# 运行所有测试
npm test
# 运行单元测试
npm run test:unit
# 运行集成测试
npm run test:integration
测试文件
项目包含多种测试样本:
test/samples/colorful-icon.svg
- 彩色图标
test/samples/simple-mono.svg
- 简单单色图形
test/samples/complex-gradient.svg
- 复杂渐变图形
test/samples/large-file.svg
- 大文件测试
test/samples/broken.svg
- 损坏文件测试
发布插件
准备工作
安装 vsce 工具
npm install -g vsce
准备发布资源
- 确保
package.json
中的版本号、描述、作者等信息正确
- 添加插件图标(128x128 像素,PNG 格式)
- 完善 README.md 和 CHANGELOG.md
- 确保所有测试通过
获取发布令牌
打包插件
# 编译项目
npm run compile
# 打包为 .vsix 文件
vsce package
# 指定版本打包
vsce package --pre-release
发布到市场
# 首次发布需要登录
vsce login <publisher-name>
# 发布插件
vsce publish
# 发布预发布版本
vsce publish --pre-release
# 发布指定版本
vsce publish 1.0.1
本地测试安装
# 安装本地打包的插件
code --install-extension svg-mono-compress-1.0.0.vsix
# 卸载插件
code --uninstall-extension <publisher>.<extension-name>
发布检查清单
- [ ] 版本号已更新
- [ ] 所有测试通过
- [ ] README.md 内容完整
- [ ] CHANGELOG.md 已更新
- [ ] 插件图标已添加
- [ ] package.json 信息完整
- [ ] 本地测试功能正常
- [ ] 打包文件大小合理
技术栈
- TypeScript - 主要开发语言
- SVGO - SVG 优化库
- VSCode Extension API - 插件开发框架
- Mocha + Chai - 测试框架
贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/amazing-feature
)
- 提交更改 (
git commit -m 'Add some amazing feature'
)
- 推送到分支 (
git push origin feature/amazing-feature
)
- 创建 Pull Request
许可证
MIT License - 详见 LICENSE 文件
更新日志
详见 CHANGELOG.md 文件