stylelint-config-sensible-scss
The sharable Scss config for Stylelint with sensible defaults
Installation
$ npm install --save-dev stylelint-config-sensible-scss
Usage
Set your Stylelint config to:
{
"extends": "stylelint-config-sensible-scss"
}
Extending the config
Add a "rules"
key to your config and add your overrides there.
To change color-hex-length
to "long"
, turn off the block-no-empty
rule and add the unit-whitelist
rule:
{
"extends": "stylelint-config-sensible-scss",
"rules": {
"block-no-empty": null,
"color-hex-length": "long",
"unit-whitelist": ["em", "rem"]
}
}
Documentation
Plugins
-
stylelint-config-standard-scss
: The standard, sharable SCSS config for Stylelint -
stylelint-order
: A plugin pack of order related linting rules for stylelint.
Configured lints
This is a list of the lints turned on in this configuration, and what they do.
At-rule
-
at-rule-disallowed-list
: Specify a list of disallowed at-rules.-
"debug"
Disallow the use of@debug
.
-
Color
-
color-named
: Colors must never be named. -
color-no-hex
: Disallow Hex colors.
Declaration block
-
declaration-block-single-line-max-declarations
: There should never be more than1
declaration per line.
Declaration Property
-
declaration-property-value-blacklist
: Specify a blacklist of disallowed property and value pairs within declarations.-
^border
: Disallow the use of the wordnone
for borders, use0
instead.
-
General
-
max-nesting-depth
: Limit the allowed nesting depth to4
.
Property
-
property-no-vendor-prefix
: Disallow vendor prefixes for properties.
Selector
-
selector-class-pattern
: Selectors must be written in BEM style and match the regex. -
selector-id-pattern
: Specify a pattern for ID selectors. -
selector-no-qualifying-type
: Disallow qualifying a selector by type. -
selector-pseudo-element-no-unknown
: Disallow unknown pseudo-element selectors.
Value
-
value-keyword-case
: Specify lowercase or uppercase for keywords values.
SCSS
-
at-function-pattern
: SCSS functions must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
at-mixin-pattern
: SCSS mixins must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
dollar-variable-pattern
: SCSS variables must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
percent-placeholder-pattern
: SCSS%
-placeholders must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
selector-no-redundant-nesting-selector
: Disallow redundant nesting selectors (&
).
Order
-
order/order
: Order of content within declaration blocks. custom-properties (--property: 10px;
), then dollar-variables ($variable), then declarations -
order/properties-order
: Order of properties within declaration blocks.