Configure Style Lint for SASS in Visual Studio Code

config_stylelintr_vscode.txt

Configure Style Lint for SASS in Visual Studio Code
============================================================================================

1) Install Extension "stylelint" by Shinnosuke Watanabe from Extensions Marketplace.

2) In the project "package.json" install the following dependencies (run `npm install` after adding them):

"dependencies": {
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0"
  },
  "devDependencies": {
    "stylelint": "^9.9.0",
    "stylelint-config-sass-guidelines": "^5.3.0",
    "stylelint-order": "^2.0.0",
    "stylelint-scss": "^3.4.4"
  }
  
  3) Create a ".stylelintrc.yaml" in your project root folder (alongside the "package.json" file with following contents:
  
  extends:
  - stylelint-config-standard
  - stylelint-config-recommended-scss
ignoreFiles:
  - node_modules/**/*
  - packages/**/node_modules/**/*
  - shift/packages/plugins/_normalize.scss
  - demos/autodoc/prism.css
plugins:
  - stylelint-scss
  - stylelint-order
rules:
  # Follow best practices
  font-family-name-quotes: always-where-recommended
  # http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary
  function-url-quotes: never
  # https://www.w3.org/TR/selectors/#attribute-selectors
  # http://stackoverflow.com/q/3851091
  selector-attribute-quotes: always
  # Double-quotes are our convention throughout our codebase within (S)CSS. They also reflect how
  # attribute strings are normally quoted within the DOM.
  string-quotes: double
  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
  # Indentation
  indentation: tab
  order/properties-order:
    - position
    - top
    - right
    - bottom
    - left

    - display
    - flex
    - flex-basis
    - flex-direction
    - flex-flow
    - flex-grow
    - flex-shrink
    - flex-wrap
    - align-content
    - align-items
    - align-self
    - justify-content
    - order

    - width
    - min-width
    - max-width

    - height
    - min-height
    - max-height

    - margin
    - margin-top
    - margin-right
    - margin-bottom
    - margin-left

    - padding
    - padding-top
    - padding-right
    - padding-bottom
    - padding-left

    - float
    - clear

    - columns
    - column-gap
    - column-fill
    - column-rule
    - column-span
    - column-count
    - column-width

    - will-change
    - transform
    - transform-box
    - transform-origin
    - transform-style

    - transition
    - transition-delay
    - transition-duration
    - transition-property
    - transition-timing-function

    # Border

    - border
    - border-top
    - border-right
    - border-bottom
    - border-left
    - border-width
    - border-top-width
    - border-right-width
    - border-bottom-width
    - border-left-width

    - border-style
    - border-top-style
    - border-right-style
    - border-bottom-style
    - border-left-style

    - border-radius
    - border-top-left-radius
    - border-top-right-radius
    - border-bottom-left-radius
    - border-bottom-right-radius

    - border-color
    - border-top-color
    - border-right-color
    - border-bottom-color
    - border-left-color

    - outline
    - outline-color
    - outline-offset
    - outline-style
    - outline-width

    # Background

    - background
    - background-attachment
    - background-clip
    - background-color
    - background-image
    - background-repeat
    - background-position
    - background-size

    # Text

    - color

    - font
    - font-family
    - font-size
    - font-smoothing
    - font-style
    - font-variant
    - font-weight

    - letter-spacing
    - line-height
    - list-style

    - text-align
    - text-decoration
    - text-indent
    - text-overflow
    - text-rendering
    - text-shadow
    - text-transform
    - text-wrap

    - white-space
    - word-spacing

    # Other

    - border-collapse
    - border-spacing
    - box-shadow
    - caption-side
    - content
    - cursor
    - empty-cells
    - opacity
    - overflow
    - quotes
    - speak
    - table-layout
    - vertical-align
    - pointer-events
    - visibility
    - z-index
  declaration-property-unit-whitelist:
    font-size:
      - "em"
      - "px"
      - "%"
  # The following prefix rules are enabled since we use autoprefixer
  at-rule-no-vendor-prefix: true
  media-feature-name-no-vendor-prefix: true
  selector-no-vendor-prefix: true
  value-no-vendor-prefix: true
  # Usually if you're nesting past 3 levels deep there's a problem
  max-nesting-depth:
    - 5
    - ignore: "blockless-at-rules"
  # For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
  # attribute modifiers based on selector-max-compound-selectors, plus an addition for
  # pseudo-classes (4). Allow for pseudo-elements (1).
  selector-max-specificity: 0,4,1
  # Disallow "@extend" in scss.
  # http://csswizardry.com/2016/02/mixins-better-for-performance/
  # http://vanseodesign.com/css/sass-mixin-or-extend/
  # Besides performance, @extend actually *changes* the selector precedence by creating a compound
  # selector, which can lead to ambiguous results.
  at-rule-blacklist:
    - extend
  # Extremely useful for typos, and anything emergent can be ignored by this rule
  property-no-unknown:
    - true
    - ignoreProperties:
        - contain
  # Qualifying types are not needed when using a naming system like BEM
  selector-no-qualifying-type: true
  # In general, we should *never* be modifying elements within our components, since we can't
  # predict the use cases in which users would add a certain type of element into a component.
  # The only hard exception to this are `fieldset` elements, which can be disabled and in that case
  # we want our UI components within that fieldset to be disabled as well.
  # Other exceptions to this may be in packages/material-components-web, in which case this rule could
  # be disabled for that file, with an explanation.
  selector-max-type:
    - 1
    - ignore: descendant
    - ignoreTypes:
        - fieldset
        - html
        - body
        - p
        - a
        - ul
        - ol
        - pre
  # Styles for components should never need the universal selector.
  selector-max-universal: 1
  # Ensure any defined symbols are prefixed with "ncpp-"
  custom-media-pattern: ^ncpp-.+
  custom-property-pattern: ^ncpp-.+
  selector-class-pattern:
    - ^(ncpp-.+|active|disabled)$ #TODO: currently it's impossible to specify separate rule for chained selectors :( Ex: .ncpp-btn.active
    - resolveNestedSelectors: true
  selector-id-pattern: ^ncpp-.+
  # Names are more semantic than numbers
  # font-weight-notation: numeric
  # http://www.paulirish.com/2010/the-protocol-relative-url/
  function-url-no-scheme-relative: true
  # TODO: and FIXME: warnings are super useful because they remind us that we should address these
  # within our codebase
  comment-word-blacklist:
    -
      - /^TODO:/
      - /^FIXME:/
    - severity: warning
  # Part of google's style guide
  number-leading-zero: never

  # SCSS naming patterns, just like our CSS conventions above.
  # (note for $-vars we use a leading underscore for "private" variables)
  scss/dollar-variable-pattern:
    - ^_?ncpp-.+
    -
      ignore: local
  scss/at-function-pattern: ^ncpp-.+
  scss/at-mixin-pattern: ^ncpp-.+
  # Prevents unneeded nesting selectors
  scss/selector-no-redundant-nesting-selector: true
  # Since leading underscores are not needed, they can be omitted
  scss/at-import-no-partial-leading-underscore: true
  # Since mixins are explicit (`@include`) and parens are unnecessary for argumentless mixins, they
  # can be omitted.
  scss/at-mixin-argumentless-call-parentheses : never
  # Limit the number of adjacent empty lines within value lists
  value-list-max-empty-lines: 0
  # Disallow empty blocks
  block-no-empty: true
  # Specify short or long notation for hex colors
  color-hex-length: short
  # Require a single space or disallow whitespace after the bang of declarations
  declaration-bang-space-after: never
  # Disallow duplicate properties within declaration blocks
  declaration-block-no-duplicate-properties: true
  # Disallow longhand properties that can be combined into one shorthand property
  declaration-block-no-redundant-longhand-properties: true
  # Limit the number of declaration within a single line declaration block
  # https://stylelint.io/user-guide/rules/declaration-block-single-line-max-declarations/#declaration-block-single-line-max-declarations
  declaration-block-single-line-max-declarations: 1
  # Specify lowercase or uppercase for function names
  # https://stylelint.io/user-guide/rules/function-name-case/#function-name-case
  function-name-case: lower
  # Specify lowercase or uppercase for properties.
  property-case: lower
  # Specify lowercase or uppercase for pseudo-class selectors
  selector-pseudo-class-case: lower
  # Specify lowercase or uppercase for hex colors
  color-hex-case: lower
  # Specify lowercase or uppercase for type selectors
  selector-type-case: lower
  # Specify lowercase or uppercase for pseudo-element selectors.
  # https://stylelint.io/user-guide/rules/selector-pseudo-element-case/#selector-pseudo-element-case
  selector-pseudo-element-case: lower
  # Specify lowercase or uppercase for keywords values.
  value-keyword-case: lower
  # Specify lowercase or uppercase for units
  unit-case: lower
  # Limit the number of id selectors in a selector.
  # There is no reason that a specific ID would be needed for UI components
  # https://stylelint.io/user-guide/rules/selector-max-id/#selector-max-id
  selector-max-id: 0