The standard shareable config for stylelint.
Extends stylelint-config-recommended
.
Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.
It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.
Use it as is or as a foundation for your own config.
To see the rules that this config uses, please read the config itself.
@import url(x.css); @import url(y.css); /** * Multi-line comment */ .selector-1, .selector-2, .selector-3[type="text"] { background: linear-gradient(#fff, rgba(0, 0, 0, 0.8)); box-sizing: border-box; display: block; color: #333; } .selector-a, .selector-b:not(:first-child) { padding: 10px !important; top: calc(calc(1em * 2) / 3); } .selector-x { width: 10%; } .selector-y { width: 20%; } .selector-z { width: 30%; } /* Single-line comment */ @media (min-width >= 60em) { .selector { /* Flush to parent comment */ transform: translate(1, 1) scale(3); } } @media (orientation: portrait), projection and (color) { .selector-i + .selector-ii { background: color(rgb(0, 0, 0) lightness(50%)); font-family: helvetica, "arial black", sans-serif; } } /* Flush single line comment */ @media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .selector { background-image: repeating-linear-gradient( -45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px ); margin: 10px; margin-bottom: 5px; box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset; height: 10rem; } /* Flush nested single line comment */ .selector::after { content: '→'; background-image: url(x.svg); } }
Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.
npm install stylelint-config-standard --save-dev
If you've installed stylelint-config-standard
locally within your project, just set your stylelint
config to:
{ "extends": "stylelint-config-standard" }
If you‘ve globally installed stylelint-config-standard
using the -g
flag, then you’ll need to use the absolute path to stylelint-config-standard
in your config e.g.
{ "extends": "/absolute/path/to/stylelint-config-standard" }
Since stylelint 9.7.0, you can simply use the globally installed configuration name instead of the absolute path:
{ "extends": "stylelint-config-standard" }
Simply add a "rules"
key to your config, then add your overrides and additions there.
For example, to change the at-rule-no-unknown
rule to use its ignoreAtRules
option, change the indentation
to tabs, turn off the number-leading-zero
rule,and add the unit-allowed-list
rule:
{ "extends": "stylelint-config-standard", "rules": { "at-rule-no-unknown": [ true, { "ignoreAtRules": ["extends", "ignores"] } ], "indentation": "tab", "number-leading-zero": null, "unit-allowed-list": ["em", "rem", "s"] } }
stylelint-config-standard
is a great foundation for your own config. You can extend it to create a tailored and much stricter config:
autoprefixer
you'll want to disallow vendor prefixes using:at-rule-disallowed-list
at-rule-allowed-list
color-named
color-no-hex
comment-word-disallowed-list
declaration-no-important
declaration-property-unit-disallowed-list
declaration-property-unit-allowed-list
declaration-property-value-disallowed-list
declaration-property-value-allowed-list
function-disallowed-list
function-url-scheme-disallowed-list
function-url-scheme-allowed-list
function-allowed-list
media-feature-name-disallowed-list
media-feature-name-allowed-list
property-disallowed-list
property-allowed-list
selector-attribute-operator-disallowed-list
selector-attribute-operator-allowed-list
selector-combinator-disallowed-list
selector-combinator-allowed-list
selector-max-class
selector-max-attribute
selector-max-combinators
selector-max-id
selector-max-pseudo-class
selector-no-qualifying-type
selector-max-type
selector-max-universal
selector-pseudo-class-disallowed-list
selector-pseudo-class-allowed-list
selector-pseudo-element-disallowed-list
selector-pseudo-element-allowed-list
unit-disallowed-list
unit-allowed-list
The config is broadly compatible with SugarSS syntax. You will need to turn off the rules that check braces and semicolons, as so:
{ "extends": "stylelint-config-standard", "rules": { "block-closing-brace-empty-line-before": null, "block-closing-brace-newline-after": null, "block-closing-brace-newline-before": null, "block-closing-brace-space-before": null, "block-opening-brace-newline-after": null, "block-opening-brace-space-after": null, "block-opening-brace-space-before": null, "declaration-block-semicolon-newline-after": null, "declaration-block-semicolon-space-after": null, "declaration-block-semicolon-space-before": null, "declaration-block-trailing-semicolon": null } }