How to Run Node.js in Visual Studio Code | Node.js in VSCode

so let's get started and let's see how we can download node.js so just open your favorite browser and search for node.js and the first link which will appear here will be from nodejs.org so we are going to just click on this link now at the time of making this video you can see the latest version of node.js is 15.14.0 and the latest LTS version is 14.16.1 I generally choose the LTS version so I'm going to just click on this option which says 14.16.1 LTS which is going to download the MSI file for the node.js so once this MSI file is downloaded I'm going to just click on this MSI file and I'm going to minimize the browser and you can see this installation wizard for your node.js so I'm going to just click on next here you can read the license terms and conditions and then click on accept and then click on next this will be the location of your node.js installation so if you don't have the good reason to change this location just leave it as default and then click on next and then click on next and on the next window you can see uh this message which says tools for Native modules optionally install the tools necessary to compile native modules so I will definitely recommend you to check this checkbox which is going to automatically install the necessary tools and also it's going to install a tool called chocolaty which is very good utility and you can use this tool to install many other softwares also right so no harm in it I'm going to just click on next here and then click on install and now I'm going to click on yes which is going to start the installation process which is going to take few seconds so just wait for few seconds until the installation is finished so once the installation of node.js finishes on your Windows 10 operating system you will be able to see this kind of message which says node.js has been success successfully installed so you can just click on finish button and this is going to open this kind of terminal and because we have chosen the option to install the additional tools it's going to just wait for us to press the enter button and when I press the enter button it's going to start the installation of the additional tools right so you can just wait for the installation of the additional tool for node.js and now you can just click on yes here which is going to open the Powershell and here you just need to press enter and it's going to adjust use the chocolatey uh installation to install the necessary tools right so you can see it's downloading this chocolaty first of all and then once this tool is installed it's going to download the additional node.js tools so you can leave this window uh like this you can just minimize it don't close this window and we can already move to the testing of node.js so when you click on this Windows icon here you will be able to see this node.js command prompt here also you can see the node.js option here both the option are going to open the command prompts so when you click on node.js command prompt it's going to open the command prompt like this let me just just change the font size so you can see everything in in bigger font let us say so I am going to just click on OK and the font size has been increased right so here you can just type node and then press enter which is going to open the node rapple so this kind of node rapple is very useful when you want to quickly test some commands and even you can test more complicated stuff so for example I'm going to just write console DOT log here and inside this parentheses I can add either double quotes or single quotes and then I can just type hello World here and then press enter which is going to just print hello world also you can do some basic arithmetic operations or you can import some modules here and test those modules so everything is possible using this terminal also if you want to open your Windows 10 command prompt you can just right click on the Windows icon here and you can open the Powershell from here and in the Powershell also you can just go to the properties and then you can change the font size from here and now you can just write node and then press enter which is going to open the node rapple utility also here in your Powershell or if you want to test this command in the command prompt of your Windows 10 you can just type CMD which is going to give you this command prompt option you can just click on this command prompt and then type node here which is going to once again open this kind of node Rebel environment which means you can test your node.js on the command prompt also and here also you can change the properties and then make the font size bigger and now you can see the font size in a bigger font now here you can press Ctrl C in order to come out of your node rapple here so you can see when you press Ctrl C it says press Ctrl C again in order to exit you can once again press Ctrl C and then you are out of the node reple environment also you can type dot exit to exit out also so when I type node once again when I want to exit out of the node I can just write dot X it which is also going to cancel the node rapid environment right and by the way if you are confused what is repel repl Rebel stands for read evaluate print Loop which is essentially an interactive shell which processes the node.js expressions and commands so this is how you can use node.js in the command prompt now generally when you want to write a node.js code you obviously need some kind of editor or IDE to write your node.js code I generally use Visual Studio code for developing my node.js applications but you can choose any other IDE or editor of your choice but for now what I'm going to do is I don't have any installation of any kind of editor here so I will show you if you don't have any editor on your Windows 10 operating system the then also you can just write your node.js code but it will not be very convenient I would say so just go to the folder where you want to create your node.js file and then you can just click on view here and then click on file name extension so just check this option which is going to allow you to view the file extensions right now here right click and then you can click on new and then you can just click on text document and you can see that this document is created with DOT txt extension right so I'm going to just change the name of this file as Hello dot JS file so you generally write the node.js code in the dot JS files so I'm going to just press enter and on Windows 10 it's going to give you this kind of warning I'm going to just click on yes here which is going to create this hello.js file now you can edit this file by just right clicking on this file and then click on edit and here you can just search for the basic hello world node.js program online on the node.js website also I'm going to just put this link in the description in the getting started guide you will be able to see uh this sample code which you can test right so I'm going to just copy this sample code here and then I can just paste this code here basic basically what it's going to do is it's going to start your server on your local host and on your Port 3000 you just need to know this here so just press Ctrl s or you can just click on the file option and then click on Save once the project is saved just close this file so here go to the folder in which your hello.js file is there and then press shift key and then right click in the same folder which is going to allow you to open the command prompt or the Powershell in the same folder where your hello.js file is there so just choose this option which says open Powershell window here or you will see open command prompt here right both options are okay and now here you just need to write this command node and then the name of the file which is Hello dot JS right and then press enter which is going to start your node.js server on this IP address and this port which is essentially localhost 3000 so once again you can go to your web browser and then just type 127.0.0.1 and then colon 3000 and then press enter which is going to show you hello world that means your node.js server is working fine and this is how you can write your node.js code and execute the dot JS file and also we are going to see how we can set up our Visual Studio code editor for developing node.js applications so let's get started so first of all open your favorite browser and search for visual studio code and the first link which will appear here will be from code.visualstudio.com so we are going to just click on this link and straight away you will be able to see the download button here and on the top so I'm going to just click on this button which is going to download the executable file for the visual studio code setup at the time of making this video this file is about 68.9 megabytes so I will wait for some time so once this executable file is downloaded I'm going to just click on this file and I'm going to minimize my browser and now the visual studio setup has been started so I'm going to just check this radio button which says I accept the agreement and then click on next this will be the location where your Visual Studio code editor will be installed so if you don't have the good reason to change it just leave it as default and then click on next and then just click on next once again and now you can check these check boxes you can create a desktop icon for visual studio code let's check it also some other options are available here for example add open with code action to Windows Explorer File context menu I will check it this one also and register Visual Studio code as an editor for supported file type so I will also check this check box so basically I checked all the check boxes here and then click on next and then click on install which is going to start the installation of Visual Studio code and now once Visual Studio code has been installed we are going to see this message just leave this checkbox checked and click on the Finish button which is going to launch Visual Studio code on your Windows 10 operating system and from here you can customize visual Studio code for different languages also you have the settings and key bindings for different editors like Bim Sublime atom and others and you have all these other settings from here so we will discuss them later when we develop some code from here let me show you some basic things about Visual Studio code so for example I open my command prompt by just typing CMD and then I will just navigate to my desktop folder and now I'm in my desktops folder right so let's say I want to open Visual Studio code in my desktop folder I can just write code here and then space dot which is going to open Visual Studio code in the current Direct directory in which you are currently present so right now I want to open Visual Studio code inside this directory so just write code space Dot and then press enter and when you press enter here it's going to open Visual Studio code and you can see the folder which is opened here is the desktop folder right so this is the command if you just type code here then and it's going to open the folder which you are working on the last time when you closed your Visual Studio code right so we opened last time this desktop folder that's why when you just type code then it's going to just open the last opened folder and close this terminal also so now let's say I will go to my documents folder and here I will create a new folder and I will name it as workspace so I will just name it as workspace here and then I will go inside this workspace folder and then I will press my shift key on my Windows operating system so press shift key and then right click inside this folder so press shift key and then right click and you will be able to see open with code option here so you can just choose this option which is going to open your Visual Studio code in the workspace directory now let's try to create a very basic Javascript file here so I'm going to just click on this icon which says new file and then I'm going to name my file as Hello dot JS and here we can write our code for example I'm going to just write const and I'm going to name my variable as X let's say and then I am going to give some value to it okay and then I'm going to provide semicolon and I just want to print the value of this variable which is X so I can just write console DOT log and then I will just pass X inside these parentheses so you might have observed that Visual Studio code already comes with the support for JavaScript and node.js so you can see at the bottom it recognizes the file type and when I type let's say console here it gives me the intellisense for completing this code which I am writing right so it knows the file name and it knows what I am trying to do inside this file I can press Ctrl s to save my file now you can open the terminal inside the visual studio code itself so you don't need to type CMD to open the command prompt and execute this code I can just click on Terminal and then click on new terminal which is going to open the terminal in my visual studio code itself and it's going to open the terminal in the directory in which I am currently working so this is the workspace directory now one more cool feature about Visual Studio code is you can see that this font size is little bit smaller so I can just press control and then plus and what it does is basically it's going to increase the font size and the size of all the widgets inside Visual Studio code so I can once again press Ctrl plus and you can see now this font size is bigger terminal size is also bigger so in this way you can change the font size if you want to reduce the size then press Ctrl minus okay so when you press Ctrl minus then it's going to reduce the size of all the widgets and the font now we have already installed node.js on our Windows operating system so what we can do is we can just write node and the name of the file which is Hello dot JS and then press enter and it's going to print the value of x which is my first app so you can write your code run your code within your Visual Studio code so you don't have to leave Visual Studio code to run your applications now Visual Studio code have some really cool features for example you can search for some text inside the several files let's say I just want to search for my if my project contains many file let's say 100 files then it's going to search for my keyword in all the 100 files and it's going to show me the result right so I can see here my keyword is written so it's search and show me I can also replace my with any other word let's say above and then press on this replace all button which is going to just replace this my with our keyword let's say now visual studio also have a good integration with Source control so if you have git installed it's going to recognize that you have get installed and it's going to show you if you want to commit your files or you have some uncommitted files so whenever you change your code in your project git is going to track your code and with the help of this Source control section you will be able to see what all files are added or what or for all files are uncommitted so you can commit them and you can push them from this section you also have the debug option so visual studio comes with the debugger for node.js already so you can see to customize and run debug create a launch dot Json file so when you just click on the run and debug button you will see that it's going to give us the option to choose from these options we want to debug this for node.js so I can just select node.js from here and then our code is going to be debugged inside our Visual Studio code so right now it just prints our first app which is this value of x let us say I just want to create a breakpoint here so here on the console log I just created a breakpoint and whenever you create a breakpoint in your file you will track all your break points under this section so if you have multiple breakpoints you can see what all files contain breakpoints and when you click on this you will directly go to the breakpoint you also have toggle active breakpoint which means that you can disable all the active breakpoints using this option also you can remove all the breakpoints using this option now once again let's debug our code so I'm going to just press run and debug and then once again choose node.js and once I do this you can see here because I have created a breakpoint here in my code execution is stopped at my break point and here I can visualize the local variables and other stuff right so when I hover over on X I can see the value of x which is the feature available using the node debugger also if your code contains multiple lines you can press on this button to continue you can press this option for stepping over you can go or step into the code you can step out of the code and also you can restart your debugger using this button and you can stop debugging using this button right so these all things we are going to see here ah in the later videos when we write some actual code but I just want to show you how powerful this Visual Studio editor is right the last section here is for the extensions so whatever language you are working in Visual Studio code have extension for most probably everything because it has a very strong Community Support let me just stop the debugger debugger so as I said Visual Studio code already comes with the support for node.js but if you want to search some more cool extensions related to node.js you can just type node here and then it's going to give you some options related to the node.js so let's say I just press on this option which says node debug and you can also see how many stars this project have and how many downloads this extension have and here you will be able to get more information about this extension so you can see this extension is from Microsoft and it has been downloaded around 200 000 times and it has good rating of 5 right so you can decide based upon this if you want to download this extension or not so by default uh Visual Studio code comes with node debug extension that's why I can disable this from here let's say if I choose some other extension I have the option to install it so I can just click on install which is going to install this extension inside my visual studio code I can uninstall this extension and also I can disable this extension if I have installed the extension so there are many cool extensions here but we will install them whenever we need them right so we will go step by step and we are going to install them step by step when we need these extensions so this is how you can download and install Visual Studio code and set up your node.js development environment on Visual Studio code I hope you've enjoyed this video and I will see you in the next video

Channel: ProgrammingKnowledge

Views: 172,881

Keywords: how to run javascript in visual studio code mac, how to run js file in vs code terminal, how to run html and javascript in visual studio code, how to run javascript code, how to install node js in visual studio code, how to run javascript in terminal, how to run javascript in windows 10, how to run Node.js in visual studio code mac, how to run html and Node.js in visual studio code, how to run Node.js code, how to run Node.js in terminal, how to run Node.js in windows 10

Id: _LtwT5_zmDs

Length: 26min 16sec (1576 seconds)

Published: Thu Apr 20 2023