Stylelint 配置方案深度对比：stylelint-config-recommended、stylelint-config-sass-guidelines 与 stylelint-config-standard

在现代前端工程中，CSS/SCSS 代码的规范性和一致性对团队协作和长期维护至关重要。Stylelint 是业界主流的样式代码检查工具，而配置包则决定了具体启用哪些规则。本文将深入对比三个常用配置包：stylelint-config-recommended、stylelint-config-sass-guidelines 和 stylelint-config-standard，帮助你在项目选型时做出精准决策。

🧱 核心定位与规则覆盖范围

stylelint-config-recommended

这是 Stylelint 官方提供的最小可行配置，仅包含那些能明确识别出错误（如无效属性值、未知单位）的规则。它不涉及代码风格或格式偏好，目标是捕获真正会破坏渲染或导致运行时问题的 CSS 错误。

// .stylelintrc.json 使用 stylelint-config-recommended
{
  "extends": ["stylelint-config-recommended"]
}

该配置适用于希望从零开始自定义规则集的团队，或只想避免语法错误而不强制统一风格的场景。

stylelint-config-standard

由 Stylelint 核心团队维护，建立在 stylelint-config-recommended 之上，额外添加了大量关于代码风格、命名约定和结构组织的规则。它代表了社区广泛接受的最佳实践，例如要求使用双引号、禁止空行结尾、强制声明块排序等。

// .stylelintrc.json 使用 stylelint-config-standard
{
  "extends": ["stylelint-config-standard"]
}

注意：此配置默认针对通用 CSS，但通过可选插件支持 SCSS、Less 等预处理器。

stylelint-config-sass-guidelines

这是一个专注于 SCSS 项目的配置包，基于 Hugo Giraudel 提出的 Sass Guidelines 实践。它不仅包含语法正确性检查，还强制执行 SCSS 特有的结构规范，如嵌套深度限制、变量命名约定（$kebab-case）、混合宏使用方式等。

// .stylelintrc.json 使用 stylelint-config-sass-guidelines
{
  "extends": ["stylelint-config-sass-guidelines"]
}

该配置假定项目使用 SCSS，并内置了对 SCSS 语法的支持（依赖 postcss-scss 解析器）。

🔍 规则差异实战演示

场景 1：无效 CSS 属性值

所有三个配置都会报错，因为它们都继承了 stylelint-config-recommended 的核心错误检测能力。

/* invalid.css */
color: reddd; /* 拼写错误 */
display: flexbox; /* 无效值 */

• stylelint-config-recommended: 报错 ✅
• stylelint-config-standard: 报错 ✅
• stylelint-config-sass-guidelines: 报错 ✅

场景 2：引号风格（单引号 vs 双引号）

/* quotes.scss */
.selector {
  content: 'hello';
}

• stylelint-config-recommended: 不检查 ❌
• stylelint-config-standard: 要求双引号，报错 ✅

  Expected double quotes (string-quotes)
  

• stylelint-config-sass-guidelines: 要求单引号（遵循 Sass Guidelines），报错 ✅

  Expected single quotes (string-quotes)
  

场景 3：SCSS 嵌套深度

/* deep-nesting.scss */
.container {
  .sidebar {
    .menu {
      .item {
        color: blue;
      }
    }
  }
}

• stylelint-config-recommended: 不检查嵌套深度 ❌
• stylelint-config-standard: 默认不限制嵌套深度（除非显式配置）❌
• stylelint-config-sass-guidelines: 默认最大嵌套深度为 3 层，此处 4 层会报错 ✅

  Expected nesting depth to be no more than 3 (max-nesting-depth)
  

场景 4：变量命名规范

/* var-name.scss */
$MyVariable: #fff;

• stylelint-config-recommended: 不检查变量名 ❌
• stylelint-config-standard: 对普通 CSS 变量有规则，但对 SCSS $ 变量无特殊处理 ❌
• stylelint-config-sass-guidelines: 要求 SCSS 变量使用 kebab-case，此处 PascalCase 会报错 ✅

  Expected $my-variable instead of $MyVariable (scss/dollar-variable-pattern)
  

⚙️ 配置扩展性与兼容性

解析器依赖

• stylelint-config-recommended 和 stylelint-config-standard 默认使用标准 CSS 解析器。若用于 SCSS 项目，需额外安装并配置 postcss-scss：

  {
    "extends": ["stylelint-config-standard"],
    "customSyntax": "postcss-scss"
  }
  

• stylelint-config-sass-guidelines 内部已预设 customSyntax: "postcss-scss"，开箱即用支持 SCSS。

规则覆盖策略

所有配置均可通过 .stylelintrc.json 中的 rules 字段覆盖默认行为：

{
  "extends": ["stylelint-config-sass-guidelines"],
  "rules": {
    "max-nesting-depth": 4 // 放宽嵌套限制
  }
}

但需注意：stylelint-config-sass-guidelines 包含一些 SCSS 专属规则（如 scss/dollar-variable-pattern），这些规则在非 SCSS 项目中会失效或报错。

🛑 维护状态与适用边界

经核查官方 npm 页面及 GitHub 仓库：

• stylelint-config-recommended：由 Stylelint 官方维护，持续更新，适用于所有 Stylelint 项目的基础层。
• stylelint-config-standard：由 Stylelint 核心团队维护，活跃更新，是通用 CSS/SCSS 项目的推荐起点。
• stylelint-config-sass-guidelines：截至 2024 年仍在维护，但更新频率较低。其规则集紧密绑定 Sass Guidelines 文档，适合严格遵循该规范的团队。

⚠️ 重要提示：stylelint-config-sass-guidelines 仅适用于 SCSS 项目。若用于纯 CSS 项目，会因解析器不匹配或规则不适用导致意外行为。

📊 选型决策指南

💡 总结建议

• 如果你的项目使用 SCSS 且团队认同 Sass Guidelines 的理念（如嵌套深度控制、变量命名规范），直接选用 stylelint-config-sass-guidelines 能快速落地一致的代码风格。
• 如果你希望 平衡规范性与灵活性，或项目同时包含 CSS/SCSS/Less，stylelint-config-standard 是更通用的选择，配合解析器配置即可覆盖多语言场景。
• 如果你正在构建 高度定制化的 linting 流程，或仅需基础错误检查，从 stylelint-config-recommended 开始逐步添加规则是最可控的方式。

最终，没有“最好”的配置，只有“最合适”当前团队和项目上下文的配置。建议在项目初期通过试用不同配置，结合 CI/CD 中的反馈，找到最高效的规范组合。