vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1

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

怎么样不离开最近经常使用的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相关推荐

python写chrome插件_用VueJS写一个Chrome浏览器插件
浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研 ...
vscode预览html插件,VSCode插件推荐-VSCode内嵌浏览器插件-Browser Preview
很多小伙伴在开发html页面的时候觉得很不方便.因为显示屏的大小是有限的,只能展示代码或者浏览器窗口的其中一种,哪怕用上了LiveServer,也需要一直切换页面,接下来小编带来的这款插件,可以在VS ...
[html] 切页面时，每次都动手刷新看效果很麻烦，如果要让你写一个实时刷新预览的工具你该怎么写？
[html] 切页面时,每次都动手刷新看效果很麻烦,如果要让你写一个实时刷新预览的工具你该怎么写? node包http, scoket.io建立服务静态页面增加webSocket,服务器推送后执行刷新 ...
excel打印预览在哪里_易打标条码标签设计打印软件下载_易打标条码标签设计打印软件绿色版下载...
<易打标条码标签设计打印软件>是一款条形码.二维码打印软件,功能强大,使用方便,能够支持LPT/COM/USB等多种形式的打印设备连接. 软件特性功能布局清晰简洁,导航式设计,上手即会; ...
vscode预览.mad文件
VSCode安装md插件选择Extensions, 输入Markdown Theme Kit,下面会出现相应插件,点击install(截图中因为我已经安装,所以是设置) 或者安装插件Markdown ...
linux 预览md文件_利用Tornado搭建文档预览系统
在平时的工作或学习中,我们经常会接触不同格式的文档类型,比如txt,log,Offices文档,编程代码脚本,图片,视频等.本文将会介绍笔者的一个朴素想法,即把不同格式的文档都放在同一个平台中进行预览 ...
VScode预览md文件
Markdown文件预览(VScode) 1.打开vscode在插件寻找Markdown Preview Enhanced,并点击install. md View.PNG 2.具体按键功能: Shor ...
前端预览word文件_[装机必备] QuickLook —— 敲击空格即可快速预览文件
今天给大家推荐的软件是:QuickLook 你只需要选中文件,然后敲击空格,就可以快速预览文件内容 QuickLook 有三个版本:安装版.便携版.UWP 版作者对这三个版本的描述: *需要注意的 ...
flutter图片预览_flutter好用的轮子推荐四-可定制的图片预览查看器photo
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...

vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1

vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1相关推荐

最新文章

热门文章

vscode 预览图片 插件_真的动手写的VSCode的插件(图片浏览)之1

vscode 预览图片 插件_真的动手写的VSCode的插件(图片浏览)之1相关推荐

最新文章

热门文章

vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1

vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1相关推荐