Stylelint fix in WebStorm

Question

I configured stylelint in my WebStorm (2018.2.3) in Settings -> Languages and Frameworks -> Stylesheets -> Stylelint. And I have .stylelintrc in my root.

Right now stylelint successfully underlines errors in my css file. But is there a way to fix them also with WebStorm help (without running --fix command in console)?

Chifforobe

Answer 1

I created the external tool in Settings | Tools | External Tools, like this:

And then added the shortcut keymap for this command in here:

So now it fixes the whole file on the keymap press

Chifforobe

If anyone is is like me and doesn't know what value to set in the Program: field because the value in the image is cropped and could not find the .cmd, use $ProjectFileDir$/node_modules/.bin/stylelint (this means check the project root folder, and use the executable inside the node installed dependency) And if you wanna access the option without creating the keyboard shortcut: right click in the Webstorm editor -> External Tools -> <the tool just created> – Buckling

Answer 2

Stylelint autofixes are not yet supported, please follow WEB-25069 for updates.

You can set up a file watcher to have stylelint --fix triggered in Save All:

Embarkment

If you're on Ubuntu, change the program to use npx (/home/marksy/.nvm/versions/node/v14.17.1/bin/npx) and in arguments: stylelint $FileName$ --fix – Inapproachable

Also youtrack.jetbrains.com/issue/WEB-50148 for the "latest" on this issue - doesn't seem to be resolved as of this comment's date :( – Fuhrman

Answer 3

Ceate watcher (Settings > Tools > File Wathcers) with settings below:

Program                  -    $ProjectFileDir$\node_modules\.bin\stylelint
Arguments                -    $FilePath$ --fix
Outout path to refresh   -    $FilePath$
Working directory        -    $FileDir$

Fireweed