Drag Image Tag
一个 VS Code 插件，用于自动将拖拽的图片文件转换为 HTML <img> 标签或 Markdown 图片语法。
✨ 功能特性
- 🖼️ 自动插入图片标签：从 Windows 文件管理器拖拽图片到编辑器，自动生成图片标签
- 📝 智能格式识别：根据文件类型自动选择 HTML 或 Markdown 格式
- HTML 文件：生成带
class 属性的 <img> 标签
- Markdown 文件：生成带图片名称的
 格式
- 🔗 自动计算相对路径：自动计算图片文件相对于当前编辑文件的相对路径
- 🔄 路径分隔符转换：自动将 Windows 路径分隔符
\ 转换为 /
- 📦 多文件支持：支持一次拖拽多个图片文件，自动生成多行标签
- 🎯 文件类型过滤：仅处理图片文件（.png, .jpg, .jpeg, .gif, .svg, .webp 等）
🚀 快速开始
安装依赖
npm install
编译项目
npm run compile
调试插件
- 在 VS Code 中按
F5 或点击"运行扩展"
- 会打开一个新的 VS Code 窗口（扩展开发主机）
- 在新窗口中打开一个 HTML 或 Markdown 文件
- 从文件管理器拖拽图片文件到编辑器
- 图片标签会自动插入到光标位置
打包插件
npm install -g vsce
vsce package
📖 使用方法
- 打开一个 HTML 或 Markdown 文件
- 将光标定位到要插入图片的位置
- 从 Windows 文件管理器拖拽一个或多个图片文件到编辑器
- 插件会自动在光标处插入相应的图片标签
HTML 文件
拖拽图片后会自动插入：
<img src="./相对路径/文件名.png" alt="文件名" class="文件名-img" />
特性：
- 自动添加
class 属性，格式为 文件名-img
- 自动计算相对路径
- 自动转换 Windows 路径分隔符
Markdown 文件
拖拽图片后会自动插入：
特性：
- 自动在方括号中填入图片名称（alt 文本）
- 自动计算相对路径
🛠️ 技术实现
- TypeScript：使用 TypeScript 开发
- VS Code API：使用
DocumentDropEditProvider API 处理拖拽事件
- 路径处理：自动计算相对路径并转换路径分隔符
📁 项目结构
vscode-drag-img-tag/
├── package.json # 插件配置文件
├── tsconfig.json # TypeScript 配置
├── src/
│ ├── extension.ts # 插件入口文件
│ ├── provider/
│ │ └── dropProvider.ts # 拖拽处理逻辑
│ └── utils/
│ └── pathHelper.ts # 路径处理工具
└── README.md # 说明文档
⚙️ 配置说明
插件支持以下文件类型：
- HTML 文件（
.html, .htm）
- Markdown 文件（
.md）
- 纯文本文件（
.txt）
支持的图片格式：
- PNG (
.png)
- JPEG (
.jpg, .jpeg)
- GIF (
.gif)
- SVG (
.svg)
- WebP (
.webp)
- BMP (
.bmp)
- ICO (
.ico)
- TIFF (
.tiff, .tif)
📝 开发说明
修改代码后重新编译
npm run compile
或者使用监视模式自动编译：
npm run watch
调试技巧
- 打开 VS Code 的开发者工具查看控制台输出
- 在代码中使用
console.log() 进行调试
- 检查
out/ 目录下的编译输出
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📄 许可证
MIT License
| |
