最近写了一个vscode图片预览插件，这个插件主要功能可以查看文件夹下所有图片的缩略图、编辑图片文件名称、一键复制文件名、点击放大图片，在vscode商店中搜索「img-preview」即可下载

在图片文件夹处右键，点击「images preview」,打开图片预览列表

实际应用中预览图片后可能会有一些对图片的操作，所以又做了编辑文件名、复制文件名的功能。点击每个图片下面的编辑按钮进行编辑，失焦后报错，点击复制按钮复制文件名到剪贴板

实际应用中发现有很多全白的图片不能预览出来，所以做了这个手动切换背景颜色的功能，根据实际需要手动切换背景颜色

在小图预览时已经加了hover放大，但是放大比例可能还是不能满足某些图片的预览，所以做了点击大图展示的功能，放大之后可以通过按钮继续操作图片尺寸，也加上了背景切换的功能方便展示

实现起来也比较简单，大概的流程就是通过vscode插件先读取本地所有图片文件，再打开一个webview，webview里就是一些前端的功能代码，编辑文件时再同过postmessage通知vscode插件对文件进行修改。相当于一个服务端、一个客户端的模式。 因为工作比较忙（人比较懒），所以交互体验、代码质量没有怎么打磨哈，大家凑合用吧，有写错的地方请指教。

VSCode官方文档; VSCode中文文档; VSCode插件开发全攻略（七）WebView;