How to auto format code in WebStorm?

问题

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

回答1:

Mac: Command + Option + L

PC: Ctrl + Alt + L

回答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.

回答3:

"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.

回答4:

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

COMMAND + OPTION + L

来源：https://stackoverflow.com/questions/21217791/how-to-auto-format-code-in-webstorm