stylelint-config-standard-scss

What is stylelint-config-standard-scss?

The stylelint-config-standard-scss npm package is an extension for Stylelint that provides a standard shareable config for SCSS syntax. It enforces consistent conventions and avoids errors in your stylesheets specifically tailored for SCSS. It is built on top of stylelint-config-standard and adds SCSS specific linting rules from stylelint-scss.

What are stylelint-config-standard-scss's main functionalities?

Linting SCSS Syntax

By extending stylelint-config-standard-scss in your Stylelint configuration file, you can apply a set of predefined rules that are specifically designed for linting SCSS syntax. This helps in maintaining a consistent style and avoiding common mistakes in your SCSS files.

"extends": ["stylelint-config-standard-scss"]

Customization

While stylelint-config-standard-scss provides a comprehensive set of rules out of the box, it also allows for customization. You can override or disable specific rules to tailor the linting process to your project's needs. This example shows how to disable the generic at-rule-no-unknown rule in favor of the SCSS-specific one.

{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
}

Other packages similar to stylelint-config-standard-scss

stylelint-config-recommended-scss

This package is similar to stylelint-config-standard-scss but focuses on enforcing recommended SCSS rules without imposing stylistic choices. It's a lighter configuration compared to stylelint-config-standard-scss, making it a good starting point for projects that prefer to define their own stylistic rules.

stylelint-scss

stylelint-scss is a collection of SCSS-specific linting rules for Stylelint. While not a config package itself, it is often used in conjunction with other configurations, including stylelint-config-standard-scss, to provide a comprehensive linting solution for SCSS. It offers more granular control over SCSS linting rules.

README

stylelint-config-standard-scss

The standard shareable SCSS config for Stylelint.

This config:

• extends the stylelint-config-standard shared config and configures its rules for SCSS
• extends the stylelint-config-recommended-scss shared config

To see the rules that this config uses, please read the config itself.

Installation

npm install --save-dev stylelint-config-standard-scss

Usage

Set your stylelint config to:

{
  "extends": "stylelint-config-standard-scss"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to turn off the scss/dollar-variable-pattern rule:

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "scss/dollar-variable-pattern": null
  }
}

Changelog

License

Changelog

2.0.0

This release adds over a dozen new rules.

If needed, you can extend the config to turn off any of the new rules.

• Removed: stylelint less than 14.0.0 from peer dependencies.
• Changed: updated to stylelint-config-recommended-scss@5.0.0.
• Changed: updated to stylelint-config-standard@23.0.0.
• Added: scss/at-else-closing-brace-newline-after rule.
• Added: scss/at-else-closing-brace-space-after rule.
• Added: scss/at-else-empty-line-before rule.
• Added: scss/at-else-if-parentheses-space-before rule.
• Added: scss/at-function-parentheses-space-before rule.
• Added: scss/at-function-pattern rule.
• Added: scss/at-if-closing-brace-newline-after rule.
• Added: scss/at-if-closing-brace-space-after rule.
• Added: scss/at-mixin-argumentless-call-parentheses rule.
• Added: scss/at-mixin-parentheses-space-before rule.
• Added: scss/at-mixin-pattern rule.
• Added: scss/at-rule-conditional-no-parentheses rule.
• Added: scss/dollar-variable-colon-space-after rule.
• Added: scss/dollar-variable-colon-space-before rule.
• Added: scss/dollar-variable-empty-line-before rule.
• Added: scss/dollar-variable-pattern rule.
• Added: scss/double-slash-comment-empty-line-before rule.
• Added: scss/double-slash-comment-whitespace-inside rule.
• Added: scss/percent-placeholder-pattern rule.