Stylelint 配置包深度对比：prettier、recommended、sass-guidelines 与 standard

在现代前端工程中，CSS/SCSS 代码的规范性和一致性至关重要。Stylelint 作为主流的样式检查工具，其配置生态提供了多种预设方案。本文将深入剖析 stylelint-config-prettier、stylelint-config-recommended、stylelint-config-sass-guidelines 和 stylelint-config-standard 四个核心配置包的技术差异、适用场景及组合策略，帮助团队做出精准选型。

🧩 核心定位与设计哲学

stylelint-config-recommended

这是 Stylelint 官方提供的最小化错误预防配置。它仅启用那些能明确识别潜在 bug 或浏览器兼容性问题的规则（如无效属性值、未知单位等），完全不涉及代码风格。适合只想避免技术错误、保留最大自由度的团队。

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-recommended']
};

stylelint-config-standard

在 recommended 基础上，增加了一套社区共识的代码风格规则。涵盖缩进、空格、分号、引号等格式规范，目标是提供开箱即用的统一风格。适合希望快速建立基础规范且不愿从零配置的项目。

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard']
};

stylelint-config-prettier

专为解决 Prettier 冲突而生。它会禁用所有可能与 Prettier 格式化结果冲突的 Stylelint 规则（主要是格式类规则）。注意：它本身不包含任何规则，必须与其他配置（如 standard）配合使用。

// .stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier' // 必须放在最后
  ]
};

stylelint-config-sass-guidelines

针对 SCSS/Sass 项目的深度定制。基于 Sass Guidelines 实践，强化了嵌套深度限制、变量命名、混合宏使用等 Sass 特有规范。适合重度使用 Sass 特性的项目。

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-sass-guidelines']
};

⚙️ 规则覆盖范围对比

💡 关键洞察：prettier 是唯一不能独立使用的配置包，它本质是一个“规则禁用器”。

🔌 典型组合模式与工程实践

场景 1：纯 CSS 项目 + Prettier

目标：用 Prettier 处理所有格式，Stylelint 只管逻辑错误。

// .stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-recommended', // 保留错误检查
    'stylelint-config-prettier'     // 禁用格式规则
  ]
};

场景 2：SCSS 项目 + Prettier

目标：兼顾 Sass 规范、逻辑错误检查，并让 Prettier 掌控格式。

// .stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-sass-guidelines', // 包含 recommended + Sass 规则
    'stylelint-config-prettier'         // 覆盖格式冲突
  ]
};

场景 3：无 Prettier 的 SCSS 项目

目标：全面接管样式规范，无需外部格式化工具。

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-sass-guidelines']
  // 注意：sass-guidelines 已内置 standard 的大部分规则
};

⚠️ 常见陷阱与解决方案

陷阱 1：prettier 位置错误

若 stylelint-config-prettier 未放在 extends 数组最后，其禁用规则可能被后续配置覆盖，导致 Prettier 冲突重现。

// ❌ 错误：prettier 被 standard 覆盖
extends: ['stylelint-config-prettier', 'stylelint-config-standard']

// ✅ 正确：prettier 最后生效
extends: ['stylelint-config-standard', 'stylelint-config-prettier']

陷阱 2：sass-guidelines 与 standard 冗余

stylelint-config-sass-guidelines 内部已继承 stylelint-config-standard，重复引入会导致规则重复加载（虽无功能影响但冗余）。

// ❌ 不必要
extends: [
  'stylelint-config-standard',
  'stylelint-config-sass-guidelines'
]

// ✅ 简洁
extends: ['stylelint-config-sass-guidelines']

陷阱 3：忽略自定义规则扩展

所有配置包都支持通过 rules 字段覆盖或新增规则。例如放宽 sass-guidelines 的嵌套深度限制：

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-sass-guidelines'],
  rules: {
    'max-nesting-depth': 4 // 默认是 3
  }
};

📊 选型决策树

graph TD
  A[是否使用 Prettier?] -->|是| B[是否使用 Sass?]
  A -->|否| C[是否需要基础代码风格?]
  B -->|是| D[选择 sass-guidelines + prettier]
  B -->|否| E[选择 recommended + prettier]
  C -->|是| F[选择 standard]
  C -->|否| G[选择 recommended]

💎 总结建议

• stylelint-config-recommended：适合极简主义团队或遗留项目渐进式接入，只防错不约束风格。
• stylelint-config-standard：适合新项目快速建立基础规范，平衡了严格性与通用性。
• stylelint-config-prettier：必须与其它配置联用，是 Prettier 用户的必备“冲突消除器”。
• stylelint-config-sass-guidelines：Sass 项目的黄金标准，将语言特性最佳实践固化为规则。

最终，没有“最好”的配置，只有“最合适”的组合。理解每个包的设计意图和规则边界，才能构建出既高效又可持续的样式检查体系。