TypeScript: Adding regions in Visual Studio 2017

In this article I’ll share small detail how to include regions when we work in TypeScript in Visual Studio code.

Background: I was working with one of my SharePoint Framework Extension (SPFX) client side web part. I am using Visual Studio 2017. Β While working in development environment there is lots of commented code since we are still developing and testing.

By default, I couldn’t add region as we do in Visual studio 2017 for C# programming. I want all my commented Code in one region in my .ts file. so that it won’t be visible all the time.

Since I am new to TypeScript I was not sure how to add regions, so googling… and then found that in Visual Studio marketplace there is tool available called β€œJavaScript Regions”. Β This tool is freely available and for Visual Studio 2017.

Installing the “JavaScript Regions” :

Log in to Visual Studio Marketplace https://marketplace.visualstudio.com/, in the search box search for β€œJavaScript” as shown in below figure 1

Figure 1_Visual Studio Marketplace - JavaScript Regions search

Figure 1: Visual Studio Marketplace – JavaScript Regions search

Or we can directly also go with the URL – https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions#overview

Once we are on the above URL, we can download the β€œJavaScript Regions” and it will download β€œJavaScript Regions v1.1.3” Microsoft Visual Studio ExtensionΒ (.vsix) file.

Double click on the downloaded file it will ask for products for which we want to install this extension as shown in below figure 2:

Figure 2_Visual Studio Marketplace - Downloading JavaScript Regions tool

Figure 2:Visual Studio Marketplace – Downloading JavaScript Regions tool

Since I am using Visual studio Community 2017 edition it shown me to install extension for it as shown in above figure 3.

Figure 3_ Visual Studio Marketplace - Installing JavaScript Regions

Figure 3: Visual Studio Marketplace – Installing JavaScript Regions

Once clicked on β€œInstall” button it will start installing as shown below figure 4.

Figure 4_ VSIX Installer - Installing JavaScript Regions

Figure 4: VSIX Installer – Installing JavaScript Regions

On successful installation, β€œInstall Complete” dialog will appear as shown in below figure 5.

Figure 5_VSIX installer - Successfully installation of 'JavaScript Regions' tool

Figure 5: VSIX installer – Successfully installation of ‘JavaScript Regions’ tool

Restarted the visual studio and it worked like charm. I Visual studio in my typescript file a β€œregion” snippet is coming in IntelliSense as shown in below figure 6

Figure 6_ Visual Studio - TypeScript file - region snippet in IntelliSense

Figure 6: Visual Studio – TypeScript file – region snippet in IntelliSense

Once I hit the tab on the β€œregion” IntelliSense it adds the region snippet as

// #region <name of my region>

// #endregion

Finally, happily I added my commented code in region πŸ™‚Β This is very good tool to simply adding regions in my TypeScript file in Visual Studio so shared.

Thanks for reading 😊

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.
Stay tuned on Knowledge-Junction, will come up with more such articles.

 

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

1 Response

  1. Manoj Sutar says:

    good

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: