How to Install & Setup Visual Studio Code for C/C++/HTML5/CSS/Javascript/Python coding

[Music] hello and welcome back friends to this new video and in this video i'm going to show you how you can download and install and set up microsoft visual studio code so in this piece of software you can do all the codings like uh in programming languages of c c plus plus java python javascript and all those things you can do here so i'm going to show you uh some of these and how to set up that environment how you can create those applications files and save it and how we can run the code in this environment so today i'm going to show you about c c plus plus python as well as html javascript and css so let's get started so now first of all you need to go to a browser and start downloading some of the things that are required the next piece of software is for uh writing c and c plus plus programs and you need this uh gnu c plus plus compiler and this is a free open source compiler for those of you you want to make or create c and c plus programs so in one of the videos i have already shown you how you can install and set up and use code blocks for cc plus plus programming and at that back end mingw is the compiler so we have to go to this website the first one sourceforge.net and click on here it will open this window here and you can see this is the pictures samples that are screenshots taken while installing so click on download and let it download the file [Music] so it's a very small size but it will download it is an online downloader we need to click on this file click run and here you can see it will ask for installing click install select the default location that is in c drive mainly it is mgws single folder and leave all the options as is click continue and click on reinstall probably this is because i have already installed this one once and i'm just showing you this one just click on install and it will start this whole process as you are seeing here [Music] next click on continue and here it will show the catalog of all the tools that has to be downloaded so just select min gw32 base and mark for installation since i have already installed this so it is not giving me to install it again so click on mark for installation and select this one mingw32 mark for installation gcc this is for c plus plus and this is gcc objective this also is required so click all these three options and uh click on installation option here and apply changes so it will go ahead and download all the required files one by one extract it into your folder so here we have the folder in c drive as you can see all these folders you have and you just need to set this path in your paths variable so just go to this mingw folder in c drive and go to the bin just need to double click here and select this line of address and right click copy and then go to the properties of a computer right click on this empty space click properties [Music] go to advanced system settings select environment variables click on path click edit and just double click on an area and just ctrl v to paste it or you can right click on here and paste this path similarly as you can see i have added the path to java sdk and also java so this will be required to run java but i am going to show you about only cnc plus and python in html etc next one we have to download visual studio code so just search it in your web browser and you can click on this first link and in here you have to download any one of this i recommend to download the system installer that way it will be installed in your uh c drive and program files if you download and install this user installer it will be installed in some user space folder i recommend to download this one so click on this 64-bit or if you have a 64-bit windows or if you have a 32-bit windows you download this one so i will click on this one and let it download and the next one we need for our python programming if you want to do python coding then you need to search for python download i need to install all the tools and interpreter so click on this first link and you can see it is already detected your operating system so you can click on here if it is not correct then you can select it from here linux mac os windows etc so click on this download 3.9.1 this is the latest version and once it has downloaded i will show you the next step so just click on first one say python since i have already installed this i am just going to show you how you can install so just click on repair so by default it will ask you to choose a express version or custom version you just select the express one and click next and it will go on with the same things that are showing here [Music] so as you can see the installation has finished and you will get a similar message and you will get two options that i will give the screenshot to you you have just to select those two options by checking those boxes so next one of it is finally the visual studio code setup so accordingly just double click on it so click on accept click next see all these options you have to keep checked click next and click install [Music] okay so after the whole process of installing it will show you to launch visual studio code and click on finish so once it launches it will show you this welcome window and here you can select some of the settings like you can change the color scheme i like this dark theme you can go to this color theme here option like the gear symbol you can click on this gear symbol and go to this color theme option and you can choose anyone from here so i like to keep this default one that is a dark theme so after it has loaded you can see uh we have this welcome screen and in here you will be able to install all the support for these languages so just click on javascript python java so that in this visual studio code will install all the requirements for you next if you want some more i will recommend you to install these things that is one is code runner that will be helpful for running cc plus java and python codes easily next one is html boilerplate next one is live server so that we can launch the web page directly from our visual studio code you don't need to have to minimize this and go to that folder and open the html file so we can run it from here itself next one is prettier and this will make all the formatting of your code and you can see in the description it gives the ability to format this javascript css html files rest of all will be installed by default or you can search it as you like it so next one is to set up our home folder now for setting up your folder where you want to save these codes i will suggest that you go to your one of your drives or your data drives and in here you can make a folder like i have one here codes and you can separate these folders as you like it and then in order to show this in your visual studio code window you just click on right click here you can go to file open work folder and click on codes and select folder and now you can see in your explorer window you have this folder name codes now you can create files from here itself you can refresh if there is any change as you can see i have these folders subfolders inside this folder code and now you can click on this one and click on this plus symbol to create a file next you need to make some settings changes in this visual studio code you can go to this gear icon settings and go to settings now code now you can type here zoom so just check this box to zoom in and out by pressing the ctrl and scrolling on the mouse wheel the next setting we need to change is to use this code runner to run the code in terminal you can go to this extension scroll down go to this run code configuration and then again scroll down and click on run in terminal and also alternatively i will recommend you to check this save file before run so that it will all always run your file and before that it will save your file too after all these changes press ctrl s to save these settings click close and now you can start coding like if you can type an html file just click here and click on this subfolder icon and click on plus to create a file you can click outside to remove that file then just click on that file to open this in the editor pane if you want to increase your font size you just press and hold down control in your keyboard and scroll up and you can see you can increase the font size here and as well as you can zoom out and zoom in and this is the previewer window where you can preview your codes how it looks while in formatted and now to view this html in a web browser you just need to click on this go live as we have installed the live server extension it will allow us to directly open the file in an html server so as you can see the browser window has already opened and this is on my demo html file that is index html and this is how it is shown and you can see this is the default server that was created so it's very nice and if you change something here like for example if i add a another heading here [Music] so if i just press ctrl s here to save it then it will dynamically change this page so in no need to press ctrl s and again close this window and open it and click refresh it will automatically refresh the page so this is quite useful and handy and for running c c plus plus codes you just need to create the code here in some folder let's say i have created this file this is my app.tpp this is a c plus plus file and once you have done this all the codes have been written you just need to right click here on any empty space and press run code and since we have selected that option in the setting to run the code in a terminal window so it will open here in the terminal you can see by automatically it is typing all the code all the syntax for us just we need to click on here and we can see enter your age 32 and this is the result of the code just press enter to end the code if you don't do that setting to run that code in your terminal then it will open up in the output window which you can use to view your code but you cannot use it to in input anything like if you click on there and run the code in your output window it will show all the things like enter your age but you cannot enter the value uh via the c in option so it is better to use a terminal for input and output operations so this is the same for c also for python you need to just create a python file here like i have created here and just and right click on this space and press run code and it will also automatically run the code here you can see the extension is still loading up so it will take some time depending upon your server say i press 3 7 and you can see the result of this calculation is 90 once like i have printed here so uh friends i think i have shown you all those things that i have mentioned uh i showed you how to install python how to install gnu c plus plus and c compiler i showed you how to install visual studio code and all the extensions that are required for installing those and running those programming languages and develop codes and also i shown you how to create this code and run the code in visual studio and all the settings that i required so hope you like this video and give it a thumbs up and subscribe my channel turn on the bell notification and so see you in the next video peace out

Channel: DIY Beaver

Views: 2,246

Keywords: #visual Studio Code, #how to start coding C programs, #how to start coding in C++, #how to start coding in Python, #how to code html javascript, #how to setup visual Studio Code for C coding, #how setup visual Studio Code for C++ coding, #how to setup visual Studio Code for HTML5 coding, #how to setup visual Studio Code for Javascript coding, #how to install mingw, #how to Install gnu C C++ Compiler, #how to Install Python

Id: eUBBcVGyLWA

Length: 18min 27sec (1107 seconds)

Published: Tue Feb 16 2021