Image Preview X - Visual Studio Code 扩展

Fork 自 kisstkondoros/gutter-preview， 源码仓库：chenchangzhong/gutter-preview

在编辑器行号和悬停时显示图片预览，新增函数式路径识别支持。

效果演示

安装

通过 VSIX 文件安装

1. 打开 VS Code
2. 按 Ctrl+Shift+P（macOS 上为 Cmd+Shift+P）打开命令面板
3. 输入 Extensions: Install from VSIX... 并选择
4. 选择 gutter-preview-x-*.vsix 文件

或通过命令行安装：

code --install-extension gutter-preview-x-0.33.0.vsix

配置说明

所有配置项以 gutterpreviewx. 为前缀，避免与原版扩展冲突。

基础配置

配置项	默认值	说明
gutterpreviewx.showImagePreviewOnGutter	true	是否在行号区域显示图片预览图标
gutterpreviewx.showUnderline	true	是否为识别到的图片 URL 添加下划线
gutterpreviewx.imagePreviewMaxHeight	100	悬停预览最大高度（像素）
gutterpreviewx.imagePreviewMaxWidth	-1	悬停预览最大宽度（像素）；大于 0 时替代最大高度生效
gutterpreviewx.sourceFolder	"src"	解析相对路径时的附加目录
gutterpreviewx.sourceFolders	["static", "public"]	解析相对路径时的多个附加目录
gutterpreviewx.paths	{}	相对于项目根目录的路径别名映射
gutterpreviewx.currentColorForSVG	"white"	SVG 预览时使用的默认颜色
gutterpreviewx.enableReferenceLookup	false	是否从变量引用中解析图片路径
gutterpreviewx.urlDetectionPatterns	[]	用于检测无扩展名 URL 的正则表达式

函数式路径识别（新增）

该功能可以识别以函数调用参数形式传入的图片路径，例如：

const icon = getImgUrl('header/number-one')
const logo = require('@/assets/logo')
const bg = imageUrl('common/banner')

gutterpreviewx.functionCallNames

需要匹配的函数名列表，这些函数的字符串参数会被识别为图片路径。

{
  "gutterpreviewx.functionCallNames": ["getImgUrl", "require", "imageUrl"]
}

默认值：[]（未配置时不启用）

gutterpreviewx.functionCallBasePath

解析函数式图片路径时拼接的基础路径（相对于工作区根目录）。

{
  "gutterpreviewx.functionCallBasePath": "src/assets/images"
}

以上配置下，getImgUrl('header/number-one') 会解析为： <工作区>/src/assets/images/header/number-one.<扩展名>

默认值："" — 为空时，自动使用 gutterpreviewx.paths 中所有值作为回退基础路径。

paths 回退示例：

{
  "gutterpreviewx.paths": {
    "@": "src/assets",
    "~": "public/images"
  }
}

getImgUrl('header/number-one') 会依次尝试：

1. <工作区>/src/assets/header/number-one.<扩展名>
2. <工作区>/public/images/header/number-one.<扩展名>

gutterpreviewx.functionCallExtensions

当提取到的路径没有扩展名时，依次尝试拼接的文件扩展名列表，找到第一个存在的文件即返回。

{
  "gutterpreviewx.functionCallExtensions": [".png", ".jpg", ".jpeg", ".svg", ".gif", ".webp", ".ico", ".bmp"]
}

完整配置示例

{
  "gutterpreviewx.functionCallNames": ["getImgUrl", "imageUrl"],
  "gutterpreviewx.functionCallBasePath": "src/assets/images",
  "gutterpreviewx.functionCallExtensions": [".png", ".jpg", ".svg", ".webp"],
  "gutterpreviewx.paths": {
    "@": "src"
  }
}

从源码构建

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 生产构建
npm run build

# 打包为 .vsix 文件
npx @vscode/vsce package --allow-missing-repository

更新日志

• 0.33.0 (Image Preview X)
  • Fork 并重新命名为 gutter-preview-x，避免与原版扩展冲突
  • 所有配置项从 gutterpreview.* 重命名为 gutterpreviewx.*
  • 新增函数式路径识别：支持 getImgUrl('header/number-one') 等函数调用形式的图片路径
    • gutterpreviewx.functionCallNames — 配置需要匹配的函数名
    • gutterpreviewx.functionCallBasePath — 路径解析的基础目录（为空时回退到 gutterpreviewx.paths）
    • gutterpreviewx.functionCallExtensions — 无扩展名时尝试拼接的文件扩展名
• 0.32.2
  • 更新变更日志
  • 支持别名中使用斜杠 "/"
• 0.32.1
  • 更新变更日志
  • 支持别名中使用协议/方案前缀
• 0.32.0
  • 更新变更日志
  • 支持多个源文件夹
  • 修复 decorator.ts 中的拼写错误
  • 避免大图片导致的渲染性能问题
  • 从 URL 编码的 Data URI 中提取图片数据
  • 新增 jfif 文件格式支持
  • 支持 asciidoc 的 imagesdir 属性
• 0.31.2
  • 更新变更日志
  • 尝试修复服务器重启问题
  • 将激活事件改为 onStartupFinished
  • 延迟创建输出通道
• 0.31.1
  • 更新变更日志
  • 更新依赖
  • 迁移至 tsup
• 0.31.0
  • 更新变更日志
  • 新增 avif 支持（由 @rommelmamedov 贡献）
  • 新增无扩展名图片加载选项（由 @toFrankie 贡献）
• 0.30.0
  • 更新变更日志
  • 更新依赖
  • 修复基于引用查找的路径解析
  • 支持引号内的 Data URI 解析
• 0.29.0
  • 新增配置项 gutterpreview.imagePreviewMaxWidth
• 0.28.1
  • 修复无工作区时的扩展初始化问题
• 0.28.0
  • 悬停预览中显示文件大小
  • 更新依赖
• 0.27.0
  • 更新依赖
  • 修复临时文件相关问题
• 0.26.2
  • 更新依赖
• 0.26.1
  • 更新 vscode 引擎版本至 1.44.0
• 0.26.0
  • 支持 markdown 图片语法中包含空格的路径（由 @episage 贡献）
• 0.25.0
  • 悬停消息中添加“打开所在文件夹”链接
• 0.24.0
  • 当 currentColorForSVG 设为空字符串时跳过样式注入
• 0.23.0
  • 新增 webp 到支持的扩展名列表（由 @Afsar-Pasha 贡献）
• 0.22.3
  • 修复 URI 中特殊字符的处理
• 0.22.2
  • 修复文件 URI 处理
• 0.22.1
  • 从包中移除不必要的文件
• 0.22.0
  • 使用 webpack 打包扩展
  • 更新至 vscode@1.37.0
  • 收集资源引用时检查 CancellationToken
• 0.21.1
  • 默认禁用引用解析
• 0.21.0
  • 支持显示常量类中定义的图片
• 0.20.0
  • 新增 SVG 的 currentColor 配置支持
• 0.19.5
  • 修复 Data URI 处理（由 @rafaelkendy 贡献）
• 0.19.4
  • 悬停预览中为图片 URL 添加 file 协议（修复 Remote - WSL 的问题）
• 0.19.3
  • 新增 latex 中从花括号内提取 URL 的特殊处理
• 0.19.2
  • 降级 vscode-languageclient 和 -server 至 5.21
• 0.19.1
  • 更新依赖
• 0.19.0
  • 新增 ico 到支持的扩展名
• 0.18.0
  • 悬停消息中添加“在侧边栏中显示”链接
• 0.17.5
  • 修复 js/tsconfig 路径部分的处理
• 0.17.4
  • 确保 loadPathsFromTSConfig 始终至少返回空对象
  • 更新运行时依赖
• 0.17.3
  • 修复并调整从 js/tsconfig 加载路径别名的逻辑
• 0.17.2
  • 移除 js/tsconfig 路径映射中的尾部通配符
• 0.17.1
  • 添加 typescript 作为运行时依赖
• 0.17.0
  • 支持通过配置属性或 js/tsconfig 定义的路径别名
    • 详见 TypeScript 文档 注意修改 js/tsconfig.json 后需要重启
• 0.16.5
  • 用 image-size 替换 probe-image-size
• 0.16.4
  • 更新依赖
• 0.16.3
  • 启用自动换行时避免重复装饰
• 0.16.2
  • 显式处理网络资源请求错误
• 0.16.1
  • 修复 readme 中的拼写错误
• 0.16.0
  • 修复图片尺寸计算
  • 修复 Windows 下的图片路径处理
  • 要求 vscode 版本 1.28.0
  • 使用 ImageCache 加速图片路径验证
  • 实现局部扫描和取消令牌处理
• 0.15.3
  • 搜索链接时跳过超过 20k 字符的行
  • 修复运行时依赖问题 (slash)
• 0.15.2
  • 恢复基于 vscode.Uri 的图片装饰处理
• 0.15.1
  • 更新依赖
  • 为配置属性添加 scope
• 0.15.0
  • 修改配置选项大小写（由 Orhan Sönmez 贡献）
  • 新增 gutterpreview.showUnderline 选项禁用下划线（由 Orhan Sönmez 贡献）
  • 使用更灵活的 Data URL 检测模式
  • 修复相对于工作区文件夹的 URL 解析
• 0.14.2
  • 修复多个 Windows 兼容性问题
• 0.14.1
  • 添加编辑器实例的空值检查
• 0.14.0
  • 大规模重构：提取 ImageCache、识别器、映射器
  • 新增 Data URL 识别器和本地链接识别器
  • 为识别到的 URL 添加下划线
  • 支持单行中多个 URL 检测
• 0.13.1
  • 避免无效 URL 的空指针异常
• 0.13.0
  • 新增配置项 gutterpreview.imagepreviewmaxheight
• 0.12.2
  • 基于文件系统的 URL 映射器仅考虑路径名
• 0.12.1
  • 调整文件查找并添加多根工作区支持
• 0.12.0
  • 使用临时文件避免文件锁定
• 0.11.4
  • 支持模板字符串中的查找
• 0.11.3
  • 添加缺失的协议检查
• 0.11.2
  • 更新 Python 正则表达式以处理多字符串行
• 0.11.1
  • 移除路径分隔符替换
• 0.11.0
  • 新增 Python 图片文件名识别器
• 0.10.2
  • 为 HTTP 托管的图片提供回退方案
• 0.10.1
  • 尝试修复 macOS Sierra 上的路径拼接问题
• 0.10.0
  • 悬停预览中添加图片尺寸信息
  • 无文件类型限制地显示悬停预览
• 0.9.1
  • 无工作区时忽略工作区相对 URL 映射器
• 0.9.0
  • 支持 markdown 文件中的图片
• 0.8.0
  • 扩展名称改为 Image Preview
  • 新增禁用行号区图片预览的选项
• 0.7.0
  • 为 // URL 添加 http 协议
• 0.6.0
  • 新增图片 src 识别器
• 0.5.0
  • 新增 gutterpreview.sourcefolder 配置变量
• 0.4.0
  • 新增 html 文件类型支持
  • 去重识别到的 URL
  • 新增 http/https URL 匹配器
• 0.3.0
  • 悬停组件中支持 Data URI
• 0.2.0
  • 限制代码仅在 css/scss/less 文件中工作
• 0.1.0
  • 悬停时也显示图片预览
• 0.0.3
  • 修复显示名称
• 0.0.2
  • 附加示例图片
• 0.0.1
  • 项目初始设置

许可证

MIT 许可