一个 vscode 图片悬停预览插件

在前端项目中，往往会使用到图片，可能是直接放在项目中，也可能是使用 cdn 地址，但它们都需要点击才能查看到图片具体是什么内容，显得繁琐，能否和代码提示一样直接鼠标悬停时就展示呢？

目前使用量最多的是 Image Preview 这款插件，但我自己在使用时发现并没有在悬停时看到图片，自然想着自己实现一个。

简单三步即可实现

代码完成后发现异常地简单，

  1. 指定某个语言增加额外 hover 内容
  2. 获取鼠标悬停时当前行是否有图片链接
  3. 构造额外 hover 内容
1
2
3
4
5
6
# 创建项目文件夹并进入文件夹
mkdir image-preview && cd image-preview
# 初始化 package.json 文件
npm init -y
# 新增入口文件
touch index.js

编辑 package.json 增加 engines 与 activationEvents 字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "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 内容

1
2
3
4
5
6
7
8
9
10
11
12
// 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 模式

进入debug模式

点击后，会打开一个新的 vscode 窗口，我们的插件会在该窗口生效，该窗口等同于普通的 vscode 窗口，同样可以打开项目。

新窗口

我们可以新建一个文件，并指定语言为 JavaScript，在其中写任意内容，hover 时即可看到 hello。或者打开任意自己的项目，只需要是 .js 文件，悬停时就可以看到 hello。

提示 hello

回到我们的 image-preview 项目窗口，来完成我们的第二步，「获取鼠标悬停时当前行是否有图片链接」，怎么获取呢？当然是正则了

获取鼠标悬停时当前行是否有图片链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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 窗口，在 debug 窗口中，鼠标在链接上悬停，仍然出现 hello ，并且，我们的项目窗口下方的 DEBUG CONSOLE 也会打印出内容

测试内容为 const url = 'https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/695fd240c6c011eb99f4db4397160818.png'; ，如果没有 DEBUG CONSOLE 面板，可以通过 View -> Terminal 打开。
Terminal

可以看到识别出了我们的图片路径

识别出的路径

那么可以继续我们的最后一步，「构造额外 hover 内容」

构造额外 hover 内容

new vscode.Hover 的参数表示显示的内容，除了字符串外，还支持 markdown 语法，但不能直接写，还需要使用 new vscode.MarkdownString 构造，所以我们的最终代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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(`![](${url})`));
      },
    })
  );
};

同样，点击绿色的刷新按钮，继续在链接上悬停，等待一会后，成功展示图片！

成功展示图片

图片有些大，我们可以限制它的高度或宽度，再点击绿色按钮刷新后看看，是不是效果更好了些？

1
return new vscode.Hover(new vscode.MarkdownString(`![](${url}|width=240)`));

打包发布

在项目内安装 vsce 依赖后，执行 yarn vsce package 即可将项目打包成 vslx 文件，别人可直接安装该文件。

发布流程虽然简单，但注册账号比较麻烦，可以参考其他博客，配置好账号后也是一行命令 yarn vsce publish 即可发布到插件市场。

仍存在的问题

代码量虽少，但也算一个可以使用的产品了，尽管这个产品还非常简陋，接下来可以给它加上更多的功能、修复一些已知的问题

  1. 不支持 http 协议图片
  2. 非图片地址被当做图片渲染，如 API 地址
  3. 更多语言的支持，上面在注册 HoverProvider 时没有写 * 是因为所有内容都会处理，包括 DEBUG CONSOLE 面板中的内容，vscode.languages.registerHoverProvider(“*"
  4. 允许配置图片宽或高
  5. 允许自定义哪些文件开启图片预览

等等，其实还有许多可以做的。

Thanks~

发布于