How to auto format code in WebStorm?
Intellij IdeaFormattingWebstormCode FormattingIntellij Idea Problem Overview
I'm looking for a way to auto-format my code in the WebStorm IDE?
Intellij Idea Solutions
Solution 1 - Intellij Idea
Mac: Command + Option + L
PC: Ctrl + Alt + L
Solution 2 - Intellij Idea
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
- Edit > Macros > Start Macro recording
- Press Ctrl+Alt+L, and then Ctrl+Alt+S (on Mac: Cmd+Option+L, and then Cmd+Option+S
- Stop recording the macro clicking on the Stop button on the bottom right of the page.
- Give this macro a name like "Format and Save"
Assign Ctrl+S to "Format and Save"
- open File > Settings;
- search for "keymap" and open it;
- search "Format and Save" and double click the action "Format and Save";
- select "Add Keyboard Shortcut";
- select "Ctrl+S" as first stroke.
- it will report conflicts. Ignore it and click OK button
- 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.
Solution 3 - Intellij Idea
"Save Actions" plugin can format code when saving.
- Install plugin:
File -> Settings -> Plugins -> Browse repositories;
- input keyword "Save Actions" install
- restart the IDE.
- Config plugin:
File -> Settings -> Other Settings
- check "Format file" option.
Solution 4 - Intellij Idea
If you don't have ALT on your MAC it is:
COMMAND + OPTION + L
Solution 5 - Intellij Idea
- Press CTRL+ALT+S to open Settings.
- Select Plugins
>
Marketplace. - Enter
Save Actions
into search field. - Click Install to install plugin. Reload IDE.
- Open Settings again.
- Select Save Actions (it appears at the bottom of the settings list).
- Check
Reformat file
> Press OK button.
Visit Plugin Homepage
Solution 6 - Intellij Idea
A slight correction on the answer based on https://stackoverflow.com/questions/12496669/code-reformatting-on-save-in-phpstorm-or-other-jetbrains-ide/26001409#26001409 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.
Save All
key binding
Change the - Open the settings with ctrl +alt+s (Windows/Linux) or cmd++ (Mac).
- Go to
Keymap
->Main Menu
->File
->Save All
- Right click and select
Remove Ctrl+S/Cmd+S
- Right click and select
Add Keyboard Shortcut
- 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
- Click on
Edit
->Macros
->Start Macro Recording
- Press Ctrl+Alt+l then Ctrl+Alt+Shift+S (Windows/Linux) or Cmd+Alt+l and Cmd+Alt+Shift+S (Mac)
- Enter a name such as
Format-save
Setting the keybinding
- Open the settings with ctrl +alt+s (Windows/Linux) or cmd++ (Mac).
- Go to
Keymap
->Main Menu
->Edit
->Macros
->Format-save
- Right click and select
Add Keyboard Shortcut
- Enter ctrl +s (Windows/Linux) or cmd+s (Mac) and click
OK
on the shortcut window and settings window.
And you're all set!