Next: catching SCSS mistakes before compile and keeping style consistent across files: Stylelint for rules, Prettier for formatting (if you use it), and sensible config that helps rather than nags..
Stylelint
Install Stylelint with a standard config: npm install --save-dev stylelint stylelint-config-standard-scss.
Minimal .stylelintrc.json extends stylelint-config-standard-scss. Disable rules that fight your naming convention (for example selector-class-pattern).
Add a script: lint:scss running stylelint "scss/**/*.scss".
Rules worth enabling
color-no-invalid-hex– typos in hex colours.declaration-block-no-duplicate-properties– duplicated lines after merges.max-nesting-depth– cap nesting (try 3 or 4).no-descending-specificity– order bugs that confuse the cascade.scss/load-no-partial-leading-underscore– correct@usepaths.
Tune rules to your project. BEM class names may trip strict selector-class-pattern – disable or adjust rather than fighting the linter daily.
Prettier
Prettier formats SCSS when you use the SCSS parser. It will not catch invalid CSS, but it stops spacing debates. Install with npm and run npx prettier --write "scss/**/*.scss".
Run Prettier before Stylelint, or use a shared format-on-save in the editor. Stylelint’s autofix handles some issues; Prettier handles indentation and line breaks.
Editor feedback
The Stylelint VS Code extension underlines problems as you type. Same config file as CI – no ‘works on my machine’ for lint.
When lint fails in legacy code
On a messy import, lint incrementally: enable warnings first, fix new files strictly, schedule cleanup on touched partials. Do not blanket-disable rules project-wide unless you mean it.
Try it
- Add Stylelint with
stylelint-config-standard-scss. - Introduce a deliberate nesting-depth violation and confirm the linter catches it.
- Fix formatting on one partial with Prettier and re-run lint.