WebStorm 2021.1 Help

Reformat and rearrange code

WebStorm lets you reformat your code according to the requirements you've specified in the Code Style settings. However, if you use EditorConfig in your project, options specified in the .editorconfig file override the ones specified in the code style settings when you reformat the code.

To access the settings, in the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style. See Configuring code style for details.

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 Code or press Ctrl+Alt+L.

Reformat a file

  1. Either open your file in the editor and press Ctrl+Alt+Shift+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:

    Reformat Files dialog
    • 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.

    • Cleanup code: select this option to run the code cleanup inspections.

    If you want to see the exact changes made to your code during the reformatting, use the Local History feature.

Reformat code in 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 or a file 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 checkbox. The Scope area becomes active

  3. In the Scope area, click the Add icon to add a scope where you can specify files that you want to exclude from reformatting.

If you try reformatting the excluded file, WebStorm displays a popup notifying you that formatting for this file is disabled. If you need, click the link in the popup to open the Code Style settings page and change the exclusion scope.

Exclude code fragments from reformatting in the editor

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style and select the Enable formatter markers in comments checkbox on the Formatter Control tab.

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

Keep existing formatting

You can select formatting rules which will be ignored when you reformat the code. For example, you can adjust the IDE to keep simple methods and functions in one line, whereas normally they are expanded into multiple lines after code reformatting.

  1. Go to Settings/Preferences | Editor | Code Style, select your programming language, and open the Wrapping and Braces tab.

  2. In the Keep when reformatting section, select the formatting rules which you want to ignore and deselect those which should be applied.

  3. Reformat your code (Ctrl+Alt+L).

WebStorm will reformat your code in accordance with the current style settings, keeping existing formatting for the rules which you've selected.

Rearrange code

You can rearrange your code according to the arrangement rules set in the Code Style page of the Settings/Preferences dialog.

Rearrange code entries

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

  2. Select a language for which you want to create arrangement rules.

  3. On the Arrangement tab, specify the appropriate options such as grouping and matching rules.

  4. Click OK to save the changes.

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

Last modified: 06 August 2021