Skip to content

Lint Rule Comparison

Brett Jankord edited this page Nov 16, 2017 · 28 revisions

This is a comparison of scss-lint rules recommended by Sass Guidelines with similar stylelint rules and not a direct comparison of scss-lint rules with stylelint rules. scss-lint does an excellent job of linting .scss files. Stylelint also has the ability to lint .scss files and with the help of stylelint-scss, it can match a lot of the linter rules from scss-lint.

scss-lint rule used in Sass Guidelines Equivalent lint rules in stylelint
BangFormat enabled
space_before_bang
true

space_after_bang
false
declaration-bang-space-before / declaration-bang-space-after
declaration-bang-space-before
always

declaration-bang-space-after
never
BemDepth enabled
max_elements
1
-
BorderZero enabled
convention
zero
declaration-property-value-blacklist
"/^border/": ["none"]
ColorKeyword enabled color-named never
DebugStatement enabled
at-rule-blacklist ["debug"]
DeclarationOrder enabled





declaration-block-properties-order
alphabetical

Plugin: stylelint-order
order/order
[
  [
    "custom-properties",
    "dollar-variables",
    {
      "type": "at-rule",
      "name": "extend"
    },
    {
      "type": "at-rule",
      "name": "include",
      "hasBlock": false
    },
    "declarations",
    {
      "type": "at-rule",
      "hasBlock": true
    },
    {
      "type": "at-rule",
      "name": "include",
      "hasBlock": true
    },
    {
      "type": "rule",
      "selector": "/^&:\\w/"
    },
    {
      "type": "rule",
      "selector": "/^&::\\w/"
    },
    "rules"
  ]
]
DisableLinterReason enabled
stylelint-disable-reason always-before
ElsePlacement enabled
style
same_line
-
EmptyLineBetweenBlocks enabled
ignore_single_line_blocks
true






rule-nested-empty-line-before / rule-non-nested-empty-line-before
always-multi-line

except
first-nested

ignore
after-comment
EmptyRule enabled block-no-empty true
FinalNewline enabled
present
true
no-missing-end-of-source-newline

true
HexLength enabled
style
short
color-hex-length

short
HexNotation enabled
style
lowercase
color-hex-case

lower
HexValidation enabled
color-no-invalid-hex true
IdSelector enabled selector-no-id true
ImportPath enabled
leading_underscore
false

filename_extension
false
Plugin: stylelint-scss
at-import-no-partial-leading-underscore
true

at-import-partial-extension-blacklist
["scss"]
Indentation enabled
allow_non_nested_indentation
true

character
space

width
2
indentation
-
-


number


2
LeadingZero enabled
style
include_zero
number-leading-zero

always
NameFormat enabled
allow_leading_underscore
true

convention
hyphenated_lowercase
Plugin: stylelint-scss
scss/at-function-pattern, scss/at-mixin-pattern, scss/dollar-variable-pattern



^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
NestingDepth enabled
max_depth
number 1
max-nesting-depth

1
PlaceholderInExtend enabled
Plugin: stylelint-scss
scss/at-extend-no-missing-placeholder
true
PrivateNamingConvention enabled
prefix
_
-
PropertySpelling enabled
extra_properties
[]
property-no-unknown
ignoreProperties
[]
PseudoElement enabled

selector-pseudo-element-colon-notation double
selector-pseudo-element-no-unknown true
QualifyingElement enabled
allow_element_with_attribute
false

allow_element_with_class
false

allow_element_with_id
false
selector-no-qualifying-type true








SelectorDepth enabled
max_depth
3
selector-max-compound-selectors

3
SelectorFormat enabled
convention
hyphenated_lowercase

class_convention
`^(?:u
is
Shorthand enabled
shorthand-property-no-redundant-values true
SingleLinePerProperty enabled
allow_single_line_rule_sets
false

declaration-block-semicolon-newline-after
always
declaration-block-single-line-max-declarations
1
SingleLinePerSelector enabled
selector-list-comma-newline-after always
SpaceAfterComma enabled



function-comma-space-after
always-single-line
Stylelint does not detect issues with commas within a mixin
SpaceAfterPropertyColon enabled
style
one_space
declaration-colon-space-after

always-single-line
SpaceAfterPropertyName enabled
declaration-colon-space-before never
SpaceAfterVariableColon enabled
style
at_least_one_space
Plugin: stylelint-scss
scss/dollar-variable-colon-space-after always

SpaceAfterVariableName enabled Plugin: stylelint-scss
scss/dollar-variable-colon-space-before never
SpaceAroundOperator enabled
style
one_space


-
stylelint has function-calc-no-unspaced-operator but stylelint does not currently support checking the space around operator inside of scss specific code
Issue logged with stylelint-scss
SpaceBeforeBrace enabled
allow_single_line_padding
true

style
space
block-opening-brace-space-before
-




always
SpaceBetweenParens enabled
spaces
0
function-parentheses-space-inside

never
StringQuotes enabled
style
single_quotes
string-quotes

single
TrailingSemicolon enabled

declaration-block-trailing-semicolon always
declaration-block-semicolon-space-before never
TrailingZero enabled
number-no-trailing-zeros true
UnnecessaryMantissa enabled
number-no-trailing-zeros true
UnnecessaryParentReference enabled

Plugin: stylelint-scss
selector-no-redundant-nesting-selector true
UrlQuotes enabled
function-url-quotes always
VendorPrefix enabled




identifier_list
base
property-no-vendor-prefix true
selector-no-vendor-prefix true
media-feature-name-no-vendor-prefix true
at-rule-no-vendor-prefix true
value-no-vendor-prefix true


ZeroUnit enabled
length-zero-no-unit true
Clone this wiki locally