Stylelint config generator — .stylelintrc.json for CSS and SCSS

How to use the Stylelint config generator

1. Choose the Base config: stylelint-config-standard, stylelint-config-recommended, or their -scss versions.
2. Tick Run Prettier as a Stylelint rule if you want formatting problems reported by Stylelint.
3. Tick Alphabetical property order (stylelint-order) to sort declarations A to Z.
4. Leave Enforce kebab-case class names ticked, or untick it for BEM or other naming styles.
5. List Ignore files as comma-separated globs, then save .stylelintrc.json in the project root and run the install command.

What it does and when to use it

Stylelint finds mistakes in stylesheets that browsers silently ignore: misspelled properties, invalid hex colours, duplicate selectors, and rules that override each other by accident. A shared base config gives you a sensible rule set in one line, and this tool adds the few choices that differ between teams.

Formatting is best left to Prettier, which the Prettier config generator sets up, while Stylelint handles correctness. Use the EditorConfig generator so editors agree on indentation, and the Browserslist config generator if you also run Autoprefixer.

How it works

The JSON starts with a $schema link for editor autocomplete and an extends array holding the base config. Then:

• Prettier appends stylelint-prettier/recommended to extends and adds stylelint-prettier and prettier to the install command;
• property order adds the stylelint-order plugin and the rule order/properties-alphabetical-order;
• unticking kebab-case sets selector-class-pattern to null; leaving it ticked adds nothing to a standard base, which already enforces kebab-case, and adds the same selector-class-pattern rule to a recommended base, which does not;
• Ignore files becomes ignoreFiles. Commas inside braces stay together, so *.{css,scss} is one glob.

The format follows Stylelint’s configuration guide; the tool targets Stylelint 17.

Worked examples

Default. Standard base, ignore dist/**:

{
  "$schema": "https://json.schemastore.org/stylelintrc.json",
  "extends": [
    "stylelint-config-standard"
  ],
  "ignoreFiles": [
    "dist/**"
  ]
}

Install: npm install --save-dev stylelint stylelint-config-standard.

An SCSS project with BEM names. Base standard-scss, Prettier and property order on, kebab-case off, ignore dist/**, **/*.min.css, vendor/*.{css,scss}. extends lists the SCSS base and stylelint-prettier/recommended; rules contains "selector-class-pattern": null and "order/properties-alphabetical-order": true; ignoreFiles keeps "vendor/*.{css,scss}" whole. Install: npm install --save-dev stylelint stylelint-config-standard-scss stylelint-order stylelint-prettier prettier.

Limits and tips

• With a recommended base and the kebab-case box ticked, the tool adds the kebab-case selector-class-pattern rule itself, because those bases do not check class names.
• Run npx stylelint "**/*.css" --fix once on existing code; many rules can fix themselves.
• Add a lint:css script to package.json so CI can run the same check.