使用 Stylelint 和 Prettier 强制执行行间距样式指南规则

Question

我正在与主要使用 SCSS 和 markdown 文件的大型开发人员团队一起开发一个项目。由于每个人都有自己的编码风格，我们现在有一个项目，不同的文件有不同的代码注释风格，代码块之间的行距不一致。

我们确实在项目中使用 Stylelint 来强制执行 BEM 语法和最大字符行长度。

但是，有没有一种方法可以在文件顶部定义的 SASS 变量和 CSS 选择器之间强制执行换行符的数量？我还想将它与 Prettier 结合使用，这样我就可以在保存文件时重新格式化它们。

Answer 1

However is there a way I can enforce the number of line breaks between SASS variables defined at the top of the file and the CSS selectors?

是的，您可以在 stylelint 中的大多数语言构造之前强制使用单个空行或不使用空行 using the *-empty-line-before and *-max-empty-lines rules。

当您使用 SCSS 时，您还可以使用 stylelint-scss plugin pack 来控制美元变量之前的空行。

例如，您可以强制执行以下代码样式：

@import "foo.css";

$variable: value;
$variable: value;

rule-set {
  property: value;
  property: value;
}

rule-set {
  property: value;
  property: value;
}

使用此 stylelint 配置：

{ 
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-empty-line-before": [ "always", {
      except: [
        "blockless-after-same-name-blockless",
        "first-nested",
      ],
      ignore: ["after-comment"],
    } ],
    "declaration-empty-line-before": [ "always", {
      except: [
        "after-declaration",
        "first-nested",
      ],
      ignore: [
        "after-comment",
        "inside-single-line-block",
      ],
    } ],
    "max-empty-lines": 1,
    "rule-empty-line-before": [ "always-multi-line", {
      except: ["first-nested"],
      ignore: ["after-comment"],
    } ],
    "scss/dollar-variable-empty-line-before": [ "always", {
      except: [
        "after-dollar-variable",
        "first-nested"
      ],
      ignore: ["after-comment"],
    } ]
  }
}

但是，不可能强制执行多个空行，例如CSS 规则集前的两个空行。您需要 write a custom stylelint plugin 才能做到这一点。

I’d also like to combine it with Prettier so I can have files re-format on save whilst I work on them.

Prettier 和 stylelint 可以很好地协同工作。有一些重叠，但它们是互补的工具。例如，您可以使用 Prettier 漂亮地打印大部分空白并在 SCSS 文件中强制执行特定的行长度，然后使用 stylelint 来控制空行（以及 check for possible errors and limit language feature）。

stylelint 有一个 --fix 标志，上面示例中的规则可以自动修复。

使用 Stylelint 和 Prettier 强制执行行间距样式指南规则

Enforcing line spacing style guide rules with Stylelint and Prettier

stylelint

prettier