Auto-Format Stylesheet On Save Using WebStorm with 3 Steps

smilelk4 — Sat, 04 Jun 2022 14:40:58 +0000

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:

File type: SCSS style sheet
Scope: Project Files
Program: /<PATH_TO_PROJECT>/node_modules/stylelint/bin/stylelint.js
Arguments: $FileName$ --fix
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