Skip to content

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

Open
@GiDW

Description

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

vscode_folding_regions

Code snippet

//region region
//endregion

// region region with space
// endregion

//#region #region
//#endregion

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

Activity

saranshkataria

saranshkataria commented on Jan 10, 2019

@saranshkataria
Member

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

self-assigned this
on Jan 10, 2019
transferred this issue frommicrosoft/vscodeon Jan 11, 2019
removed their assignment
on Jan 11, 2019
mjbvz

mjbvz commented on Jan 11, 2019

@mjbvz
Contributor

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

added
Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this feature
SuggestionAn idea for TypeScript
Domain: OutliningRelates to multi-line regions that editors can collapse
on Jan 11, 2019
Weeb6279

Weeb6279 commented on Jan 4, 2021

@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

ilius33 commented on Mar 23, 2021

@ilius33
pixelpax

pixelpax commented on Mar 3, 2023

@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

yougotwill commented on Aug 14, 2023

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

1 remaining item

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureDomain: OutliningRelates to multi-line regions that editors can collapseSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @DanielRosenwasser@saranshkataria@pixelpax@ilius33@GiDW

        Issue actions

          JavaScript/TypeScript region folding with //region does not work · Issue #29379 · microsoft/TypeScript