在前端项目中,往往会使用到图片,可能是直接放在项目中,也可能是使用 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