Repository navigation
// #regions #11073
Description
From Max Beckenbach (@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
Activity
waderyan commentedon Sep 23, 2016
Max Beckenbach (@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 commentedon Sep 23, 2016
From Max Beckenbach (@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 commentedon Sep 23, 2016
From Diego Vieira (@divieirasilva) on September 19, 2016 17:50
I think, Max Beckenbach (@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 commentedon Sep 23, 2016
From Max Beckenbach (@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 commentedon Sep 23, 2016
Ryan Cavanaugh (@RyanCavanaugh) I'm guessing you have thought about adding something like this before.
[-]Regions[/-][+]// #regions[/+]mhegazy commentedon Sep 23, 2016
// #regionsupport 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.42 remaining items
khcjump commentedon Oct 5, 2017
+1 as C#
pleerock commentedon Oct 12, 2017
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 commentedon Oct 17, 2017
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 commentedon Oct 17, 2017
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 commentedon Oct 17, 2017
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
//#regionas of VS Code 1.17.bradleyayers commentedon Oct 17, 2017
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 commentedon Jan 17, 2018
+1
mattmc3 commentedon Jun 12, 2018
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 commentedon Aug 5, 2019
For those coming here late like me, yes this was implemented.
use:
Sti2nd commentedon Nov 21, 2021
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 commentedon Jul 21, 2022
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:
https://github.com/proxy/gist.github.com/felipemullen/316c372c2aed83091d05b27f147db337
fattah-behmadi commentedon Oct 4, 2023
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