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

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

简单三步即可实现

# 创建项目文件夹并进入文件夹
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 这个文本，接下来我们来看看效果。
 
点击后，会打开一个新的 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(`![](${url})`));
同样，点击绿色的刷新按钮，继续在链接上悬停，等待一会后，成功展示图片！
 
图片有些大，我们可以限制它的高度或宽度，再点击绿色按钮刷新后看看，是不是效果更好了些？
 
 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、允许自定义哪些文件开启图片预览
 
等等，其实还有许多可以做的。如果觉得目前的功能已经满足了，可以直接使用现成的插件 Image Hover Preview
 
 
本篇文章由一文多发平台ArtiPub自动发布
 
                    在前端项目中，往往会使用到图片，可能是直接放在项目中，也可能是使用 cdn 地址，但它们都需要点击才能查看到图片具体是什么内容，显得繁琐，能否和代码提示一样直接鼠标悬停时就展示呢？目前使用量最多的是  Image Preview 这款插件，但我自己在使用时发现并没有在悬停时看到图片，自然想着自己实现一个。简单三步即可实现代码完成后发现异常地简单，指定某个语言增加额外 hover 内容获取鼠标悬停时当前行是否有图片链接构造额外 hover 内容# 创建项目文件夹并进入文件夹mkdir im
VSCode插件开发(二) —— 模版插件改造
文章目录系列文章目录命令菜单出现位置（editor/title）出现时间（when）附加命令（alt）分组（group）快捷键
首先package.json重要注册一个激活事件：
	// package.json
	// 定义插件何时被激活，变为可用状态。当前为执行createVue时激活。
	"activationEvents": [
		"onCommand:fast-admin.cr
				
在准备调试 VSCode 扩展插件时，按下 F5，底部状态栏一直显示“正在生成”，而没有弹出扩展开发宿主的窗口
在 vscode 的 github 仓库 issue 中找到了解决方法，[microsoft/vscode#104038](https://github.com/microsoft/vscode/issues/104038#issuecomme
在 vscode 设置中，将 `"terminal.integrated.automationShell.windows"` 的值设置为现在使用的终端即可
				
执行插件内置命令
本部分在vscode插件开发教程-helloworld插件的基础上继续开发。
vscode内置命令有两种使用方式，一种是在插件里直接调用；还有将命令解析成uri，给用户选择。比如在鼠标hover的时候，自动生成一句注释本行?，而注释本行? 本身可以点击，在点击后该行代码被注释。
直接在程序里执行命令
有一些命令直接执行即可，无需额外参数，也不会返回内容，比如注释语句，下面是使用示例：
首先在src下新建目录command,新建文件commandExecute.ts，输入下列内容：
				
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。
就像大多数 IDE 一样，VSCode 也有一个扩展和主题市场，包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件，我们针对性的收集了一些实用、有趣的插件与大家分享。
1. Open-In-Browser