stylelint-config-roboleary

My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.

It includes the following:

• The stylelint-config-standard config gives a core collection of rules (extending stylelint-config-recommended). It is based on the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.
• The stylelint-scss plugin to add more specific rules for SCSS (stylelint supports SCSS syntax by default).
• The stylelint-order plugin to order properties into groups, used in conjunction with the rules contained in stylelint-config-idiomatic-order.
• The stylelint-color-format plugin to format all colors as HSLA. The color is set as HSL if opacity is 100%.
• The stylelint-declaration-block-no-ignored-properties checks for property values that are ignored due to another property value in the same rule e.g. using display: inline with width or height.
• The stylelint-config-prettier to disable any conflicting rules with Prettier. This should always be the last referenced config, so that it's rules are not overwritten.

Rules changed

stylelint-config-standard

• declaration-empty-line-before: Effectively turn off the rule through ignore option. This clears the way for the ordering plugin to add blank lines.

stylelint-color-format

• color-format/format: Convert HEX colors to either RGB or HSL formats. Set to hsla.

stylelint-declaration-block-no-ignored-properties

• plugin/declaration-block-no-ignored-properties: This rule needs to be set to true to enable the plugin.

Usage

1. Install this package along with stylelint npm install --save-dev stylelint-config-roboleary stylelint as devDependencies.

2. Create a stylelint config in your project directory e.g. .stylelintrc. Add the following to the file:

   {
     "extends": ["stylelint-config-roboleary"]
   }

3. You can add scripts to your package.json to lint and fix your code from the command-line:

   {
        "scripts": {
          "lint": "stylelint **/*.{css,scss}",
          "lint:fix": "npm run style-lint -- --fix",
        }
   }

4. Additionally, there are integrations for code editors. I use the stylelint extension for VS Code.

Configuration in VS Code

If you want to use stylelint and Prettier in VS Code, I recommend installing these 3 extensions: stylelint, Prettier, and Format Code Action to enable Prettier to be run as a code action.

To format and lint CSS/SCSS code on save, you can update your user settings with the following:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll"
  ],
}

Show gratitude

If this helped you, please star the repo to help others find it. 🌟

You can make a donation to support me to make more great open-source software and tutorials. 🙏