Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>WebP SwitcherNew to Visual Studio Code? Get it now.
WebP Switcher

WebP Switcher

xjh

|
1 install
| (1) | Free
PNG → WebP 转换、替换引用后缀、iOS14 兼容性提示(工作区内执行)
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

WebP Switcher(VSCode 插件)

这是一份独立于业务代码的新插件工程,用于:

  • PNG → WebP(cwebp)
  • 一键替换代码中引用的 .png 后缀为 .webp
  • 在转换/替换之后输出总结报告(数量、总体体积变化、逐图百分比)
  • 输出一份 iOS14 兼容性提示(非阻断)

说明:此插件不会修改你现有的 scripts/tinify/batch-assets.mjs;这里只是复刻能力并提供 VSCode 交互。

你预期的交互(已按此设计)

  • 资源管理器右键:对文件/文件夹执行“添加到待转换区”
  • 左侧 WebP Switcher 面板:
    • 待转换区:展示已添加的 PNG,可移除/清空
    • 顶部按钮:
      • 待转换区:转换并替换引用、清空待转换区
      • 报告:清空报告
    • 报告:展示本次转换/替换的汇总与逐图列表,并包含兼容性提示摘要

开发/调试

  1. 在 VSCode 中打开该目录:tools/vscode-tinify-assets
  2. 安装依赖:
npm i
  1. 编译:
npm run compile
  1. 按 F5 启动 Extension Development Host 进行调试

已在本工程内置 launch.json:调试时会自动打开本仓库根目录,方便直接右键添加 PNG 测试。

WebP 压缩质量(全局)

在 待转换区 顶部按钮里点击“设置压缩质量”(齿轮),用下拉框选择:

  • 无损
  • 90% / 80% / 70% / 60% / 50% / 40%
  • 自定义(1~100)

该质量为全局唯一值,会保存在工作区状态中。

cwebp 二进制

扩展运行时会尝试执行内置的 cwebp:

  • mac: resources/bin/cwebp
  • win: resources/bin/cwebp.exe

如果缺失,会提示“未找到内置 cwebp”。(后续会配套分平台打包/发布脚本来确保 VSIX 内包含对应二进制)

分平台打包/发布(mac + win)

先拉取二进制(不提交到 git):

npm run cwebp:fetch

脚本会自动下载并放置到:

  • vendor/cwebp/darwin-arm64/cwebp
  • vendor/cwebp/win32-x64/cwebp.exe

然后在插件目录执行:

  • 打包(生成 VSIX 到 dist/):
npm run release:package
  • 发布(一次性发布 mac + win 两个平台):
npm run release:publish
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft