// #regions

[waderyan]

From @mbeckenbach on September 16, 2016 12:48

• VSCode Version: 1.5.2
• OS Version: Win10

Would be great to have //#region support in typescript

Copied from original issue: microsoft/vscode#12146

[waderyan]

@mbeckenbach can you provide more information of what you are looking for? I am not familiar with //#region support.

Also, is this VS Code specific or is this a feature request for TypeScript? This may be better in TypeScript.

[waderyan]

From @mbeckenbach on September 19, 2016 8:38

The full visual studio uses comments to mark code blocks as collapsable in all languages. Depending on the language, the syntax is slightly different as the comment syntax is different.

Hard to explain, but web essentials has a nice screenshot of regions in the javascript area: http://vswebessentials.com/features/javascript

Regions should exist for all languages. The comment syntax is different but the result schould be the same.

[waderyan]

From @divieirasilva on September 19, 2016 17:50

I think, @mbeckenbach are talking about the #region, current present on c# syntax of Visual Studio. Currently, on C#, #region name_region is used to tell where code will start folding and #endregion tells where code will stop folding.
I'm really missing this feature on VS Code as well, all my code have regions for better code reading and on VSCode I can't fold my regions.

e.g.

#region region_sample

void MyDummyMethod()
{
int a = 1 + 1;
}

void MyDummyMethod2()
{
int b = 1 + 1;
}

#endregion

In the sample above, the entire region block should fold and "region_sample" should be the label on folding.

[waderyan]

From @mbeckenbach on September 20, 2016 5:56

yes, that's what i'm talking about. i'm really missing that feature in other languages like for example ts

[waderyan]

@RyanCavanaugh I'm guessing you have thought about adding something like this before.

[mhegazy]

// #region support is really a webessentials feature. personally i find it fairly foreign to the JS language and tooling. implementing it is not straight forward, since these are comments at the end of the day. keeping the issue open awaiting more user feedback to see if there is enough demand.

[MagicWang]

This is very necessary,when each file has thousands of lines.//#region will makes it looks good.Looking forward to this feature as soon as possible.

[cwebster2]

IMHO, region folding should be something your editor does, e.g. VS Code, VS, Emacs, Vim, Notepad++, Atom, Sublime and not something intrinsic to the language. And personally, if a file gets so unwieldy to be thousands of disparate lines of code, its time to split up into multiple files or refactor into smaller sized units.

[divieirasilva]

Totally agree with @cwebster2, it should be an editor wide feature.

[waderyan]

@cwebster2 can you clarify how this would work?

If I write

#region
...
some code
...
#endregion

Code folding will be done for the region. Is this correct?

[cwebster2]

@waderyan thats how it works in VS2015 (for .NET stuff at least). When I use folding I tend to find to more useful to be able to fold on things like class / method / function definitions and lexical scopes rather than arbitrary points within the file.

[Bidthedog]

Would also really like region support in VSCode for TypeScript.

[asmolenic]

I also find myself often trying to fold a portion of code. I really hope this feature gets implemented. I also think this to be an editor feature and not a language one.

[etatuev]

+1 for #region support. I lack it in TypeScript + VS Code, especially after C# + Visual Studio.

[seawerst]

If you're interested in this feature in visual studio go vote/comment on this post: https://developercommunity.visualstudio.com/content/problem/8384/in-typescript-files-region-is-not-working.html

[roelbarreto]

Hi @waderyan This is how they do it in MS Visual Studio

For javascript we need it to be

// #region region name
blockOfCode () {
  // TODO
}
// #endregion

Result into

+ // region name ...

[capitlux]

Would be great for code organization +1

[olokobayusuf]

+1

[crixlis]

+1

[ghost]

Since this is still active... Webstorm 2017.2 supports exactly that:

//#region scrolling

function some_code(){}

//#endregion

[aluanhaddad]

@MaticLeva

Since this is still active... Webstorm 2017.2 supports exactly that:

That is a good reason not to put this in the language

[mpituley]

+1

[imumamaheswaran]

I desperately need this after I started doing Angular 4 + TypeScript. I want to collapse all my import statements that occupies half of the page in each .ts file.

[Soul-Master]

+1
If you design TypeScript to target medium/large scale projects, this feature is a must. Another solution, create some TypeScript plugin to provide this kind of feature. But I don't sure it is possible or not.

[Melmoth-the-Wanderer]

I don't think it's necessary feature. I also don't think it should be even considered.
IMO using regions is a way (quite nice shortcut) to get in trouble. If you have to use regions it means your code is not clean. This is NOT language-specific feature, it's only used by VS and its usage is not directly specified. Please keep your code clean instead of using ugly workarounds.

[dotnetprofessional]

It may not be a 'necessary' feature for everyone, but depending on your needs it can be quite helpful. I'm in need of it for one of my projects. For others its less useful, the point is for those that want/need it its a very helpful feature. For those who don't, they can pretend the feature doesn't exist.

I see its been added to the TS 2.6 milestone, I agree with others it really should be a VSCode feature, but if it comes via TS I'll live with it as I want it for TS anyway.

[khcjump]

+1 as C#

[pleerock]

I came here accidentally, but this really looks weird feature non-related to the language semantics.

It looks like users want to monkey-patching big files instead of extracting contents into separate files that is true way of proper code organization.

When we are considering " 👍 " we should keep in mind that people who are interested in this feature come more here then people who aren't. Ratio maybe very high, so maybe its not a good idea to pollute language based on limited number of opinions most of which are given based on their own needs.

[bradleyayers]

Is there any commentary on the design rationale for including this in TypeScript (the language) rather than in the editor (VS Code)? This is a very surprising decision to me, and I'd love to get a better understanding of the thinking behind it.

[mhegazy]

Is there any commentary on the design rationale for including this in TypeScript (the language) rather than in the editor (VS Code)? This is a very surprising decision to me, and I'd love to get a better understanding of the thinking behind it.

Not sure i understand what you mean by the "language". TypeScript has no special treatment for the text in the comment. The TypeScript language service, which is what drives the JS and TS experience in VS, VSCode, etc.. is what supports this as an outlining span, i.e. you get the little +/- to expand and contract the region.

Why is it added to the language service, cause users seem to like it and asked for it.

[uniqueiniquity]

The general idea was to build this into the existing "getOutliningSpans" functionality of the TypeScript Language Service so that it can be consumed by multiple editors. However, afaik VS Code doesn't actually use the Language Service for outlining spans; they've decided to calculate the block outlining on their own. They have introduced their own support for //#region as of VS Code 1.17.

[bradleyayers]

That makes a lot more sense — thanks for the clarification!

I got the wrong impression from reading the item on https://github.com/Microsoft/TypeScript/wiki/Roadmap for 2.6. For some reason I assumed it was a language/compiler feature rather than being a language services feature. Being part of language services seems pretty reasonable to me!

Re-reading the roadmap updates it seems obvious now, especially given it comes after the 'Refactors to…' and 'Quick fixes to…' sections. My bad!

[thewebchameleon]

+1

[mattmc3]

Added a similar feature request for the SQLOps team to add this for SQL folding too. Not sure why this wouldn't just be implemented as folding for #region/#endregion detected as comment in any language. microsoft/azuredatastudio#1618

[PostImpatica]

For those coming here late like me, yes this was implemented.

use:

//#region whatever
//#endregion

[Sti2nd]

Just wondering, is this really a Typescript language feature? It wasn't mentioned in the Typescript 2.6 release notes.

From this comment, it seems like the feature was implemented in the language server: #29379 (comment)

[felipemullen]

Thanks to the devs who added this. Very helpful in code organization, even in small files (i.e. separating static methods from instance methods).

For anyone arriving from the web, I made a vscode snippet to add these in with fewer keystrokes:

"region": {
    "prefix": "region",
    "body": [
        "//#region ${1:Name}",
        "$0",
        "//#endregion"
    ]
}

https://gist.github.com/felipemullen/316c372c2aed83091d05b27f147db337

[fattah-behmadi]

You can use from below structure in VSCode without config or setting.

//#region Calculate function const calculate = (x: number, y: number) => { return x + y; }; //#endregion