HoverImage Preview

VSCode 图片预览插件，支持多种图片地址格式的鼠标悬浮预览功能。

功能特性

✅ 标准 URL 预览 - 直接预览完整的图片链接
✅ 模板字符串拼接 - 支持 ${DOMAIN}/path/image.png 格式
✅ 简单变量拼接 - 支持 DOMAIN + "/path/image.png" 格式
✅ 组件预览 - 为 React 组件配置预览图片
✅ 高度可配置 - 自定义变量映射、预览宽度、支持格式

安装方法

方法一：手动安装

下载或克隆本仓库
将插件文件夹复制到 VSCode 扩展目录：
- macOS: ~/.vscode/extensions/
- Windows: %USERPROFILE%\.vscode\extensions\
- Linux: ~/.vscode/extensions/
重启 VSCode

方法二：开发模式

在 VSCode 中打开本项目
按 F5 启动扩展开发主机
在新窗口中测试插件

配置说明

在 VSCode 设置 (Cmd+, / Ctrl+,) 中搜索 hoverImagePreview 进行配置。

基本配置

配置项	类型	默认值	说明
`hoverImagePreview.width`	string	"230"	预览图片的宽度（像素）
`hoverImagePreview.extensions`	array	["jpeg", "jpg", "png", "gif", "webp"]	支持的图片格式

变量映射配置

在 hoverImagePreview.variables 中配置变量名到实际域名的映射：

{
  "hoverImagePreview.variables": {
    "DOMAIN_IMAGEPUB": "https://image-pub.guazistatic.com",
    "DOMAIN_IMAGE": "https://image.guazistatic.com",
    "DOMAIN_IMAGE1": "https://image1.guazistatic.com",
    "MY_CDN": "https://cdn.my-domain.com"
  }
}

组件预览配置

组件预览支持两种配置方式：内联配置和外部配置文件。

方式一：内联配置

在 hoverImagePreview.components 中配置组件名到预览图片的映射：

{
  "hoverImagePreview.components": {
    "SellSameModelView": "https://image-public.guazistatic.com/qnbdp1066x36865f85b5ec49be890e1fae5a5785871779205193.png",
    "MyCustomComponent": "https://example.com/preview.png"
  }
}

方式二：外部配置文件（推荐）

在项目中创建配置文件（如 .vscode/cp.json），格式如下：

{
  "SellSameModelView": "https://image-public.guazistatic.com/qnbdp1066x36865f85b5ec49be890e1fae5a5785871779205193.png",
  "MyCustomComponent": "https://example.com/preview.png",
  "AnotherComponent": "https://example.com/another.png"
}

或者也可以使用包含 components 字段的格式：

{
  "components": {
    "SellSameModelView": "https://image-public.guazistatic.com/qnbdp1066x36865f85b5ec49be890e1fae5a5785871779205193.png",
    "MyCustomComponent": "https://example.com/preview.png"
  }
}

在 VSCode 设置中指定配置文件路径：

{
  "hoverImagePreview.configPath": ".vscode/cp.json"
}

注意：外部配置会覆盖内联配置中相同的组件名。配置文件会自动缓存，修改后会自动重新加载。

使用示例

1. 标准 URL

鼠标悬浮在完整的图片链接上即可预览：

const imageUrl = "https://image-pub.guazistatic.com/path/to/image.png";

2. 模板字符串

支持 ES6 模板字符串格式：

import { DOMAIN_IMAGEPUB } from "@guazi-fe/cross-utils";

export const images = {
  headerBg: `${DOMAIN_IMAGEPUB}/path/to/image.png`,
  footerLogo: `${DOMAIN_IMAGE}/logo.png`,
};

3. 简单变量拼接

支持简单的字符串拼接：

const headerBg = DOMAIN_IMAGEPUB + "/path/to/image.png";

4. 组件预览

为 React 组件配置预览图片后，悬浮在组件标签上即可预览：

import { SellSameModelView } from "./components";

function App() {
  return (
    <div>
      <SellSameModelView />
      {/* 鼠标悬浮在 SellSameModelView 上即可预览 */}
    </div>
  );
}

工作原理

插件通过注册 Hover Provider 监听鼠标悬浮事件，按以下优先级匹配图片地址：

组件标签（需在配置中设置）
完整 URL
模板字符串 ${VAR}/path
简单拼接 VAR + "/path"

匹配成功后，根据配置的变量映射拼接完整 URL，最后在悬浮框中显示图片预览。

开发说明

项目结构

hoverimage-preview/
├── package.json    # 插件配置文件
├── index.js        # 主入口文件
└── README.md       # 说明文档

本地调试

安装依赖（本项目无需额外依赖）
在 VSCode 中打开项目
按 F5 启动开发主机
在新窗口中修改代码后，按 Cmd+Shift+P 选择 "Developer: Reload Window" 刷新

发布准备

如果需要发布到 VSCode Marketplace：

安装 vsce 工具：npm install -g @vscode/vsce
打包：vsce package
发布：vsce publish

许可证

ISC

版本历史

v1.1.0

新增组件预览功能
优化配置项默认值
改进匹配逻辑
删除 resolveImageByEnv 相关功能

v1.0.0

初始版本发布
支持基本 URL、模板字符串、变量拼接

hoverimage-preview

lion-jessica