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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.