@reloaddk/stylelint-recommended-scss

A Reload opinionated way of making sure our SCSS code is up to snuff.

Usage

Install

npm install stylelint @reloaddk/stylelint-recommended-scss prettier --save-dev

Create these two files alongside your package.json file.

.prettierrc.json

{}

.stylelintrc.json

{
  "extends": ["@reloaddk/stylelint-recommended-scss"]
}

Spin this badboy up and point stylelint and prettier towards your SCSS files.

npx stylelint "**/*.scss" && npx prettier "**/*.scss"

Lint

npx stylelint "**/*.scss" && npx prettier "**/*.scss" --check

Format

npx stylelint "**/*.scss" --fix && npx prettier "**/*.scss" --write

Additional rules

Wanting to add additional rules is straightforward.

.stylelintrc.json

{
  "extends": ["@reloaddk/stylelint-recommended-scss"],
  "rules": {
    "color-no-invalid-hex": true
  }
}

If wanting to extend the @reloaddk/stylelint-recommended-scss we need to re-apply the prettier stylelint-config-prettier configuration that turns off all stylelint rules that is prettiers responsability.

Imagine we wanted to apply the Github CSS guidelines we would have to install their config, extend from it and then make sure to append stylelint-config-prettier.

npm install stylelint-config-primer stylelint-config-prettier --save-dev

{
  "extends": [
    "@reloaddk/stylelint-recommended-scss",
    "stylelint-config-primer",
    "stylelint-config-prettier"
  ]
}