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

Reference https://www.jetbrains.com/help/webstorm/command-line-formatter.html#options

Format files from the command line

# my case in mac 
➜  bin pwd
/Users/xxx/Library/Application Support/JetBrains/Toolbox/apps/WebStorm/ch-0/231.8770.64/WebStorm.app/Contents/bin
➜  bin ./format.sh -s ~/Default.xml  -r /xxxx 

• Default.xml export form WebStorm.(Setting->Editor->Code Style-> Export)
• -r set project_dir

Answer 2

A slight correction on the answer based on Code reformatting on save in PhpStorm or other jetbrains ide This answer is basically correct, but you need to create a custom keybinding for Save All in order for it to work, and the keybinding given for Windows (or Linux), Ctrl+Alt+S is used to open the settings dialog which could have unwanted consequences.

---

Change the Save All key binding

1. Open the settings with ctrl +alt+s (Windows/Linux) or cmd++ (Mac).
2. Go to Keymap -> Main Menu -> File->Save All
3. Right click and select Remove Ctrl+S/Cmd+S
4. Right click and select Add Keyboard Shortcut
5. Set keyboard shortcut to Ctrl+Alt+Shift+S (Windows/Linux) or Cmd+Alt+Shift+S (Mac) and click OK on the shortcut window and settings window.

Create the Macro

1. Click on Edit -> Macros -> Start Macro Recording
2. Press Ctrl+Alt+l then Ctrl+Alt+Shift+S (Windows/Linux) or Cmd+Alt+l and Cmd+Alt+Shift+S (Mac)
3. Enter a name such as Format-save

Setting the keybinding

1. Open the settings with ctrl +alt+s (Windows/Linux) or cmd++ (Mac).
2. Go to Keymap -> Main Menu -> Edit->Macros->Format-save
3. Right click and select Add Keyboard Shortcut
4. Enter ctrl +s (Windows/Linux) or cmd+s (Mac) and click OK on the shortcut window and settings window.

And you're all set!

Answer 3

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

Answer 4

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 5

Mac: Command + Option + L

PC: Ctrl + Alt + L

Answer 6

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

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

COMMAND + OPTION + L