Question

我正在与一大批开发人员一起开发项目，这些开发人员主要使用SCSS和markdown文件。由于每个人都有自己的编码样式，所以我们现在有一个项目，其中不同的文件具有不同的代码注释样式，并且代码块之间的行间距不一致。

我们确实在项目上使用Stylelint来实施BEM语法和最大字符行长度。

但是，有什么方法可以强制文件顶部定义的SASS变量和CSS选择器之间的换行次数？我还想将其与Prettier结合使用，以便在处理文件时可以对文件进行重新格式化。

Answer 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结合使用，以便在处理文件时可以对文件进行重新格式化。

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

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

使用Stylelint和Prettier强制行距样式指导规则

1 个答案: