2025-06-12

Stylelint

To lint and quality control our CSS files, we use Stylelint. It’s a Node-based linter that we’ll include in every project via the package.json file.

In our setup, Stylelint helps with the following:

Syntax
Order of rules
Typos
White space

Enable it in the editor

The best way to use Stylelint is to enable it in the editor or IDE. PhpStorm has built-in support, but it needs to be enabled for each project. The same is true for VS Code.

Enable in PhpStorm

Go to Settings and search for Stylelint.
Enable the Stylelint support.
Ensure the project has a Stylelint package pointing to the current project’s node_modules/stylelint folder.
Use it for both .css and .scss files.

Enable in Visual Studio Code (VS Code)

Install the official plugin called Stylelint.
Make sure the following setting is in settings.json:

"stylelint.validate": [
    "css",
    "scss",
    "postcss"
],

Packages

We use Sass and SCSS syntax when we write CSS, and these packages are the ones defined in our package.json file:

{
  "postcss": "8.4.19",
  "postcss-dart-sass": "1.0.0",
  "postcss-scss": "^4.0.6",
  "sass": "^1.56.1",
  "stylelint": "14.15.0",
  "stylelint-config-property-sort-order-smacss": "9.0.0",
  "stylelint-config-standard-scss": "6.1.0"
}

`stylelint-config-standard-scss` repository extends

`stylelint-config-property-sort-order-smacss` extends:

stylelint-order (plugin)
css-property-sort-order-smacss

#Stylelint

#Enable it in the editor

#Enable in PhpStorm

#Enable in Visual Studio Code (VS Code)

#Packages

#stylelint-config-standard-scss repository extends

#stylelint-config-property-sort-order-smacss extends: