在前端项目中，往往会使用到图片，可能是直接放在项目中，也可能是使用 cdn 地址，但它们都需要点击才能查看到图片具体是什么内容，显得繁琐，能否和代码提示一样直接鼠标悬停时就展示呢？
目前使用量最多的是 Image Preview 这款插件，但我自己在使用时发现并没有在悬停时看到图片，自然想着自己实现一个。
简单三步即可实现
代码完成后发现异常地简单，
- 指定某个语言增加额外
hover内容 - 获取鼠标悬停时当前行是否有图片链接
- 构造额外
hover内容
# 创建项目文件夹并进入文件夹
mkdir image-preview && cd image-preview
# 初始化 package.json 文件
npm init -y
# 新增入口文件
touch index.js
编辑 package.json 增加 engines 与 activationEvents 字段
{
"name": "image-preview",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"engines": {
"vscode": "^1.54.0"
},
"activationEvents": ["*"],
"license": "ISC"
}
这样就初始化好了我们的项目，接下来进行我们的第一步，「指定某个语言增加额外 hover 内容」
指定某个语言增加额外 hover 内容
// index.js
const vscode = require("vscode");
module.exports.activate = function (context) {
context.subscriptions.push(
vscode.languages.registerHoverProvider("javascript", {
provideHover: (document, position) => {
return new vscode.Hover("hello");
},
})
);
};
这样写表示在所有 js 文件中，鼠标悬停时即会展示 hello 这个文本，接下来我们来看看效果，按下面截图说明步骤操作即可进入 debug 模式
点击后，会打开一个新的 vscode 窗口，我们的插件会在该窗口生效，该窗口等同于普通的 vscode 窗口，同样可以打开项目。
我们可以新建一个文件，并指定语言为 JavaScript，在其中写任意内容，hover 时即可看到 hello。或者打开任意自己的项目，只需要是 .js 文件，悬停时就可以看到 hello。
回到我们的 image-preview 项目窗口，来完成我们的第二步，「获取鼠标悬停时当前行是否有图片链接」，怎么获取呢？当然是正则了
获取鼠标悬停时当前行是否有图片链接
// index.js
const vscode = require("vscode");
module.exports.activate = function (context) {
context.subscriptions.push(
vscode.languages.registerHoverProvider("javascript", {
provideHover: (document, position) => {
const { _line } = position;
const lineContent = document.lineAt(_line).text;
const regexp =
/((https?):)?\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
const res = lineContent.match(regexp);
console.log("1", res);
if (res === null) {
return;
}
const url = res[0];
console.log("2", url);
return new vscode.Hover("hello");
},
})
);
};
接下来继续验证我们的代码，当然仍处于 debug 模式下，所以窗口内能看到这样一个面板，并且窗口下方的状态栏是橘色的。
如果没有，可以按照上面进入
debug模式的流程再来一次。
接下来点击绿色按钮重新开始 debug，它会刷新之前打开的 debug 窗口，在 debug 窗口中，鼠标在链接上悬停，仍然出现 hello ，并且，我们的项目窗口下方的 DEBUG CONSOLE 也会打印出内容
测试内容为
const url = 'https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/695fd240c6c011eb99f4db4397160818.png';，如果没有DEBUG CONSOLE面板，可以通过View -> Terminal打开
可以看到识别出了我们的图片路径
那么可以继续我们的最后一步，「构造额外 hover 内容」
构造额外 hover 内容
new vscode.Hover 的参数表示显示的内容，除了字符串外，还支持 markdown 语法，但不能直接写，还需要使用 new vscode.MarkdownString 构造，所以我们的最终代码如下
// index.js
const vscode = require("vscode");
module.exports.activate = function (context) {
context.subscriptions.push(
vscode.languages.registerHoverProvider("javascript", {
provideHover: (document, position) => {
const { _line } = position;
const lineContent = document.lineAt(_line).text;
const regexp =
/((https?):)?\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
const res = lineContent.match(regexp);
console.log("1", res);
if (res === null) {
return;
}
const url = res[0];
console.log("2", url);
return new vscode.Hover(new vscode.MarkdownString(``));
},
})
);
};
同样，点击绿色的刷新按钮，继续在链接上悬停，等待一会后，成功展示图片！
图片有些大，我们可以限制它的高度或宽度，再点击绿色按钮刷新后看看，是不是效果更好了些？
return new vscode.Hover(new vscode.MarkdownString(``));
打包发布
在项目内安装 vsce 依赖后，执行 yarn vsce package 即可将项目打包成 vslx 文件，别人可直接安装该文件。
发布流程虽然简单，但注册账号比较麻烦，可以参考其他博客，配置好账号后也是一行命令 yarn vsce publish 即可发布到插件市场。
仍存在的问题
代码量虽少，但也算一个可以使用的产品了，尽管这个产品还非常简陋，接下来可以给它加上更多的功能、修复一些已知的问题
1、不支持 http 协议图片
2、非图片地址被当做图片渲染，如 API 地址
3、更多语言的支持，上面在注册 HoverProvider 时没有写 * 是因为所有内容都会处理，包括 DEBUG CONSOLE 面板中的内容
vscode.languages.registerHoverProvider(“*"
4、允许配置图片宽或高
5、允许自定义哪些文件开启图片预览
等等，其实还有许多可以做的。如果觉得目前的功能已经满足了，可以直接使用现成的插件 Image Hover Preview
Thanks~
网友评论