@qes-test/stylelint-config

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

安装

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

使用方法

基本配置

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

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

与现有项目集成

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

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