99

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

Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
HasanAboShally
  • 18,459
  • 7
  • 30
  • 34

6 Answers6

164

Mac: Command + Option + L

PC: Ctrl + Alt + L

Jose
  • 1,959
  • 20
  • 21
HasanAboShally
  • 18,459
  • 7
  • 30
  • 34
  • 58
    This does not answer the question of "auto-formatting" code. It still requires keypresses. – Pete Gardner Apr 17 '15 at 15:19
  • 1
    It does answer it, usually you do not want it to format until you issue the command. This also works in WebStorm. – Warren LaFrance Aug 26 '15 at 21:01
  • This is assuming you have the standard IntelliJ keymappings.. It's Alt+F8 by default in Windows using the Visual Studio keymappings.. Which you can easily find by going to the keymap section of the settings window and searching for "format" or "reformat" – mejdev Mar 20 '16 at 18:32
  • @PeteGardner it does answer – Vad Dec 19 '16 at 20:25
  • 3
    @Vad No. Although this answer is appreciated, it is about "formatting", not "auto-formatting". Auto-formatting, as the name implies, is automatic -- no key presses necessary. – Pete Gardner Dec 20 '16 at 20:32
  • 1
    For me, and I assume most of the people here, "auto-formatting" is what happens when you press Ctrl+Alt+L – Vad Dec 20 '16 at 21:13
  • What about Ubuntu? this shortcut is causing it to switch Ubuntu user – Murhaf Sousli Jun 07 '17 at 04:33
  • This is not very related to the question, the best answer is from Andrew-Dufresne to achieve auto-format on save by bind key combination to a custom macros. – Ruslan Shashkov Oct 30 '19 at 09:14
108

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.

Itamar
  • 1,601
  • 1
  • 10
  • 23
Andrew-Dufresne
  • 5,464
  • 7
  • 46
  • 68
  • 4
    THIS should be the correct answer! I've always known about the keyboard shortcut but that doesn't "auto" format my code, it only formats when I tell it to (which I often don't) – mejdev Mar 20 '16 at 18:30
  • 3
    I had to re-map "save all" to cmd+option+s, then change step 5 to "cmd+option+s" on OSX – rynop Sep 13 '16 at 03:36
  • 2
    Not bad, however it doesn't format other files besides the one that is currently opened in editor. All other files are saved without formatting – Kirill Slatin Oct 28 '16 at 17:28
  • I used Jetbrain IDEs 2 years.... I learn new great idea Thanks – MJ Studio Mar 03 '20 at 04:33
  • I agree. This should be the correct answer. I used this answer for a lot of years through multiple JetBrains versions. It still accurate no matter what year you are. – yanckst Jul 21 '20 at 16:18
29

"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.
stalin
  • 3,442
  • 2
  • 25
  • 25
soneway
  • 301
  • 3
  • 4
  • Welcome. You could make this a better answer if you provided some details about how to configure the plugin – Mark Chorley Jun 01 '16 at 09:09
  • Save Action is by far the best solution IMO. Full documentation can be found here: https://github.com/dubreuia/intellij-plugin-save-actions – laike9m Aug 05 '18 at 04:59
2

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

COMMAND + OPTION + L

danday74
  • 52,471
  • 49
  • 232
  • 283
2
  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.

Save Actions JetBrains Plugin

Visit Plugin Homepage

Eugene Zalivadnyi
  • 433
  • 6
  • 13
0

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!

Patrick Gorman
  • 132
  • 1
  • 8