Contents
In the previous articles we discussed about : -
In this Lab 3 we will look in to VS code editor which we will be using in our labs.
Theoretically you can do Angular with a simple notepad. But then that would be going back to back ages of adam and eve and reinventing the wheel. So we will need some kind of tools by which will help us to type HTML easily, compile typescript and so on.
That's where Angular 2 Visual Studio code is needed. VS code is a free editor provided by Microsoft which will help us with all automation for HTML, JavaScript, Typescript and so on.
So go to https://code.visualstudio.com/download and depending on your operating system install the appropriate one. For instance I am having windows OS so I will be installing the windows version.
Once you download the setup it's a simple setup EXE run it and just hit next , next and finish.
You can also watch this VS code tutorial which will help you to understand
In VS code all source code you put inside a folder. So the first step is to create a folder and point VS code to that folder by clicking on File ➔ Open and select folder shown in the below figure.
|
If you want to create a file or sub folder you can click on the icons as shown in the figure. The first icon creates a file and the second icon creates a folder. |
 |
The explorer part of VS code has two section one which shows open editors and the other which shows your folder. You can see the image where open editors are shown. You can click on those cross signs to close the open files.
If you want to browse to the current folder. You can right click on the folder and click on reveal in explorer.
Typescript, Node these frameworks mostly run through command prompts. So it would be great if we can have integrated command line inside VS code. VS code has something called as integrated terminal , you can open the integrated terminal by clicking on view ➔ integrated terminal.
Once you are inside the integrated terminal you can fire "npm install" , "tsc" and so on. Below is how the integrated terminal looks like.
One of the things we always need is running multiple command and for that we need a facility to load multiple terminals.
In VS code we can load multiple terminals by clicking on the plus sign as shown below. So in one terminal you can run the webserver and in the other terminal you can a code review tool.
By default, VS code shows black theme which is very good for health of your eyes. But sometimes to just have more code clarity you would like to change to some more brighter theme. You can do that by clicking on file ➔ preferences ➔ color theme, you would get themes as shown in the below figure.
VS code has lot of settings like you can hide unwanted files and only focus on the files you want, change icons settings, change font size and so on. To apply a setting, you need to goto File ➔ Preferences ➔ Settings and you would be shown a figure as shown below.
In this there are two sections one which has the preference SAMPLE CODE SNIPPETS and the second section at what level you want to apply these snippets. You can apply these snippets at two levels one at a project workspace level and other at user / computer level.If you apply at the workspace level its only for that project and if you apply at the user level it will be applied for all VS code projects in that computer.
For example in the user settings we have pasted the file exclude settings. In this we have specified we do not want to see the ".JS" and ".Map" files in the workspace.
{
"workbench.sideBar.location": "left",
"window.zoomLevel": 2,
"window.menuBarVisibility": "default",
"files.exclude": {
"**/*.js": true,
"**/*.js.map": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
"workbench.colorTheme": "Visual Studio Light"
}
Once that setting is applied you can see the "JS" and "Map" files are not seen.
In the next lab we will look in to module format and module loaders. We will also understand how to use SystemJS for module loading.
