由于本職工作中經常做圖像處理，于時大量的圖片瀏覽是不可避免的。

怎么樣不離開最近經常使用的VSCode，同時去看大量的圖像對我來講就是個不錯的需求，尤其是某個目錄下的文件。

先談基本的需求吧，顯示一個目標下的所有圖像，最好圖像可以按列表/塊顯示一下。

如果需求是這樣，那就分解一下實現路徑：

找到extension point, 在目錄上顯示個菜單。

菜單能夠顯示一個窗口。

窗口能夠得到目錄的路徑 ，然后枚舉所有的圖像(png, jpg, jpeg)

好了，那我們就這么定了吧。

在正式開始前，我們先介紹一下VSCode插件的入口manifest文件：package.json。

本來這個文件是node.js用的，現在VSCode把它擴展了。同時會在它里邊定義contributes 與 activationEvents。也就是Extension的擴展點與啟動入口。

下面這些在package.json里很重要，對于VSCode來講

name and publisher: <publisher>.<name>構成了唯一ID用于標識這個Extension main: 入口的JS文件. activationEvents and contributes: 定義你的擴展點與實際啟動的事件. engines.vscode: 定義你的兼容VSCode的最小版本

先從目錄這個開始吧，不知道能不能很順利的找到。不算順利，不過找到了。

要看下面這一段：

https://code.visualstudio.com/api/references/contribution-points#contributes.menus
與https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts

這兩篇文章，能找到要做一個Explorer的菜單，需要在package.json里寫一段contributes, 借用Helloworld的代碼吧

"contributes": {"commands": [{"command": "extension.helloWorld","title": "ShowImageView"}],"menus": {"explorer/context": [{"when": "explorerResourceIsFolder","command": "extension.helloWorld","alt": "extension.helloWorld","group": "navigation"}]}},

現在我們就有了一個右鍵菜單了。

所有的擴展功能，都建議大家看一下完整的官方文檔及VSCode的代碼示例，應該能解決你的所有Extension開發的問題。

接下來，我們看看這個右鍵菜單里能得到什么吧，應該是個目錄的路徑，要拿到才好。

然后就是做一個WebView，用于顯示這個目錄里的所有文件。

下面這一段是官方指導建議：https://code.visualstudio.com/api/extension-capabilities/overview#workbench-extensions

Extension Ideas

• Add custom context menu actions to the File Explorer. // OK
• Create a new, interactive TreeView in the Side Bar.
• Define a new Activity Bar view.
• Show new information in the Status Bar.
• Render custom content using the WebView API.
• Contribute Source Control providers.

看來是個很長的故事，那就先等一下，下一章寫吧。

總結

以上是生活随笔為你收集整理的vscode 预览图片 插件_真的动手写的VSCode的插件(图片浏览)之1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。