How To Include Regions In TypeScript While Working In Visual Studio Code

In this article I’ll share small details about  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) web parts. I am using Visual Studio 2017. While working in a development environment there is  a lot 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 by Googling I  found that in the Visual Studio marketplace there is a tool available called “JavaScript Regions”. This tool is freely available and for Visual Studio 2017.

Log in to Visual Studio Marketplace https://marketplace.visualstudio.com/, in the search box search for “JavaScript” as shown below,

Include Regions In TypeScript While Working In Visual Studio CodeVisual Studio Marketplace - JavaScript Regions search 
Figure 1: Visual Studio Marketplace - JavaScript Regions search

Or we can directly also go with the URL here.

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.

Visual Studio Marketplace - Downloading JavaScript Regions tool 
Figure 2:Visual Studio Marketplace - Downloading JavaScript Regions tool

Double click on the downloaded files and it will start installing. It will ask for products for which we want to install this extension as:

Include Regions In TypeScript While Working In Visual Studio CodeVisual Studio Marketplace - Installing JavaScript Regions 
Figure 3: Visual Studio Marketplace - Installing JavaScript Regions

Since I am using Visual studio Community 2017 edition it asks me to install the extension for it as shown in the above figure 3. Once I clicked on the “Install” button it will start installing as shown below in figure 4.

VSIX Installer - Installing JavaScript Regions 
Figure 4: VSIX Installer - Installing JavaScript Regions

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

Include Regions In TypeScript While Working In Visual Studio CodeVSIX installer - Successfully installation of 'JavaScript Regions' tool
Figure 5: VSIX installer - Successfully installation of 'JavaScript Regions' tool

I restarted Visual Studio and it worked like a charm. In my typescript file a “region” snippet is showing in IntelliSense as:

Include Regions In TypeScript While Working In Visual Studio CodeVisual 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 adds the region snippet as:

  1. // #region <name of my region>  
  2. // #endregion  

This is a very good tool to simply add regions in my TypeScript file so I shared it with you.

Thanks for reading.


Similar Articles