stylelint-config-recommended-scss

What is stylelint-config-recommended-scss?

The stylelint-config-recommended-scss package is a Stylelint configuration that provides a set of recommended rules for SCSS (Sass) files. It helps enforce consistent coding styles and best practices in SCSS, ensuring that your stylesheets are clean, maintainable, and free of common errors.

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

Basic SCSS Linting

This feature ensures that your SCSS files adhere to a set of recommended rules, catching common errors and enforcing best practices. For example, it can catch issues like missing semicolons, incorrect nesting, and more.

/* Example SCSS file */
$primary-color: #333;

body {
  color: $primary-color;
  font-size: 16px;
}

Variable Naming Conventions

This feature enforces consistent naming conventions for variables, ensuring that they are named in a way that is easy to understand and maintain. For example, it can enforce the use of hyphens or underscores in variable names.

/* Example SCSS file */
$primary-color: #333;
$secondary-color: #666;

body {
  color: $primary-color;
}

Nesting Rules

This feature enforces best practices for nesting rules in SCSS, ensuring that your stylesheets are organized and easy to read. For example, it can enforce a maximum depth for nested rules to prevent overly complex stylesheets.

/* Example SCSS file */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Other packages similar to stylelint-config-recommended-scss

stylelint-config-standard

The stylelint-config-standard package provides a standard set of rules for CSS and SCSS linting. It is similar to stylelint-config-recommended-scss but is more general, covering both CSS and SCSS. It is a good choice if you need a broader set of linting rules.

stylelint-config-sass-guidelines

The stylelint-config-sass-guidelines package is based on the Sass Guidelines by Hugo Giraudel. It provides a comprehensive set of rules specifically for SCSS, making it a good alternative to stylelint-config-recommended-scss if you are looking for a more opinionated set of rules.

stylelint-config-recommended

The stylelint-config-recommended package provides a minimal set of rules for CSS linting. It is less comprehensive than stylelint-config-recommended-scss but can be a good starting point if you want to build your own custom configuration.

README

stylelint-config-recommended-scss

The recommended shareable SCSS config for Stylelint.

This config:

• extends the stylelint-config-recommended shared config and configures its rules for SCSS
• bundles the stylelint-scss plugin pack and turns on its rules that check for possible errors
• bundles the postcss-scss custom syntax and configures it

This config is extended by the stylelint-config-standard-scss shared config. That config is better suited to most users as it also turns on the stylistic rules in the stylelint-scss plugin pack.

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

Installation

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

Usage

Set your stylelint config to:

{
  "extends": "stylelint-config-recommended-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/at-if-no-null rule:

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "scss/at-if-no-null": null
  }
}

Changelog

License