WebStorm 9.0.0 Web Help

You can reformat source code to meet the requirements of your code style. WebStorm will lay out spacing, indents, keywords etc. Reformatting can apply to the selected text, entire file, or entire project.

It is also possible to apply reformatting to the parts of the source code only, using the formatting markers.

To reformat source code
  1. On the main menu, choose Code | Reformat Code, or press Ctrl+Alt+LCtrl+Alt+LShift+Alt+LCtrl+Alt+LCtrl+Alt+LAlt+F8 or Ctrl+Alt+FShift+Alt+FCtrl+Alt+L or Ctrl+Shift+FAlt Command LAlt Command LShift Command F.
  2. In the Reformat Code dialog box, specify the reformatting scope:
    • The current file.
    • Selected text.
    • All files in the current directory, including or omitting subdirectories. You can also include optimizing imports, by selecting the Optimize imports check box, which is enabled for the current directory only.
  3. Click Run.
To skip a region when reformatting source code
  1. At the beginning of the region, create a line comment (Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Alt+SemicolonCtrl+Slash, Ctrl+NumPad / or Ctrl+ColonCtrl+Slash, Ctrl+NumPad / or Ctrl+Shift+CCtrl+Slash or Ctrl+NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /), and then manually type the marker specified in the Formatter off field of General page.
  2. At the end of the region, create a line comment (Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Alt+SemicolonCtrl+Slash, Ctrl+NumPad / or Ctrl+ColonCtrl+Slash, Ctrl+NumPad / or Ctrl+Shift+CCtrl+Slash or Ctrl+NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /), and then manually type the marker specified in the Formatter on field of General page.
  3. Perform code reformatting, as described above.

Alternatively, create a live template to surround a block of code with formatter off/on markers, see Creating and Editing Live Templates.

Example of using formatting markers

The original source code The code after reformatting

js_formatting_markers_original

When the formatting markers are disabled, the original formatting is broken:

js_formatting_markers_off

When the formatting markers are enabled, the original formatting is preserved:

js_formatting_markers_original

See Also

Reference:

Web Resources: