stylelint-config-recommended

What is stylelint-config-recommended?

The stylelint-config-recommended package is a shareable configuration for Stylelint, a popular CSS linter. It provides a set of recommended rules to help you enforce consistent and error-free CSS code. This package includes a basic set of rules that catch common errors and enforce best practices.

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

Basic Configuration

This feature allows you to extend the recommended configuration in your Stylelint configuration file. By doing so, you inherit a set of predefined rules that help maintain code quality and consistency.

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

Catching Syntax Errors

This feature includes rules that catch common syntax errors such as empty blocks and invalid hex colors. These rules help prevent mistakes that could lead to broken or inconsistent styles.

{
  "rules": {
    "block-no-empty": true,
    "color-no-invalid-hex": true
  }
}

Enforcing Best Practices

This feature enforces best practices by including rules that prevent duplicate properties and font family names. These rules help ensure that your CSS is clean and maintainable.

{
  "rules": {
    "declaration-block-no-duplicate-properties": true,
    "font-family-no-duplicate-names": true
  }
}

Other packages similar to stylelint-config-recommended

stylelint-config-standard

The stylelint-config-standard package provides a more comprehensive set of rules compared to stylelint-config-recommended. It includes additional rules for stylistic issues and best practices, making it suitable for projects that require stricter code quality enforcement.

stylelint-config-sass-guidelines

The stylelint-config-sass-guidelines package is tailored for Sass projects and follows the guidelines set by Sass Guidelines. It includes rules specific to Sass syntax and best practices, making it a good choice for projects that use Sass.

stylelint-config-prettier

The stylelint-config-prettier package turns off all rules that are unnecessary or might conflict with Prettier, a code formatter. This package is useful if you want to use Stylelint for catching errors and Prettier for formatting.

README

stylelint-config-recommended

The recommended shareable 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

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

Usage

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

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

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

{
  "extends": "/absolute/path/to/stylelint-config-recommended"
}

Since stylelint 9.7.0, you can simply use the globally installed configuration name instead of the absolute path:

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

Extending the config

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

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, turn off the block-no-empty rule, and add the unit-whitelist rule:

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Changelog

License