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.
Do not mix up the two styles in one file. WebStorm will recognize the first folding comment encountered, and will assume this as a style chosen for the code.
- Select a fragment of source code.
- On the main menu, choose Ctrl+Alt+TCtrl+Alt+TCtrl+Alt+TCtrl+Alt+TCtrl+Alt+TCtrl+Alt+TCtrl+Alt+TShift+Alt+Z or Ctrl+Alt+TAlt Command TAlt Command TAlt Command Z. , or press
- Select the desired folding comments from the list:
WebStorm surrounds the code fragment with comments observing the syntax of the current language.
- If necessary, change description of the code fragment to be folded:
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:
Once custom regions are defined, WebStorm provides navigation between them.
- Do one of the following:
- On the main menu, choose .
- Press Ctrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodCtrl+Alt+PeriodAlt Command PeriodAlt Command PeriodAlt Command Period.
- In the dialog box that opens, select the target custom region, and click OK:
The caret rests at the comment line opening the region in question.