10

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)?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Anna
  • 2,911
  • 6
  • 29
  • 42

2 Answers2

18

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

enter image description here

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

enter image description here

So now it fixes the whole file on the keymap press

Anna
  • 2,911
  • 6
  • 29
  • 42
  • 2
    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 -> – iusting Nov 30 '21 at 20:35
15

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:

enter image description here

lena
  • 90,154
  • 11
  • 145
  • 150
  • 1
    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 – marksy Oct 13 '21 at 07:28
  • Also https://youtrack.jetbrains.com/issue/WEB-50148 for the "latest" on this issue - doesn't seem to be resolved as of this comment's date :( – Darren Shewry Mar 25 '22 at 17:50