如何在Stylelint中定义规则，要求选择器换行前加逗号？

嘿，这事儿不难搞定！你需要用Stylelint的selector-list-comma-newline-after规则来实现这个需求，具体配置和说明如下：

核心规则配置 #

这个规则的作用是强制选择器列表中的每个逗号后面必须换行，反过来就确保了：如果你的选择器要换行拆分，那么上一个选择器的末尾必须先加逗号（否则Stylelint会直接抛出错误）。

在你的Stylelint配置文件（通常是.stylelintrc.json或者.stylelintrc.js）中添加以下规则：

{
  "rules": {
    "selector-list-comma-newline-after": "always"
  }
}

验证你的示例 #

• 错误写法（无逗号直接换行）：

#main > div // 此处无逗号，Stylelint会抛出错误
div {
  // 样式内容
}

Stylelint会提示类似Expected newline after "," in selector list的错误（因为它期望逗号后换行，但这里没有逗号却换行了）。

• 正确写法（换行前加逗号）：

#main > div, // 格式正确，无错误
div {
  // 样式内容
}

这种写法完全符合规则，不会触发任何错误。

额外优化（可选） #

如果你想进一步规范格式，比如禁止逗号前面加空格，可以再加上这条规则：

{
  "rules": {
    "selector-list-comma-newline-after": "always",
    "selector-list-comma-space-before": "never"
  }
}

这样就能确保逗号和前一个选择器紧密相连，格式更统一。

内容的提问来源于stack exchange，提问作者Mateusz