CSS Background Size Helper

一个 VSCode 插件，用于自动获取 CSS background 图片的尺寸并添加对应的 width 和 height 属性。

功能特性

• 检测当前行的 background 或 background-image 属性
• 自动获取图片的实际尺寸
• 根据项目类型自动选择单位（rem 或 rpx）
• 支持相对路径和绝对路径的图片

使用方法

1. 将光标定位到包含 background 或 background-image 的 CSS 行
2. 按下快捷键 Cmd+Alt+F8 (macOS)
3. 插件会自动在上一行添加对应的 width 和 height 属性

单位选择逻辑

• 如果项目的 package.json 中包含 @dcloudio/uni-app 依赖，使用 rpx 单位
• 否则使用 rem 单位（基于 16px 换算）

支持的文件类型

• CSS
• SCSS
• Less
• Vue
• HTML

安装依赖

pnpm install

开发调试

1. 在 VSCode 中打开项目
2. 按 F5 启动调试
3. 在新的 VSCode 窗口中测试插件功能

您可以通过以下步骤在开发模式下测试 VSCode 插件功能，无需打包：

1. 编译 TypeScript 代码

首先确保 TypeScript 代码已编译：

pnpm run compile

或者启动监听模式（推荐）：

pnpm run watch

2. 启动插件调试

在 VSCode 中：

1. 打开当前项目（vscode-plugin-utils）
2. 按 F5 或者点击菜单 Run > Start Debugging
3. 这会启动一个新的 VSCode 窗口（Extension Development Host）

3. 测试插件功能

在新打开的 VSCode 窗口中：

1. 打开您的 test.css 文件
2. 将光标定位到第 2 行（包含 background-image: url('./images/btn-big.png'); 的行）
3. 按下快捷键 Cmd+Alt+F8
4. 插件应该会自动在下一行添加对应的 width 和 height 属性

4. 查看调试信息

• 在原始 VSCode 窗口的 Debug Console 中可以看到调试输出
• 如果有错误，会在 Problems 面板中显示
• 插件的状态信息会通过 VSCode 的通知显示

5. 修改代码后的测试

如果您修改了插件代码：

1. 如果启用了 watch 模式，代码会自动重新编译
2. 在 Extension Development Host 窗口中按 Ctrl+R （或 Cmd+R ）重新加载插件
3. 重新测试功能