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]

(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

[Weeb6279]

@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.