VisionApps' shareable config for stylelint

Usage no npm install needed!

<script type="module">
  import visionappsczStylelintConfigVisionapps from 'https://cdn.skypack.dev/@visionappscz/stylelint-config-visionapps';



npm version Build Status dependencies Status devDependencies Status Downloads per month

VisionApps' shareable config for Stylelint.

Extends stylelint-config-standard with more strict rules and giving preference to indentation with 4 spaces.

To see the rules that this config uses, please read the config itself.


Install Stylelint and this config:

$ npm install --save-dev @visionappscz/stylelint-config-visionapps


Apply the config in your Stylelint config:

  "extends": "@visionappscz/stylelint-config-visionapps"

Suggested Extension

👉 To further extend control over coding style of your stylesheets, you can also check for rules order using stylelint-order plugin along with our config @visionappscz/stylelint-config-visionapps-order.

Known Gotchas

  • A unit must be present inside calc() expressions even with zero-length values. This config disallows using a unit for zero-length values which is useful most of the time so we recommend throwing a stylelint-disable length-zero-no-unit comment to suppress this rule when necessary.

  • Max line length is exceeded with inline data URIs. You may need to turn this rule off with stylelint-disable max-line-length.

Head to Styleint docs to see how to ignore code fragments during lint.

Usage with SCSS Syntax

The config is broadly compatible with SCSS syntax. You will only need to adjust the rule that checks at rules:

  "extends": "@visionappscz/stylelint-config-visionapps",
  "rules": {
    "at-rule-no-unknown": [
      true, {
        "ignoreAtRules": [
          "else if",

To go even further, you can check SCSS specific rules with stylelint-scss plugin.

There is also stylelint-config-recommended-scss which disables check of at rules entirely.