@qes-test/stylelint-config/README.md

A stylelint configuration package for QES projects

# @qes-test/stylelint-config

一个基于 Stylelint 的代码规范配置包，提供了完整的 CSS、SCSS 和 Vue 文件样式检查配置。

## 安装

```bash
npm install --save-dev @qes-test/stylelint-config
```

## 使用方法

### 基本配置

在你的项目中创建 `stylelint.config.mjs` 文件：

```javascript
export default {
  extends: ['@qes-test/stylelint-config'],
  root: true
}
```

### 与现有项目集成

如果你已经有 Stylelint 配置，可以这样集成：

```javascript
export default {
  extends: [
    '@qes-test/stylelint-config'
    // 你的其他配置
  ],
  rules: {
    // 在这里添加或覆盖规则
  }
}
```

## 特性

- ✅ **CSS 支持** - 完整的 CSS 语法检查和规范
- ✅ **SCSS 支持** - SCSS 语法检查和最佳实践
- ✅ **Vue 支持** - Vue 单文件组件样式检查
- ✅ **Prettier 集成** - 自动代码格式化
- ✅ **属性排序** - 自动排序 CSS 属性
- ✅ **代码质量** - 检测潜在的样式问题和代码质量问题
- ✅ **可扩展** - 易于自定义和扩展

## 包含的插件

- `stylelint-config-standard` - 标准样式规范
- `stylelint-config-recess-order` - CSS 属性排序
- `stylelint-scss` - SCSS 语法支持
- `stylelint-prettier` - Prettier 集成
- `@stylistic/stylelint-plugin` - 代码风格检查
- `stylelint-order` - 属性排序插件

## 要求

- Node.js >= 16
- Stylelint >= 16.0.0

## 配置说明

### CSS 配置

包包含了完整的 CSS 支持，包括：

- 标准 CSS 语法检查
- 属性排序规则
- 代码风格规范

### SCSS 配置

针对 SCSS 的优化配置：

- SCSS 语法检查
- 变量和 mixin 支持
- 嵌套规则检查

### Vue 配置

针对 Vue 单文件组件的配置：

- Vue 特定伪类支持 (`:deep`, `:global`)
- Vue 特定伪元素支持 (`v-deep`, `v-global`, `v-slotted`)
- 组件样式规范

## 规则说明

### 主要规则

- `order/order` - CSS 属性排序规则
- `prettier/prettier` - Prettier 格式化规则
- `selector-class-pattern` - 类名命名规范
- `at-rule-no-unknown` - 未知 at 规则检查

### 忽略的文件

默认忽略以下文件类型：

- JavaScript 文件 (`.js`, `.jsx`)
- TypeScript 文件 (`.ts`, `.tsx`)
- JSON 文件 (`.json`)
- Markdown 文件 (`.md`)

## 许可证

MIT