Enforcing line spacing style guide rules with Stylelint and Prettier

Question

I am working on a project with a large team of developers predominantly with SCSS and markdown files. Due to everyone having their own coding styles we now have a project where different files have different code comment styles and line spacing between blocks of code is inconsistent.

We do use Stylelint on the project to enforce BEM syntax and maximum character line length.

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? I’d also like to combine it with Prettier so I can have files re-format on save whilst I work on them.

score 2 · Accepted Answer · answered Oct 11 '18 at 08:07

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?

Yes, you can enforce a single empty line or no empty line before most language constructs using the *-empty-line-before and *-max-empty-lines rules in stylelint.

As you're using SCSS, you can also make use of the stylelint-scss plugin pack to control the empty lines before dollar variables.

For example, you can enforce the following code style:

@import "foo.css";

$variable: value;
$variable: value;

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

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

With this stylelint configuration:

{ 
  "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"],
    } ]
  }
}

However, it's not possible to enforce more than one empty line e.g. two empty lines before your CSS rule-sets. You'll need to write a custom stylelint plugin to do that.

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

Prettier and stylelint work well together. There is some overlap, but they are complementary tools. For example, you can use Prettier to pretty-print the majority of the whitespace and enforce a specific line length in your SCSS files, then use stylelint to control empty lines (as well as check for possible errors and limit language feature).

stylelint has a --fix flag and the rules in the example above can be automatically fixed.

Enforcing line spacing style guide rules with Stylelint and Prettier

1 Answers1