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.

It turns on all the possible errors rules within stylelint.

Use it as is or as a foundation for your own config.

Installation

First, install stylelint-scss and stylelint, if you haven't done so yet via NPM:

npm install stylelint stylelint-scss --save-dev

and then you can install the config:

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

Usage

If you've installed stylelint-config-recommended-scss locally within your project, just set your stylelint config to:

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

If you've globally installed stylelint-config-recommended-scss using the -g flag, then you'll need to use the absolute path to stylelint-config-recommended-scss in your config e.g.

{
  "extends": "/absolute/path/to/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 block-no-empty rule, and add the unit-whitelist rule:

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Changelog

License

Changelog

3.0.0

• Updated stylelint-config-recommended dependency to version 2.0.0.
• Updated stylelint peer dependency to version 8.3.0.