WebStorm 2017.3 Help

Rearranging Code Using Arrangement Rules

WebStorm provides the Code rearrangement functionality that helps you make your code more readable and consistent. With it, you can configure how different blocks of code, such as the constructor, the fields, and the methods are ordered in a JavaScript or TypeScript class. In addition, you can configure whether the fields and methods should be ordered by name.

On this page:

Defining rearrangement rules

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS, and click Code Style under Editor.
  2. Under the Code Style node, choose JavaScript or TypeScript.
  3. On the Arrangement tab of the Code Style. JavaScript or Code Style. TypeScript page, define the rules for rearranging your code.

Rearranging code

You can invoke code rearrangement via the Find Action popup or as a part of code reformatting.

To invoke rearrangement via Find Action
Choose Help | Find Action or press Ctrl+Shift+A, start typing Rearrange Code, and then choose Rearrange Code from the list.

ws_rearrange_code_via_find_action.gif

To run rearrangement during code reformatting
Open the Reformat Code dialog box by pressing Ctrl+Shift+Alt+L and select the Rearrange Code checkbox. Your code will be rearranged every time the Reformat code action is invoked.

ws_rearrange_code_via_reformat_dialog.png

Last modified: 26 March 2018

See Also

Reference: