How to auto format code in WebStorm?

Question

I'm looking for a way to auto-format my code in the WebStorm IDE?

Answer 1

Mac: Command + Option + L

PC: Ctrl + Alt + L

Answer 2

It is possible by creating a macro that formats the code and save it, and then bind this macro to Ctrl+S shortcut. (Mac: Cmd+S)

This answer was posted for phpStorm and it is equally valid for WebStorm. A modified version of answer is as follows:

---

Record the macro

1. Edit > Macros > Start Macro recording
2. Press Ctrl+Alt+L, and then Ctrl+Alt+S (on Mac: Cmd+Option+L, and then Cmd+Option+S
3. Stop recording the macro clicking on the Stop button on the bottom right of the page.
4. Give this macro a name like "Format and Save"

Assign Ctrl+S to "Format and Save"

1. open File > Settings;
2. search for "keymap" and open it;
3. search "Format and Save" and double click the action "Format and Save";
4. select "Add Keyboard Shortcut";
5. select "Ctrl+S" as first stroke.
6. it will report conflicts. Ignore it and click OK button
7. WebStorm will show a warning "The shortcut is already assigned to other actions. Do you want to remove other assignments?" Click "Remove" button

That's it.