WebStorm 2019.1 Help

Reformat and rearrange code

WebStorm lets you reformat your code according to the requirements you've specified in the Code Style settings.

To access the settings, in the Settings/Preferences dialog (Ctrl+Alt+S) go to Editor | Code Style.

You can reformat a part of code, the whole file, group of files, a directory, and a module. You can also exclude part of code or some files from the reformatting.

Reformat a code fragment in a file

  1. In the editor, select a code fragment you want to reformat.

  2. From the main menu, select Code | Reformat (Ctrl+Alt+L).

Reformat a file

  1. Either open your file in the editor and press Ctrl+Shift+Alt+L or in the Project tool window, right-click the file and select Reformat Code.

  2. In the dialog that opens, if you need, select the following reformatting options:

    • Optimize imports - select this option if you want to remove unused imports, add missing ones, or organize import statements.

      For more information, refer to the Optimize imports section.

    • Rearrange entries - select this option if you need to rearrange your code based on the arrangement rules specified in the code style settings.

    • Clean up code - select this option to run the code cleanup inspections.

    Reformat Files dialog

    Click OK.

Reformat a folder

  1. In the project view, right-click a folder and from the context menu, select Reformat Code or press Ctrl+Alt+L.

  2. In the dialog that opens, specify the necessary options and click OK.

Reformat line indents

You can reformat line indents based on the specified settings.

  1. While in the editor, select the necessary code fragment and press Ctrl+Alt+I.

  2. If you need to adjust indentation settings,

    In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Code Style.
  3. On the appropriate language page, on the Tabs and Indents tab, specify the appropriate indents options and click OK.

Exclude code from reformatting

You can exclude a group of files or part of code from reformatting.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Code Style.

  2. On the Formatter Control tab, select the Enable formatter markers in comments option.

  3. On the Formatter Control tab, after you have selected the Enable formatter markers in comments, the scope area becomes active.

    Click the Add icon to add a scope where you can specify files that you want to exclude from reformatting.

    Scopes dialog
  4. If you want to exclude part of code from reformatting, on the Formatter Control tab, select the Enable formatter markers in comments option.

  5. In the editor, at the beginning of a region that you want to exclude, create a line comment (Ctrl+/) and type //@formatter:off, at the end of the region, again create a line comment and type //@formatter:on.

Rearrange code entries

You can rearrange your code according to the arrangement rules set on the Arrangement tab located in Settings/Preferences | Editor | Code Style.

For example, if you need to sort your code entries alphabetically, select the appropriate matching rules entry and set the Order field to order by name.

  • In the editor, select the code entries you want to rearrange and from the main menu, select Code | Rearrange Code.

Last modified: 16 May 2019