WebStorm 9.0.2 Web Help

Folding Custom Regions with Line Comments

With WebStorm, you can surround a fragment of source code with line comments. So doing, WebStorm supports two styles:

  • VisualStudio style
    #region Description Your code goes here... #endregion
  • NetBeans style
    // <editor-fold desc="Description"> Your code goes here... // </editor-fold>

The folding markers of a region are stored with the source code and can be shared across the team.

To surround a custom region with folding markers

  1. Select a fragment of source code.
  2. On the main menu, choose Code | Surround With , or press Ctrl+Alt+T.
  3. Select the desired folding comments from the list:
    customFolding1

    WebStorm surrounds the code fragment with comments observing the syntax of the current language.

  4. If necessary, change description of the code fragment to be folded:
    customFolding2

    You can now collapse or expand the code.

    When collapsed, the code is concealed behind the description, and you can view it by hovering your mouse pointer over the description:

    customFolding3

Once custom regions are defined, WebStorm provides navigation between them.

To navigate between custom regions

  1. Do one of the following:
    • On the main menu, choose Navigate | Custom Region .
    • Press Ctrl+Alt+Period.
  2. In the dialog box that opens, select the target custom region, and click OK:
    navigateToCustomRegion

    The caret rests at the comment line opening the region in question.

See Also

Last modified: 11 December 2014
comments powered by Disqus