Visual Studio Code (VS Code) and Visual Studio 2017 are the two most popular IDE nowadays. Visual Studio Code is a very lightweight and powerful editor for multiple programming languages like C#, Angular, Typescript, Python etc.
Today, we will see how to setup VS Code with Typescript project, run it and debug it. Visual Studio Code is a free, open source, lightweight and powerful editor for various programming languages. It has inbuilt intelli-sense support, debugging support, easy to integrate with various source controls and lots of extensions are available. VS Code is available for any platforms like Windows, Linux or MAC.
Install Visual Studio Code and Typescript
If you don’t have install VS Code in your system, don’t worry. It is free and you can download it free from https://code.visualstudio.com/. The current version of VS Code is 1.30. Here, you have options to download installer as per your platform. For example, if you are using Windows 10 then you can go with “Download for Windows” and install it.
Before moving next, we suppose, you have installed Node.JS. If you don’t have installed Node.JS then you can download it from https://nodejs.org/en/.
Let’s open the VS Code and install the Typescript from the command line window (shortcut is Ctrl+`) using the following command.
npm install -g typescript
You can confirm that typescript has installed successfully or not to check the version of the typescript using the following command.
tsc –version
So, now we have VS Code, Node.JS and Typescript install at our environment.
Configure CMD for Terminal Window
As we know CMD is very easy to use and understandable as compared to git bash. So, let's configure the CMD for terminal windows. So, just press Ctrl+Shift+P, it will open a search prompt where you can type anything.
Let the search for "Open User Settings" and choose it. Here you will find two tabs as "User Settings" and "Workspace Settings". Inside the User Setting, you will find "Terminal" under "Features". In this section, you can configure which terminal to run on windows. Here, you have to set the cmd.exe path to run the CMD as terminal as follows.
Create New Typescript Project
To create a new project, first let create a workspace folder in your system (i.e. E:\Project\TypescriptDemo) and open it in VS Code using File > Open Folder. This will open the workspace folder as a project. Now, just open VS Code terminal window from Menu (View> Terminal) and run the command as follows.
tsc –init // It will create the tsconfig.json file with default configuration.
mkdir src // To create one folder as “src”.
cd src // To get entry to this directory.
Here we have to modify the tsconfig.json file and enable source map and outDir as follows.
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "jsScripts/", /* Redirect output structure to the directory. */
"strict": true, /* Enable all strict type-checking options. */
//Other attribute goes here
}
}
As we have defined "outDir" as "jsScripts" means, all TS file go to transpile into JS files and store in this directory.
Create Main.ts
Till yet, we have setup typescript project from scratch. Now, let create one typescript file with some code and try to run it. To do this, just right click on the “src” folder and choose “New File”. It will give you a textbox in the explorer window to enter the file name, just type “main.ts” and press enter.
See, you have created “main.ts” file successfully. Now let create a simple class with one function and try to create the instance of the class and call the function.
class Main {
name: string = 'Mukesh Kumar';
getName() {
return this.name;
}
}
let objMain = new Main();
console.log('Hello ', objMain.getName());
Now, it is time to build the project and see if everything is fine or not. So, for building the project, just press Ctrl+Shift+B and choose "tsc: build -tsconfig.json". If everything is fine then it will build your project and create main.js and main.js.map files into the "jsScripts" folder.
Now it is time to run the project. To run the project simply press F5 and it will start running your project. But before that, it will ask to launch launch.json file. Just laucnh it and modify it as per the following configuration. Here, we are doing some configuration as per our project like setting the "program" as main.ts path and "outFiles" path.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/main.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/jsScripts/*.js"]
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outFiles": [],
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
Once the above configuration will be done, you can press F5 and your project will run and you will see the output in "Debug Console" windows as follows.
Debugging the code
Debugging is the technique to find out the issues into the code, it also gives us an idea of how our code is working. To do the debug typescript, you don't need to do many things. Just place the breakpoint from where you would like to do the debug and run the code in similar as we do generally use F5.
As you can see with the above images, we have placed the breakpoints at line number 6 and when we run the project, it automatically starts debugging from line number 6.
Conclusion
So, today we have seen how to setup VS Code and create first typescript project and run it. We have also seen how to debug the typescript project in VS Code.
I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks
You are here, it means, you have read something useful. So, please connect me on @Facebook, @Twitter, @LinkedIn, @Google+.
VS Code
TypeScript
Posted Comments :
