由于本职工作中经常做图像处理，于时大量的图片浏览是不可避免的。

怎么样不离开最近经常使用的VSCode，同时去看大量的图像对我来讲就是个不错的需求，尤其是某个目录下的文件。

先谈基本的需求吧，显示一个目标下的所有图像，最好图像可以按列表/块显示一下。

如果需求是这样，那就分解一下实现路径：

1. 找到extension point, 在目录上显示个菜单。
2. 菜单能够显示一个窗口。
3. 窗口能够得到目录的路径 ，然后枚举所有的图像(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.

看来是个很长的故事，那就先等一下，下一章写吧。