sass - 使用 SCSS 的 Stylelint 配置 : Remove empty lines between first nested selector

Question

我正在尝试将 .stylelintrc.json 配置为在选择器之间始终有空行(第一个嵌套选择器除外)的情况下工作。

示例

这是我使用 --fix 进行 linting 后得到的结果

.class {
                 
    .is-active {
        color: red;
    }

    .is-disabled {
        color: grey;
    }
}

.block__container {

    &--grid {
                                
        /* autoprefixer grid: no-autoplace */
        grid-template-rows: 1fr auto auto;
    }

    &--full {

        div {
           ....
        }
    }

    &--wide {

       div {
         ...
       }
    }
}

这就是我想要的最终结果

//This is what I want
.class {
    .is-active {
        color: red;
    }

    .is-disabled {
        color: grey;
    }
}

.block__container {
    &--grid {                     
        /* autoprefixer grid: no-autoplace */
        grid-template-rows: 1fr auto auto;
    }

    &--full {
        div {
           ....
        }
    }

    &--wide {
       div {
         ...
       }
    }
}

这是我的 .stylelintrc.json 文件:

{
  "extends": [ "@wordpress/stylelint-config/scss" ],
  "rules": {
    "string-quotes": "single",
    "scss/at-extend-no-missing-placeholder": true,
    "selector-class-pattern": null,
    "selector-id-pattern": null,
    "declaration-empty-line-before": "never",
    "rule-empty-line-before": [
      "always",
      {
        "except": [
          "after-single-line-comment",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "first-nested"
        ]
      }
    ],
    "at-rule-empty-line-before": [
      "always",
      {
        "except": [
          "blockless-after-same-name-blockless",
          "blockless-after-blockless",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "first-nested",
          "blockless-after-blockless"
        ],
        "ignoreAtRules": [
          "import"
        ]
      }
    ]
  } 
}

我需要使用/扩展哪些规则、选项或插件才能获得该结果？非常感谢

Answer 1

您可以使用except: ["first-nested"]内置选项rule-empty-line-before除了第一个嵌套规则之外，规则之前始终有一个空行。

{
  "rules": {
    "rule-empty-line-before": [
      "always",
      {
        "except": [
          "first-nested"
        ],
        "ignore": [
          "after-comment"
        ]
      }
    ]
  } 
}

(在您的配置中，您忽略第一个嵌套。)