开发一个 vscode 图片悬停预览插件

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

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

简单三步即可实现

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

1. 指定某个语言增加额外 hover 内容
2. 获取鼠标悬停时当前行是否有图片链接
3. 构造额外 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