ru
Stylelint. How to set up in the right way

Stylelint. How to set up in the right way

Andrey KovtunAndrey Kovtun at1 min read

Linter will help to avoid standard errors in the code, to make values look the same, etc. It can be used successfully for CSS, Sass (both syntaxes), PostCSS.

Linter installation

Install the latest version of Stylelint:

npm i -D stylelint

Installing additional plugins

In my work, I often encounter cases where frontend developers write transitions and animations for complex or non-animated properties. The first negatively affects the performance of the site, the second is redundant. In this case, installing additional rules helps.

npm i -D stylelint-performance-animation

Configuration file

The Stylelint settings are in the .stylelintrc.json file, which you should place next to package.json.

The settings I've been using on a number of projects for Drupal and standalone for several years now.

{
  "plugins": ["stylelint-performance-animation"],
  "rules": {
    "plugin/no-low-performance-animation": true,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["media", "import"]
      }
    ],
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "comment-no-empty": true,
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": ["consecutive-duplicates-with-different-values"]
      }
    ],
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-empty-line-before": [
      "never",
      {
        "ignore": ["after-declaration"]
      }
    ],
    "font-family-no-duplicate-names": true,
    "font-family-no-missing-generic-family-keyword": true,
    "function-calc-no-unspaced-operator": true,
    "function-linear-gradient-no-nonstandard-direction": true,
    "keyframe-declaration-no-important": true,
    "media-feature-name-no-unknown": true,
    "no-duplicate-at-import-rules": true,
    "no-duplicate-selectors": true,
    "no-empty-source": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
    "property-no-unknown": [true, { "ignoreProperties": ["aspect-ratio"] }],
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-no-unknown": true,
    "string-no-newline": true,
    "unit-no-unknown": true,
    "max-empty-lines": 2,
    "string-quotes": "single"
  }
}

Ignoring unknown properties

You can add other properties to the array, comma separated, if they are unknown to Stylelint.

{
  "rules": {
    "property-no-unknown": [true, { "ignoreProperties": ["aspect-ratio"] }]
  }
}

Other settings can be peeked at in the documentation.

Ignoring files or certain lines

This is not recommended, but sometimes it is still necessary to add a marker to ignore a certain line or property.

Ignoring the entire CSS file:

/* stylelint-disable */

Ignoring the following line:

/* stylelint-disable-next-line */

Ignoring a certain rule:

/* stylelint-disable no-duplicate-selectors */

Have a nice CSS!

References:

Last Updated: