0

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

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

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

4

1 回答 1

2

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

是的，您可以在大多数语言构造之前使用*-empty-line-before*-max-empty-linesstylelint 中的and规则强制一个空行或没有空行。

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

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

@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 规则集之前不能强制执行多于一个空行，例如两个空行。你需要编写一个自定义 stylelint 插件来做到这一点。

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

Prettier 和 stylelint 可以很好地协同工作。有一些重叠，但它们是互补的工具。例如，您可以使用 Prettier 漂亮地打印大部分空白并在 SCSS 文件中强制执行特定的行长度，然后使用 stylelint 来控制空行（以及检查可能的错误和限制语言功能）。

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

于 2018-10-11T08:07:57.197 回答