# vscode-plugin-utils

**Repository Path**: niboac/vscode-plugin-utils

## Basic Information

- **Project Name**: vscode-plugin-utils
- **Description**: vscode 插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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

## 安装依赖

```bash
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. 重新测试功能