---
title: "Stylelint"
description: "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."
canonical_url: "https://codex.republic.se/writing-code/stylelint"
section: "Pages"
---

# Stylelint

To lint and quality control our CSS files, we use [Stylelint](https://stylelint.io/). 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:

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

```

## Packages

We use [Sass](https://sass-lang.com/) and SCSS syntax when we write CSS, and these packages are the ones defined in our `package.json` file:

```json
{
  "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-standard](https://www.npmjs.com/package/stylelint-config-standard)
- [stylelint-config-recommended](https://www.npmjs.com/package/stylelint-config-recommended)
- [stylelint-config-recommended-scss](https://www.npmjs.com/package/stylelint-config-recommended-scss)
- [postcss-scss](https://www.npmjs.com/package/postcss-scss)
- [stylelint-scss](https://www.npmjs.com/package/stylelint-scss) (plugin)

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

- [stylelint-order](https://www.npmjs.com/package/stylelint-order) (plugin)
- [css-property-sort-order-smacss](https://www.npmjs.com/package/css-property-sort-order-smacss)

---

- [ .stylelintrc.json ](/writing-code/stylelint/stylelintrc-json)
- [ .stylelintignore ](/writing-code/stylelint/stylelintignore)