Code Image Preview VSCode Extension

一个能够在代码中根据文件路径预览图片的VSCode插件，支持自定义图片资源路径配置。

功能特性

悬停预览：鼠标悬停在图片路径上时显示图片预览
多语言支持：支持JavaScript、TypeScript、HTML、CSS、Vue、Python等多种语言
自定义图片路径：可配置多个图片资源目录
多种图片格式：支持PNG、JPG、GIF、SVG、WebP、BMP、ICO等格式
可配置预览大小：可设置最大预览图片尺寸

安装

克隆或下载本仓库
在项目目录中运行 npm install
按 F5 启动调试扩展

使用方法

基本使用

在代码中编写图片路径时，将鼠标悬停在路径上即可预览图片：

// JavaScript/TypeScript
import logo from './assets/logo.png';
const imageUrl = '/images/avatar.jpg';

// React
<img src="https://github.com/liusuan233/Code-Image-Preview-VSCode-Extension/raw/HEAD/public/icon.png" alt="icon" />

// CSS
.background {
  background-image: url('../assets/bg.jpg');
}

配置项

在VSCode设置中搜索 codeImgView 可配置以下选项：

codeImgView.imagePaths：图片资源目录列表（相对于工作区根目录）
- 默认值：["./src/assets", "./assets", "./public", "./images", "./img"]
codeImgView.imageExtensions：支持的图片文件扩展名
- 默认值：[".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"]
codeImgView.maxPreviewSize：最大预览图片尺寸（像素）
- 默认值：300
codeImgView.enableHoverPreview：启用悬停预览
- 默认值：true
codeImgView.enableInlinePreview：启用内联预览（实验性功能）
- 默认值：false

自定义配置示例

配置说明

codeImgView.imagePaths 中的路径是相对于工作区根目录的。例如，如果项目结构如下：

project/
├── src/
│   └── assets/images/    # 图片目录1
├── static/               # 图片目录2
├── resources/            # 图片目录3
└── media/                # 图片目录4

在 .vscode/settings.json 中添加：

{
  "codeImgView.imagePaths": [
    "./src/assets/images",  // 相对于 project/
    "./static",             // 相对于 project/
    "./resources",          // 相对于 project/
    "./media"               // 相对于 project/
  ],
  "codeImgView.maxPreviewSize": 400,
  "codeImgView.imageExtensions": [
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".svg",
    ".webp",
    ".bmp",
    ".ico",
    ".tiff"
  ]
}

路径解析示例

当代码中有 'banner.jpg' 时，插件会依次查找：

当前文件所在目录/banner.jpg
project/src/assets/images/banner.jpg
project/static/banner.jpg
project/resources/banner.jpg
project/media/banner.jpg
project/banner.jpg

支持的图片路径模式

插件会自动检测以下格式的图片路径：

字符串中的图片路径："./assets/logo.png"
URL函数中的路径：url('../images/bg.jpg')
HTML/JSX中的src属性：src="/public/icon.png"
CSS背景图片：background-image: url('pattern.png')

开发

项目结构

├── src/
│   └── extension.ts      # 扩展主文件
├── package.json          # 扩展配置
├── tsconfig.json         # TypeScript配置
├── .vscode/              # VSCode配置
│   ├── launch.json
│   └── tasks.json
└── README.md             # 说明文档

构建和调试

安装依赖：
```
npm install
```
编译TypeScript：
```
npm run compile
```
启动调试：
- 按 F5 启动调试会话
- 选择 "Run Extension" 配置
监视模式（自动编译）：
```
npm run watch
```

许可证

MIT

Code Image Preview

硫酸