Recently, I wrote a vscode image preview plug-in. The main functions of this plug-in are to view the thumbnails of all images in the folder, edit the name of the image file, copy the file name with one click, click to enlarge the image, and search “img-preview” in the vscode store to download
View all images in the folder
Right-click in the images folder and click “Images Preview” to open the list of images preview
Edit and copy file names
In the actual application, there may be some operations on the picture after the preview, so the function of editing the file name and copying the file name is made. Click the edit button below each picture for editing, out-of-focus error, click the Copy button to copy the file name to the clipboard
Toggle background color
In the actual application, it was found that many all-white pictures could not be previewed, so we made this function of manually switching the background color, manually switching the background color according to the actual needs
Click to enlarge image
Hover magnification has been added in the small picture preview, but the magnification ratio may still not meet the preview of some pictures, so the function of clicking the large picture to show is made. After magnification, you can continue to operate the picture size through the button, and the function of background switching is added to facilitate the display
Implementation approach
The implementation is also relatively simple, the general process is through VScode plug-in to read all the local picture files, and then open a WebView, Webview is some front-end function code, edit the file with postMessage to inform VScode plug-in to modify the file. It is equivalent to one server and one client. Because I am busy (lazy), so the interactive experience and code quality have not been polished, we can just use it, if there is any mistake, please advise.
The resources
VSCode official documentation; VSCode Chinese document; VSCode plug-in development overview (7) WebView;