Auto-Format Stylesheet On Save Using WebStorm with 3 Steps

Intro

Linter tools can help keep code clean and consistent, but can get annoying if the issues aren't caught until committing or pushing to remote repository. This article is to omit such pain by utilizing Stylelint.

The author used SCSS as the stylesheet format, but the same idea is also applicable with other formats like CSS.

Setup

• Mac
• WebStorm
• SCSS

1. Download dependencies

If using npm:

npm i stylelint stylelint-config-standard-scss -D

If using yarn:

yarn add stylelint stylelint-config-standard-scss -D

2. .stylelintrc

Create .stylelintrc.json at the root of the project, and add below:

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

3. Setting

• Go into Webstorm > Preferences
• Under Tools > File Watchers:
  • Click + to create new
  • Select SCSS
  • Set up the configs as below:

1. File type: SCSS style sheet
2. Scope: Project Files
3. Program: /<PATH_TO_PROJECT>/node_modules/stylelint/bin/stylelint.js
4. Arguments: $FileName$ --fix
5. Output paths to refresh: $FileName$

...and see the lint in action as you save your stylesheet 🎉🎉🎉

Resources

• Linter for stylesheet:
  stylelint
  

• The standard shareable SCSS config for Stylelint:
  stylelint-config-standard-scss