如何为SCSS自定义Stylelint？自定义Stylelint格式规则未生效问题求助

嘿，我发现你描述里的预期格式和当前格式看起来一模一样，大概率是你手滑写错啦😅！先假设你是希望调整嵌套选择器的排版（要么拆分换行，要么给同级别嵌套块加空行），我来帮你梳理问题出在哪：

你现在用的block-closing-brace-empty-line-before规则，作用是控制多行块的闭括号}之前是否需要空行（比如像{ width: 2px;\n\n}这种格式），它并不是用来控制嵌套选择器的换行或者同级别块之间的空行的，所以这条规则对你想要的格式没效果很正常。

情况1：希望嵌套选择器换行排列 #

如果你的目标格式是这样：

.s{
  .f{ width:2px; }
  .d{ width:2px; }
}

那你需要配置这几条规则：

{
  "rules": {
    "block-opening-brace-newline-after": "always",
    "selector-nest-combinator-newline-after": "always",
    "block-closing-brace-newline-before": "always-multi-line"
  }
}

• block-opening-brace-newline-after：确保{后面自动换行
• selector-nest-combinator-newline-after：确保嵌套选择器（比如.s里的.f）和父选择器的{不在同一行
• block-closing-brace-newline-before：确保多行块的}单独占一行

情况2：希望同级别嵌套块之间有空行 #

如果你的目标是在.f和.d的块之间加空行，比如：

.s{
  .f{ width:2px; }

  .d{ width:2px; }
}

那核心要配置的是rule-empty-line-before规则：

{
  "rules": {
    "rule-empty-line-before": ["always-multi-line", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    }],
    // 搭配换行规则一起用，排版更清晰
    "block-opening-brace-newline-after": "always"
  }
}

• always-multi-line：给多行规则前添加空行
• except: ["first-nested"]：避免父选择器下第一个嵌套块（.f）前面出现多余空行

另外要注意：如果你用的是SCSS/Less这类预处理器，一定要安装并启用对应的Stylelint插件（比如stylelint-scss），不然Stylelint可能无法正确识别嵌套选择器的结构，导致规则不生效。

你可以根据自己实际想要的格式，调整对应的规则配置，应该就能达到预期效果啦！

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