Image Comments 图片注释插件

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

功能特性

在代码注释中显示图片预览
支持多种注释语法（//, #, /* */, ）
支持本地和远程图片
实时预览图片
支持直接从剪贴板粘贴截图
支持内联图片显示模式（内联模式暂时有bug）
自动检测并显示图片实际尺寸
支持特殊语法高亮显示
智能文件命名：根据注释内容自动生成描述性文件名
支持在注释中自定义截图名称（暂不支持中文）

使用方法

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

在注释中输入一些描述性文字（支持中文）
使用截图工具截取需要的图片并复制到剪贴板（Ctrl+C）
在VSCode中将光标定位到需要插入图片注释的位置
按下 Ctrl+Alt+V（或使用命令面板选择"粘贴截图到注释"）
插件会自动生成图片到正在打开的项目的根目录的\image_comments目录中，并以image序号的方式命名此外有自定义命名方式，例如，如果你在注释中写了jkl，然后按下 Ctrl+Alt+V，插件会生成类似 jkl_01.png 的文件名。

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

在注释中使用标准 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>

快捷键

Ctrl+Alt+V - 粘贴剪贴板中的截图到注释（默认快捷键，用户可自定义）

自定义快捷键

用户可以通过 VS Code 的键盘快捷方式设置来自定义快捷键：

按 Ctrl+K, Ctrl+S 打开键盘快捷方式设置
搜索"粘贴截图到注释"或者"GBM-image-comments.pasteImage"
点击编辑按钮来设置自己喜欢的快捷键组合

语法说明

插件支持多种图片语法：

标准语法：![替代文字](https://github.com/jkl-iii/vscode_image_comments_plugin/raw/HEAD/图片路径)
兼容语法：:)[替代文字](https://github.com/jkl-iii/vscode_image_comments_plugin/blob/HEAD/图片路径)（用于避免与其他插件的语法冲突）
前缀扩展语法：$![替代文字](https://github.com/jkl-iii/vscode_image_comments_plugin/raw/HEAD/图片路径)（特殊颜色显示）

使用 Ctrl+Alt+V 粘贴截图时，会自动使用 $![截图](https://github.com/jkl-iii/vscode_image_comments_plugin/raw/HEAD/图片路径) 语法，该语法在编辑器中会以特殊颜色显示，便于识别。

安装

从市场安装（推荐）

在 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
Shell
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