Cursor rule

1---
2description: 
3globs: 
4alwaysApply: false
5---
6# Vite Tagger 使用指南
7 
8## 安装
9 
10```bash
11npm install vite-tagger --save-dev
12# 或
13pnpm add -D vite-tagger
14# 或
15yarn add -D vite-tagger
16```
17 
18## 配置
19 
20在Vite配置文件中添加插件：
21 
22```js
23// vite.config.js / vite.config.ts
24import { defineConfig } from 'vite';
25import { viteTagger } from 'vite-tagger';
26 
27export default defineConfig({
28  plugins: [
29    viteTagger({
30      // 配置选项
31      enabled: true,                   // 是否启用插件（默认仅在开发模式启用）
32      prefixName: 'vt',                // 自定义前缀名称（默认为'vt'）
33      include: ['.tsx', '.jsx'],       // 包含的文件扩展名
34      exclude: ['node_modules'],       // 排除的文件路径模式
35      useRelativePath: true,           // 是否使用相对路径（默认true）
36      debug: false,                    // 是否启用调试日志
37      filter3DElements: true           // 是否过滤3D元素（three.js/drei）
38    })
39  ]
40});
41```
42 
43## 特性
44 
451. 为HTML元素添加调试属性，包括：
46   - `data-vt-id`: 元素唯一标识符，包含文件路径、行号和列号
47   - `data-vt-name`: 元素名称
48   - `data-component-path`: 元素所在文件的路径（兼容性属性）
49   - `data-component-line`: 元素在源代码中的行号（兼容性属性）
50   - `data-component-file`: 元素所在的文件名（兼容性属性）
51   - `data-component-name`: 元素名称（兼容性属性）
52   - `data-component-content`: 元素内容的JSON表示（仅在内容非空时添加）
53 
542. 自动跳过：
55   - React组件（首字母大写的元素）
56   - Fragment组件
57   - 配置的排除文件
58   - 3D元素（如果启用filter3DElements）
59