JavaScript/TypeScript region folding with //region does not work

[GiDW]

• VSCode Version: 1.30.2
• OS Version: Linux x64 4.20.0-arch1-1-ARCH

Steps to Reproduce:

1. Use //region and //endregion in JavaScript and/or TypeScript files to create folding regions.

Does this issue occur when all extensions are disabled?: Yes

The release notes for 1.17 mention that support was added for folding regions. For JavaScript/TypeScript, both //#region //#endregion and //region //endregion were added. However only //#region //#endregion seem to work. //region //endregion do not work. This is annoying because some projects I work on use this syntax throughout all the code.

Code snippet

//region region
//endregion

// region region with space
// endregion

//#region #region
//#endregion

// #region #region with space
// #endregion

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• hope vscode can have "#region #endregion", just like VS (#63839)
• [folding] Hover can show region description on #endregion (#38149)
• region navigator (#51738)
• [folding] Move line up/down should skip over folded regions or folded sections (#63972)
• "Go To Region" navigator (#58658)

[saranshkataria]

Verified that it is not working. I can take a shot at fixing this.

[mjbvz]

Moved upstream to TypeScript for more feedback since we now use language aware folding. We should wait for more feedback to see if //region is used enough vs to //#region to warrant support

[Popeye4242]

@mjbvz I just want to mention that in WebStorm // region is supported by default and // #region might be supported too as you can define custom region expressions there. I think VS Code should allow that too. That way region expression from other editors can be supported too without additional work.

[ilius33]

Isn't it done already? https://code.visualstudio.com/updates/v1_17#_folding-regions

[pixelpax]

@ilius33 nope. The docs say so, but it's broken.

It's a frustrating issue, because it means that custom code folding is not possible in teams that works with multiple IDEs, nor in open source projects.

[yougotwill]

For anyone looking for a solution to this.

1. Install https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder
2. Copy this into your settings.json

   // Comment region folding
   "maptz.regionfolder": {
       "[javascript]": {
         "foldStart": "// region [NAME]",
         "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
         "foldEnd": "// endregion",
         "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
         "foldDefinitions": [
           {
             "foldStart": "/* region [NAME] */",
             "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
             "foldEnd": "/* endregion */",
             "foldEndRegex": "/\\*[\\s]*[#]*endregion"
           }
         ]
       },
       "[javascriptreact]": {
         "foldStart": "// region [NAME]",
         "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
         "foldEnd": "// endregion",
         "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
         "foldDefinitions": [
           {
             "foldStart": "/* region [NAME] */",
             "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
             "foldEnd": "/* endregion */",
             "foldEndRegex": "/\\*[\\s]*[#]*endregion"
           }
         ]
       },
       "[typescript]": {
         "foldStart": "// region [NAME]",
         "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
         "foldEnd": "// endregion",
         "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
         "foldDefinitions": [
           {
             "foldStart": "/* region [NAME] */",
             "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
             "foldEnd": "/* endregion */",
             "foldEndRegex": "/\\*[\\s]*[#]*endregion"
           }
         ]
       },
       "[typescriptreact]": {
         "foldStart": "// region [NAME]",
         "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
         "foldEnd": "// endregion",
         "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
         "foldDefinitions": [
           {
             "foldStart": "/* region [NAME] */",
             "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
             "foldEnd": "/* endregion */",
             "foldEndRegex": "/\\*[\\s]*[#]*endregion"
           }
         ]
       }
   },

This adds support for //region, // region, // #region, /* region */, /*region */, /* #region */ comments in JavaScript, TypeScript and React files.

[seungwubaek]

For anyone looking for a solution to this.

1. Install https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder
2. Copy this into your settings.json

// Comment region folding
"maptz.regionfolder": {
      "[javascript]": {
        "foldStart": "// region [NAME]",
        "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
        "foldEnd": "// endregion",
        "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
        "foldDefinitions": [
          {
            "foldStart": "/* region [NAME] */",
            "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
            "foldEnd": "/* endregion */",
            "foldEndRegex": "/\\*[\\s]*[#]*endregion"
          }
        ]
      },
      "[javascriptreact]": {
        "foldStart": "// region [NAME]",
        "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
        "foldEnd": "// endregion",
        "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
        "foldDefinitions": [
          {
            "foldStart": "/* region [NAME] */",
            "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
            "foldEnd": "/* endregion */",
            "foldEndRegex": "/\\*[\\s]*[#]*endregion"
          }
        ]
      },
      "[typescript]": {
        "foldStart": "// region [NAME]",
        "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
        "foldEnd": "// endregion",
        "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
        "foldDefinitions": [
          {
            "foldStart": "/* region [NAME] */",
            "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
            "foldEnd": "/* endregion */",
            "foldEndRegex": "/\\*[\\s]*[#]*endregion"
          }
        ]
      },
      "[typescriptreact]": {
        "foldStart": "// region [NAME]",
        "foldStartRegex": "^[\\s]*//[\\s]*[#]*region[\\s]*(.*)[\\s]*",
        "foldEnd": "// endregion",
        "foldEndRegex": "^[\\s]*//[\\s]*[#]*endregion",
        "foldDefinitions": [
          {
            "foldStart": "/* region [NAME] */",
            "foldStartRegex": "^[\\s]*/\\*[\\s]*[#]*region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
            "foldEnd": "/* endregion */",
            "foldEndRegex": "/\\*[\\s]*[#]*endregion"
          }
        ]
      }
},

This adds support for //region, // region, // #region, /* region */, /*region */, /* #region */ comments in JavaScript, TypeScript and React files.

Still not working, and you save my life. god bless you.