Image Comments 图片注释插件

这是一个 VSCode 插件，允许你在代码注释中嵌入和预览图片。

功能特性

在代码注释中显示图片预览
支持多种注释语法（//, #, /* */, ）
支持本地和远程图片
实时预览图片
支持直接从剪贴板粘贴截图
支持内联图片显示模式（内联模式暂时有bug）
自动检测并显示图片实际尺寸

使用方法

方法一：使用截图功能（推荐）

使用截图工具截取需要的图片并复制到剪贴板（Ctrl+C）
在VSCode中将光标定位到需要插入图片注释的位置
按下 Ctrl+Alt+V（或使用命令面板选择"粘贴截图到注释"）
插件会自动生成图片文件并插入图片链接到当前位置

方法二：手动插入图片链接

在注释中使用标准 Markdown 图片语法：

C/C++

/* 架构图 ![架构](https://example.com/images/architecture.png) */
int example() {
    // 流程图 ![流程图](https://example.com/flowchart.png)
    return 1;
}

Python

# 架构图 ![架构](https://example.com/images/architecture.png)
def example():
    return True

HTML

<!-- 示意图 ![示意](https://example.com/images/diagram.svg) -->
<div>示例内容</div>

显示模式（内联模式暂时有bug）

插件支持两种显示模式：

悬停预览模式（默认）：将鼠标悬停在图片链接上即可查看图片预览
内联显示模式：图片直接显示在代码注释中

切换显示模式

使用快捷键 Ctrl+Shift+Alt+L 可以在两种显示模式之间切换。（内联模式暂时有bug）

快捷键

Ctrl+Alt+V - 粘贴剪贴板中的截图到注释
Ctrl+Shift+Alt+L - 切换内联图片显示模式

安装

从市场安装（推荐）

在 VSCode 中打开 Extensions 面板
搜索 "Image Comments"
点击 Install 按钮

手动安装

下载 .vsix 文件
在 VSCode 中打开 Extensions 面板
选择 "Install from VSIX..."
选择下载的 .vsix 文件

从源码构建

git clone <repository-url>
cd <project-folder>
npm install
npm run compile

然后按 F5 在开发模式下运行插件。

配置

当前版本暂不支持用户配置项，所有功能均已预设并开箱即用。

支持的文件类型

插件可以识别以下编程语言的注释格式：

C/C++
Java
JavaScript/TypeScript
Python
HTML
以及其他使用相似注释语法的语言

图片存储

使用截图功能时，图片会自动保存到项目根目录下的 image_comments 文件夹中
文件名按照 image{编号}.png 格式命名
插入的图片链接使用绝对路径或相对于项目根目录的路径

支持的图片格式

PNG
JPG/JPEG
其他浏览器支持的图片格式

故障排除

截图功能不起作用

确保截图已正确复制到剪贴板
检查是否有权限运行 PowerShell 脚本
确认系统已安装 .NET Framework

图片无法显示

检查图片路径是否正确
确认图片文件是否存在
验证图片文件是否损坏

性能问题

如果在大型项目中遇到性能问题，建议：

减少单个文件中的图片数量
使用悬停预览模式而非内联显示模式

开发

项目结构

src/
├── extension.ts       # 主入口文件
├── systemImageUtils.ts # 系统级图片处理工具
└── ...

构建过程

# 编译 TypeScript
npm run compile

# 监听模式编译
npm run watch

# 打包为 VSIX
npm install -g vsce
vsce package

贡献

许可证

MIT License

GBM Image Comments

jkl