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

If you don't have ALT on your MAC it is:

COMMAND + OPTION + L

Answer 2

Mac: Command + Option + L

PC: Ctrl + Alt + L

Answer 3

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.

Answer 4

"Save Actions" plugin can format code when saving.

1. Install plugin:

   File -> Settings -> Plugins -> Browse repositories;

   • input keyword "Save Actions" install
   • restart the IDE.

2. Config plugin:

   File -> Settings -> Other Settings

   • check "Format file" option.

Answer 5

1. Press CTRL+ALT+S to open Settings.
2. Select Plugins > Marketplace.
3. Enter Save Actions into search field.
4. Click Install to install plugin. Reload IDE.
5. Open Settings again.
6. Select Save Actions (it appears at the bottom of the settings list).
7. Check Reformat file > Press OK button.

Visit Plugin Homepage