Typescript: // #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

[danicomas]

+1

[rsaenen]

+1

[SSCtech]

+1

[ercgrat]

+1

[iDarush]

+1

[ghost]

+1

[DanielRosenwasser]

Hey everyone, please use thumbs-ups so that we can more easily prioritize the issue. These plus-one comments aren't helpful for us, and add noise to the team's notification log which makes us less efficient. Thanks! 😃

[AuthorProxy]

It should not exist in any language because this leads to bad code structure. You shouldn't encapsulate your code to comments instead of methods/classes/namespaces for better readability.

[seawerst]

This feature should be in the editor. These kind of comments is simply ignored by the compiler. Go ask your editor provider.
This issue should be reopened: https://developercommunity.visualstudio.com/content/problem/8384/in-typescript-files-region-is-not-working.html
For VS you can install this add-on: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

[AuthorProxy]

Why should everybody see this comments in the source code? It should be clean and self-documented, with comments only there where they should be. Probably editor can provide functionality for a block collapsing or selection collapsing, but it definitely should not make any changes to the source code. First, you should avoid comments, and make code structure and readability better. Second respect people who do not use VsCode or Visual Studio, I don't think anybody like garbage at the source code which gives you zero profit.

[zackschuster]

@AuthorProxy just because typescript exposes a feature doesn't mean it's in your editor; by the same token, just because a feature exists doesn't mean you have to use it. example: i dislike the generic code folding and minimap features in my editor, so i turned them off. similarly, i like the idea of #region pragmas, but if this becomes a feature & i change my mind i can (turn them off || just not use them) & live with other people coding ever-so-slightly differently to me in codebases i will never touch, see, smell or hear.

[J-Slocombe]

@AuthorProxy Regions only result in poor structure when the structures you refer to aren't already in place. Personally, I use a very granular approach, but like to add additional structure to make finding certain methods easier - Given that I write testing I could either end up with individual files separated by folders each containing a tiny amount of code, or I can group files and methods logically and use Regions to make it easier to find what we're looking for. I think if not using regions is going to result in a maze of folders, then Regions are the lesser of two evils.

[iwhp]

Regions will not per se result in poor structure. Poor structure starts in the brain. Regions help to make orientation faster and reduces scrolling! It helps to collapse, like functions or loops are collapsible, just in a developer intended way. It is the responsibility of the editor, and I personally will always try to find an editor supporting regions.

[vilmes21]

Absolutely support adding this feature into VS Code!

[jay1891]

+1

[gdefraiteur]

+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

[solidcodeguru]

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. https://github.com/Microsoft/sqlopsstudio/issues/1618

[PostImpatica]

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

use:

//#region whatever
//#endregion