A Simple Editor – VS (Visual Studio) Code

VS Code stands for Visual Studio Code which comes from Microsoft as pure source code Editor and good part is that it not only works on Windows but also works best with Linux and Mac OS. It offers advanced support required for modern programming like getting embedded GIT control to use various available JavaScript in the project.

Before we do with deep dive in knowing, what we can do with VS Code and its features first let us do a small comparison between Visual Studio Code and Visual Studio IDE.

Visual Studio Code vs Visual Studio IDE

In simple words VS Code is just a simple source code editor which works on cross platforms like Linux and Mac OS.When using VS Code you have to install it manually other requirements like debugging tool, web server, code review tool etc. to complete project whereas in Visual Studio IDE for .NET and Eclipse IDE for Java is an Integrated Development Environment. It means that it is full blown environment to create projects which requires code editing, debugging, code review tools, web server, repository and testing tools. Below image depicts the difference between both of them.

VS Code Installation

Now coming to installation of the Visual Studio Code you can get setup for free,yes…..free…from internet. For that go to google.com and type on the search box for “visual studio code download” and download it from reliable site,you will find few links on top from Microsoft site(what more you can ask for in terms of reliability) to download. Just use the following link to download installation “https://code.visualstudio.com/download”

Microsoft has given freedom to do the installation not only on Windows operating system but also you can do the installation on Linux OS and Mac OS. We have Windows OS installed in our system so we will be using first option of windows which has windows icon as show in the image down below.

Once clicked on the link installer i.e. aVSCodeSetup.exe will be downloaded to your local drive.

Now go to the location on the hard drive and do a double click on the (.exe) which prompt to “Run” the .exe after accepting it will actually do start installation of the Visual Studio Code.

Just follow the Setup screen by doing “Next” option given at the bottom and finish Setup.

Below is the first screen on VS Code which you will see after doing installation and opening it for the first time when opened it from Start Menu program.

After successful installation and opening VS Code for the first time next we will explore how to use effectively VS code

Enable Explorer

You will see Explorer open in case you do not find Explorer then you have two ways to make it visible.

(1) Click on “View” option available in Menu bar then select Explorer to make it visible on VS code.

(2) On the extreme left side vertically aligned some icons and on this first icon is to enable and disable Explorer in VS code.

Now since the Explorer is visible, if look on it you will find two tabs one is “Open Editors” and second tab is “Opened Folder” (after opening the project folder it will be with project name “LEARNINGVSCODE”). Let us briefly discuss it out about these two tabs. “Open Folder” tab option is to select the project location on local drive of your system. It will be your workspace area all project files will be saved. In case if you want to open existing project present in your system with “Open Folder” option you can directly open it.

All the folders and files created are structured under the Explorer can be seen under the project folder of Windows Explorer.

Whereas “Open Editors” will show open files in VS code editor. It also shows status under the editor whether open file is saved or unsaved with icon as shown in the image down below.And when mouse is hovered over the open file under the “Open Editors” it also shows exact location where it is saved within the project folder.

Shifting Explorer position

.NET people who are working with Visual Studio have habit to see their Visual Studio Solution Explorer at the right where as in Explorer in Eclipse IDE used by Java developers get it to see at the left. By default in VS Code you will see Explorer at the left side. If you are one of those who feels comfortable by looking Explorer at the right go ahead and fulfill your wish you by docking Explorer or side bar (which also includes Activity bar in it) at the right side with simple option given at top in Menu bar, go to Menu bar under that click onView >and then click on “Move Side Bar Right” option. And now you will see the whole Side Bar is now shifted on the right side as shown in the image down below.

Intellisense feature

By default VS Code has only in-build intellisense feature enabled for HTML and JavaScript. If you wish to have intellisense enabled for programming languages Java or C# then you have to install plug-in or extension within VS Code. For installation of extension, go to Menu bar then click on “View” and under to it click on “Extensions”

Integrated Terminal

If you ever wish to go to command prompt directly with VS Code without using the traditional way as we generally do. VS Code offers option called “Integrated Terminal” and it is available under “View > Integrated Terminal” of Menu bar.

Following is the image where we have shown both methods to go to command prompt. “Method 1” is using the Integrated Terminal which let us to go to command prompt by staying within VS Code. While “Method 2” is the general way like we normally use to go to command prompt, press window + R key on keyboard which will open “Run” window and then type “cmd” command in order to open command prompt.

Whenever during development if you want to use some installation or want “.exe” to be executed within project using VS Code for development purpose then this Integrated Terminal is very useful. For example installing and running build-in webserver of Angular just type the command “npm install http-server” which will do installation of webserver. Benefit of using Integrated Terminal is that it will install webserver right within project folder where it will have “node_module” folder and in that it will have installed within httpserver.

So below is the command prompt screen shown after running http-server installation. Also new folder with name “node_modules” has been created and within that http-server files are installed under http-server folder as shown in the image down below.

Reveal in Explorer

Many times while working on project there is a need to go folder present within project location saved on local hard drive. And now consider that the created folder within the project is present deep inside the root directory of your local hard drive under such circumstance going every time to folder present in project location by browsing through Windows Explorer is not possible. So what if we have a direct provision by using which we can directly go to the project folder location opened within VS Code.

VS Code provides a feature called “Reveal in Explorer” with which we can directly go to that location of the folder present within project and get your work done. Below is the image which depicts how it can be done.

Hiding not required files(File Preference)

While working with VS Code within Explorer, if you wish can get to see only the files which are necessary and exclude all files which are created by VS code and not required while we work. When we work on project and when .ts file is created at the backend it creates (.js) and (.map) files whenever .ts file is compiled at Build time. These (.js) and (.map) files are not frequently required so how if we can hide these files and show only .ts file which is required.Similarly in projects we sometimes also have .txt files created for internal project reference these are also the files which are not required so we would also like to hide it.

Step 1:-In order to hide the file, on Menu bar click on File > Preferences > Workspace Settings which will open “settings.json” file on the pane at the center as shown in the below image. This “settings.json” file has templates for various setting which can be applied on VS Code.

Step 2:-From this file we have to copy template of “Configure glob patterns for excluding files and folders” which has code to exclude files and folders and paste it on the right side under the Workspace.

Step 3: - Aftercode is pasted make changes accordingly by adding file extension which has to be manipulated, like here we would like to hide (.txt) file, so write (*.txt) and set it to “true”.

Now after you save the file you will find under Explorer all the files associated with .txt extension is now hidden and also you will notice that it has created “.vscode” folder under which you will see “settings.json” file.

Below is the pictorial image which shows that whenever “**/*.txt” is set to “false” it will show all “.txt” files within project under Explorer and vice-versa when set to “true”.

Knowing Icons on Activity Bar

On VS Code at extreme left side you will see Activity Bar which its default position and can be moved to right side when user wishes to do so. On Activity Bar there are 5 icons next sequentially we will see what each of the icon does.

First icon is to enable and disable Explorer on VS code.

Second icon is to perform search activity project folders.

Third icon provides provision to get connected to GIT hub with which we can use power of it and get installed any module required to complete existing project.

Fourth icon provides facility to carry out debug activity on existing project code.

Fifth icon provides support of installing extension required as essentials of the project. Extension installation option is also available on Menu bar under View > Extensions. Above in this same article we have used Extensions to install C# intellisense feature.

Configure Task Runner

As mentioned at the start that VS Code is simply an editor everything in it has to be configured in order to run it and develop a project. We have created project using TypeScript in simple words it is transpiler which converts written line of code into .js(JavaScript) when compiled by the compiler. In order to run TypeScriptcompiler the command line is “tsc” which is understood by the VS Code Editor. Now inorder to run as Task it has to be configured as Task Runner so that when .ts code is written it can be “Build” by pressing“ctrl+shift+B” key on keyboard and internally command line of “tsc” is fired. We will be using GRUNT task.

Just follow below mentioned steps in order to configure it. Before we write the steps just have a look on the following image where we have “Customer.ts” created under Business Layer. This line of code within the “Customer.ts” will be compiled after we follow configuring steps for Task Runner.

When we press “ctrl+shift+B” on keyboard to compile the “Customer.ts” code it will pop-up an info which says “Configure Task Runner”.

After you click on it will ask to select Task Runner from the dropdown, here select “Grunt” as Task Runner

And now if you observer on Explorer of VS code under to “.vscode” folder you will see “tasks.json” file is created. After you click on “tasks.json” file on the right side it will show inner details of json file and under it do the following changes

Set “command” > “tsc” followed by

“args” > “p”, “.” then

set “showOutput” > “silent” and finally add line

problemMatcher> “$tsc”

After “tasks.json” file is configured next step it to check whether compilation is running properly. Now press “ctrl+shift+B” on keyboard and on the output window you will see another error which it cannot find “tsconfig.json” file. Now in order to do Build you also require “TypeScript(.ts)” file you require this JSON file.

Get “ts.config.json” file from online site, here we have used the link available on visualstudio.com

and “tsconfig.json” file should lie in the main folder of the project. Here we have kept the JSON file in “LearningVSCode” folder as shown in the image below.

Now go and view the inner details of “tsconfig.json” under VS code as shown in the below image. This JSON file consists of all essential parameter required to compile “TypeScript” file.

Now it’s the time to again compile and see is it generating .js(JavaScript) from our “Customer.ts” file. Press “ctrl+shift+B” on keyboard for compilation, at the bottom-left side you will see compilation being processed. After compilation you will see within Explorer under “BusinessLayer” folder with file name as “Customer.js” and “Customer.map” file has been successfully generated as shown in the image down below.

Features of VS Code

There are many useful features by using which you can make working on VS code more effective. We will be discussing one or two features like zoom-in which gets enables by pressing “ctrl and +” keyand zoom-out feature gets enabled by pressing “ctrl and -” key.

In order to move to and fro from one window to other window under the open code window, press “alt + left arrow” to move to left and other is “alt + right arrow” to move to right side.

The whole purpose of the article was to getting you familiar and making you comfortable with VS code so that we can start working with Angular2. Below is the starter video to learn Angular2 which is created using Visual Studio Community Edition. As a practice, you can start with VS Code to create Angular2 project: -