Code folding: Customizing #region...#endregion in JetBrains IDEs

Question

How to replace the default "region...endregion" option with "#region...#endregion" in the Surround With menu in JetBrains IDEs?

Answer

You can add your own Surround With option to insert //#region / //#endregion so it’s recognized by VS Code and JetBrains IDEs. Here’s how:

1. Open Settings | Editor | Live Templates.
2. Click + in JavaScript → Live Template.
3. Fill in:

   • Abbreviation: vsc-region

   • Description: VS Code style //#region surround

   • Template text:

     //#region $REGION$
     $SELECTION$
     //#endregion
     
     

4. Click Define… and enable JavaScript and TypeScript
5. Apply and save.

To check that it’s working:

1. In a .ts or .js file, select some code.

2. Press Ctrl+Alt+T (Windows/Linux) or ⌥⌘T (macOS).

3. Choose vsc-region. It should wrap your selection like:

   //#region myRegion
   ...code...
   //#endregion
   
   

4. You can fold/unfold it in JetBrains IDEs, and VS Code should recognize it too.