Nuxt中Stylelint空行前置规则配置异常问题求助

要实现你需要的「非嵌套的&__/&--选择器、@include前加空行，而&--xxx块内的嵌套@include无需空行」的效果，你需要调整Stylelint的规则配置，同时借助SCSS专用插件来精准处理嵌套语法：

第一步：安装SCSS插件 #

首先安装stylelint-scss插件，它能更好地识别SCSS的嵌套选择器和at规则：

npm install stylelint-scss --save-dev

第二步：修改Stylelint配置 #

替换你现有的配置为以下内容：

{
  "plugins": [
    "stylelint-declaration-strict-value",
    "stylelint-scss"
  ],
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "function",
          "if",
          "each",
          "include",
          "mixin",
          "at-root",
          "extend"
        ]
      }
    ],
    "rule-empty-line-before": [
      "always",
      {
        "except": ["first-nested"],
        "ignore": ["after-comment"]
      }
    ],
    "at-rule-empty-line-before": [
      "always",
      {
        "except": ["first-nested"],
        "ignore": [
          "after-comment",
          {
            "selector": "/&--.*/"
          }
        ]
      }
    ],
    "scss/selector-nest-combinators": "always",
    "no-empty-source": null,
    "no-descending-specificity": null,
    "declaration-no-important": true,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ]
  }
}

关键配置说明： #

1. rule-empty-line-before：

   • 从always-multi-line改为always，确保所有非第一个嵌套的规则（包括&__/&--选择器）前都必须有空行，无论规则是单行还是多行。
   • except: ["first-nested"]表示父选择器下的第一个嵌套规则无需前置空行。

2. at-rule-empty-line-before：

   • 保留always要求默认添加空行，except: ["first-nested"]允许父选择器下的第一个@include无需空行。
   • 添加ignore: [{selector: "/&--.*/"}]，忽略所有位于&--开头的选择器块内的@include，无论它们是不是第一个嵌套元素。

3. scss/selector-nest-combinators：

   • 统一SCSS嵌套选择器的格式，确保&选择器的语法规范。

第三步：修正后的代码示例 #

调整后的代码会符合规则要求：

.header {
    header {
      background-color: $color-primary-300;
    }

    &__inner {
      box-shadow: $box-shadow;
    }

    &__spacer {
      width: 100%;
      height: 72px;

      &--small {
        height: 66px;
      }

      @include respond-to(lg) {
        height: 106px;
      }

      &--no-links {
        @include respond-to(lg) {
          height: 0;
        }

        // 此处@include无需空行，符合需求
        @include respond-to(xl) {
          height: 10px;
        }
      }
    }
}

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