How to auto format code in WebStorm?

Question

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

Ashlieashlin

I do not see anything special about it. Standard action/shortcut mentioned in "Help | Default Keymap Reference" which has only frequent actions listed. – Coquille

Where is the difference to a prettier? – Jeggar

Answer 1

Mac: Command + Option + L

PC: Ctrl + Alt + L

Ashlieashlin

This does not answer the question of "auto-formatting" code. It still requires keypresses. – Mimetic

It does answer it, usually you do not want it to format until you issue the command. This also works in WebStorm. – Troyes

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

@PeteGardner it does answer – Triplicate

@Triplicate 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. – Mimetic

For me, and I assume most of the people here, "auto-formatting" is what happens when you press Ctrl+Alt+L – Triplicate

What about Ubuntu? this shortcut is causing it to switch Ubuntu user – Banshee

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. – Nevins

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.

Mcdaniels

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) – Beauty

I had to re-map "save all" to cmd+option+s, then change step 5 to "cmd+option+s" on OSX – Anacreon

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 – Arak

I used Jetbrain IDEs 2 years.... I learn new great idea Thanks – Kayser

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. – Integrate

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

Ellanellard

Welcome. You could make this a better answer if you provided some details about how to configure the plugin – Air

Save Action is by far the best solution IMO. Full documentation can be found here: github.com/dubreuia/intellij-plugin-save-actions – Eggcup

Answer 4

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

COMMAND + OPTION + L

Polyhydroxy

This does not answer the question of "auto-formatting" code. It still requires keypresses. – Cowcatcher

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

Marchant

Answer 6

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

Ape

Answer 7

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!

Mournful