使用 Stylelint 和 Prettier 执行行距样式指南规则答案

【问题标题】：Enforcing line spacing style guide rules with Stylelint and Prettier使用 Stylelint 和 Prettier 执行行距样式指南规则
【发布时间】：2018-10-10 20:39:59
【问题描述】：

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

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

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

【问题讨论】：

标签： prettier stylelint

【解决方案1】：

但是有没有一种方法可以强制在文件顶部定义的 SASS 变量和 CSS 选择器之间的换行数？

是的，在大多数语言在 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 才能做到这一点。

我还想将它与 Prettier 结合起来，这样我就可以在处理文件时在保存时重新格式化文件。

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

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

【讨论】：