Learn Visual Studio Code - Course for Beginners

hello everyone i'm stefania are you ready for a visual studio code crash course visual studio code is a really awesome tool a really awesome code editor that you can work with to write and run your code i will be using visual studio code for most of my videos so by the end of this course you will have a really good understanding of how to work with this amazing tool if you like this video i really really appreciate your likes and subscribe to find more videos like this on my channel are you ready let's begin [Music] first we have to download visual studio code and for that we go to code.visualstudio.com you will see a homepage like this where you can immediately detect a button to download visual studio code for windows you can click right here and your download will start you will see thanks for downloading vs code for windows if it doesn't start you can try this direct download link you will see that the download starts right here at the bottom if you are curious of the size of the download currently it is 76.2 megabytes okay so it's not so large okay i already have it installed but you would finish downloading that and then you would double click on the executable file and install it it's really straightforward and if you have any questions during the installation process don't hesitate to ask in the comments great and i also wanted to mention that if you are working with another platform like linux or mac mac os you can click right here in other platforms and you will see other options for linux and for mac os now you know how to download visual studio cone but once you install it you'll see something like this this is visual studio cone first of all let's see the layout right here we have the main panel or the main area where you'll see all the files that you currently have opened and their content all the lines of code right here then on this left hand side we have something that is called the activity bar you can hide it or show it by clicking right here on view appearance and then show activity bar you can hide it or you can show it okay so it's really really helpful it has awesome options like an explorer where you can see the different files in a folder you have search you have source control where you can work with git and other version control systems you can also run a debugger and you can install extensions that is something that is really really great about visual studio code it has tons of extensions that you can install to make your work even more productive here you can see your accounts and this is a button to manage your settings different options right here okay we will go through the settings and which ones you would like to customize first in just a few moments great now you know this the activity bar and the main panel we also have this like the menu with different options file edit selection view go run terminal and help here in file you can see new file this is how you can create a new file so let's do that the first thing that you will see is the shortcuts and the visual studio code symbol is replaced by a file right now the file is empty okay this is why you can see untitled in the tab once you save the file and you assign a name to the file you will see the name of the file right here and this is just like a placeholder text that you will see initially when you create a file you can select a language to get started to have that syntax highlighting that we really love when we are coding and you can just say for example html and you select html or any other programming language that you want to work with but that will also be assigned automatically when you save your file with a particular extension and you can also choose not to show this message ever again if you click right here but if you press enter that text will disappear if you see this little circle white circle next to the name of the file that means that the file has been changed or modified and the changes have not been saved so let's see how you can save the file you go to file and then click on save the shortcut to do this is ctrl s you can also select save as but initially the first time you save the file both of them will work exactly the same the shortcut for save as is ctrl shift s we click on save and then we go to the path where we want to save our file where we want to keep our file in this case i am storing the file in document slash youtube videos but you can choose any path that you like you can see untitled 1 which is the name that vs code assigns to the videos let's give it a name for example index.html this will be an html file and you will see that vs code automatically assigns the syntax highlighting that corresponds to html which is really awesome you only need to write this extension even if this says plain text if you add the extension the file will be an html file so we click on save and now you can see right here that the name of the file has changed to index.html you can also see the name right here and this is the path to the file the lines in the file are numbered right now we have six empty lines but we can delete these lines and start writing the content of the file for example doctype html right here we can write something inside the file just to show you how you would see the code inside a file my file hello world it's just a really basic html file to show you how this works you can see that we automatically have the syntax highlighting for html and the same would happen if you have a javascript file or a php file or a python file okay visual studio code is really awesome with that now we see that we have unsaved changes because we have the little white circle right here next to the name we can save it with ctrl s or by clicking right here on save awesome now you know how to create a file and how to save a file now let's see how you can open an existing file you go to file and then you click on open file the shortcut for this is ctrl o okay so you can use that shortcut as well we click on open file and then you go to the file that you want to open and you can either double click on it or just click once and then click open both ways will work and there you have it right here we can see the file and its content awesome right you can have more than one file open at the same time and you would just see like little tabs right here let's see that if we create a new file you can see that we have two tabs and that we can change from one file to another let's say for example that we have a styles.css file i save the file and i write a rule like h1 font size 10 pixels okay and we can jump from one file to another by just clicking under tabs awesome now there's something that i know you might have noticed when i created the css file and wrote the rule that bs code automatically adds four spaces per level of indentation let me show you this we have four spaces per level of indentation and usually in some languages like html like css and in some programming languages like java we typically use two spaces how can we change this well we just go here to the this little bar at the bottom and we click where it says spaces you will see the value 4 by default if you click on it you will see this little menu where it says indent using spaces or indent using tabs we usually work with spaces you can also choose tabs if you click on spaces you will see how many spaces you want to have for each tab or each tab size the tab size okay by default it is four but we can choose to have two and right now you can see that the lines the white lines are indicating us that now we have two tabs or the equivalent of two tabs in spaces so we can revert that and now if we use the term we will have two spaces instead of one tab okay two spaces per level of indentation and that is super helpful for languages like html and css and javascript with python we can work with usually work with four spaces so you can leave that as the default awesome another very important operation is how to open a folder in visual studio code because usually when you're working on a project for example when you're working on a react project you will have many many files you're not going to work with the individual files it's much easier to just see the entire structure of the project in the folder so let's see how you can do that let's close these files and open a folder you go to file and you click on open folder you can also use the keyboard shortcuts ctrl k and ctrl o and i will open this little panel right here where you can select your folder what you would do is just navigate to the folder that you want to open in this case i am inside youtube videos inside this folder since i'm inside the folder i can select the folder you have to be inside the folder you click on select folder and that's it it will take a few seconds but you will see the folder opened right here in the explorer you will see that the explorer turns white now let's take a look at this structure that we have right here we see the name of the folder that we opened youtube videos and we also see that name right here at the top if we click on this arrow we can hide the content of the folder if we don't want to see it okay but if we do we can see the two files that are currently in that folder and their extensions to open either one of the files we just click on it if you click on it just once you will see that the name of the file is like in italic and if you click on another file you will only get one file at a time the current file will be replaced in this part of the view with another file to keep a file permanently opened until you decide to close it you have to double click on it and when you see that the name is no longer in italic that means that you will be able to open another file like in this case so you should double click on the file to have the file open permanently until you decide to close it now you know how to open a folder and how to open the files in that folder you can create a folder inside this folder if you need to directly from the explorer you just click here where it says new folder you can create a new file or a new folder either one of them will work basically the same way right here you have your new folder and let's call it like my files i'm just separating the words with a hyphen this depends on the language that you're working with and the style that you're working with but just to show you the principles of how you can create a folder let's click enter if you are creating a file all you have to do is just add the extension the type of file that you're creating and the process is exactly the same so now you can see that i have a folder and how i how can i use the text that this is a folder visually well because you have this little arrow right here the arrow tells you that this is a folder that can be like opened visually let's see how this works if i want to have for example this file the css file inside this folder i can just drag it to the folder and confirm that i want to move the file okay so now we see that the file is a little bit more indented to the right than the html file this difference in the indentation tells you that the file is inside this folder and we can close the folder if we don't need to see its content and we can also open it if we do want to see the files that are currently inside the folder okay so this is basically how files work like this i will show you how to create a new file because i really think that this is important if i click on the main folder right here somewhere in the exporter and on the main folder youtube videos i can create a new file and let's say that i want to call it style.css i just write the name of the file with the extension and press enter and now i have my brand new css file awesome right we have two css files right now so we better delete one and that is a great opportunity to show you how you can delete a file and a folder directly from visual studio cone if you want to delete this file style.css you just right click on it and you click on delete you can also do that with the delete key and you can rename the file as well you can choose either one of the options those are super helpful you will have to confirm if you want to delete the file this will save you a lot of bad clicks and key presses okay this will really save your life this confirmation during a project so you don't end up deleting a file that you don't want to delete and now if i want to move this file from the my files folder to the main folder all i have to do is just drag it to the main folder and confirm that i want to move styles.css into youtube videos great now my folder is empty i don't see any files inside the folder so i can just delete the folder right click on it and delete it great i still have my two files and now you know all the basic operations that you can perform in the explorer there are also two other symbols or icons right here that you can click on this option refreshes the explorer so if you made any changes to this folder directly in the file explorer instead of visual studio code and that change hasn't been reflected you can try to click right here refresh explorer and then we have this last option which is collapse folders in explorer this will basically close all the folders that you have in the explorer if we had multiple folders opened yes we just close all of them and you can choose which ones you would like to keep open but you will have to do that manually it's also very helpful when you're working with large projects like for example react projects where you have an initial structure with many many files great now let's talk a little bit about editor groups okay great so now let's talk a little bit about editor groups editor groups are a super super cool feature that the developers of visual studio code included to make our lives much easier let me show you if we close the explorer right here we can close it by clicking here we can toggle the explorer you will see that we still have our two files and this is the content of our files but sometimes when you are working for example with html and css that go hand in hand they work together you might want to see both files simultaneously without having to click on the tabs like a hundred times while you're making changes to the code if you don't want to click like a hundred times to jump between the files what you can do is just create a separate editor group and that will show you the two files at the same time let's see how you can do this you just open the files and then you drag the tab you click right here with the left mouse click you drag it and then you will see that this panel becomes white turns white but wait until you drag it enough to see that this part of the panel only half the right half of the panel becomes white you just drop it there and voila right here you can see that we have the two files simultaneously we have them both in the same window at the same time so we can make changes simultaneously we don't have to click on the tabs like a hundred times to make the different changes and that is really really awesome and a true time saving feature great so each one of these panels is called an editor group because you can have multiple files in each group as they call it you can create for example a file here or you can create a file here and you can have multiple files opened per editor group okay and you can close them and you can work with them independently like you would if we only had one editor group so that's really helpful you can also change the size of the editor groups based on what you need a really helpful shortcut to jump between editor groups is control plus a number for example if i press ctrl 1 you can see that now the focus is on editor group number one from left to right this would be one this would be two and if we had a third one that one would be three if we press ctrl two now we see that the focus turns to editor group two with stylus.css so it's just a shorter faster way to jump between the editor groups that is a super helpful shortcut great so let's get things back to normal by dragging the file to this main editor group that we have and now let's talk a little bit about the settings of visual studio cone there are certain settings that you might like to customize initially before you start working with visual studio cone so let's go over the main ones i personally like to adjust the zoom or the size of my code with my mouse wheel and that is possible in visual studio cone with just control and the mouse wheel you can adjust the size of the cone this is very helpful if for example you use you wear glasses or you really want to focus on a particular part of the code or just i really think it's helpful to make your life much easier during long coding hours so let's see how you can configure this in your settings to open your settings let's close the explorer and open the settings you go to file preferences and then settings the shortcut is control plus comma okay so now we have the settings you can see that it is like a tab that we have next to the files we can also rearrange this we have a search bar in the settings that makes our lives much easier when we're trying to find a particular setting because there are hundreds of settings okay some commonly used settings include auto save if you want to auto save your code i currently have it off but you can also turn it on right here after a delay on focus change or on window change we have the font size i particularly like to adjust this with my mouse wheel but you can also set it as to the phone font family the tab size which you can customize like you learned just a few minutes ago on the panel at the bottom of the file and well we have the cursor style we have other very helpful settings that you might like to go over and customize according to your liking now for the mouse wheel let's type here let's enter zoom and that will immediately pop up this setting which is really important mouse wheel zoom if you check this option you will see that it will zoom the front of the editor when using the mouse wheel and holding control that is what i have been doing so far during the video like this okay i just press ctrl and scroll the mouse wheel great now you know how to do this we also have something called the minimap which is something that i wanted to show you in case you want to keep it or hide it if you write mini-map right here you will see the setting midi map right now i don't have it checked but if i do check this setting if i do activate or enable this setting i will see something like this right here which is like it like its name indicates a minimap it is like a miniature version of your code that you can use to scroll down really quickly when you have a really long file so you can just grab this and click on it and drag in to move around your file that's really helpful when you're working with a file that has hundreds or thousands of lines of code awesome now you know how to activate the mini-map i think it usually comes activated by default so if you want to hide it you just go to this option and uncheck this setting and you will also notice that right here you should have a little bit more space between the numbers and the activity bar you can turn it on and off with this setting glyph margin okay so if you check this you will see this space right here and if you place your cursor above the space you will see like a little red dot okay but i will hide it and i just see the numbers awesome you can really customize visual studio code to your liking so please take a moment to go over these settings after you've watched the video and make visual studio your own and customization takes me to my next topic for the crash course which is how you can change the theme and install extensions for visual studio cone so let's get to them i will close the files right here and i will focus on the activity bar because that is where you can click on this option extensions extensions are super helpful because like their name says they extend the functionality of visual studio con and you can also customize the style of visual studio code with some extensions for example the colors that i'm using right now you will see that you don't have the same colors as me if you're working with the default themes because i'm using free code cams dark theme if you want to install it if you like these colors you just enter free code camp and that will show you the assumption free code camp dark theme fake outcome dark theme for visual studio cone you just click on it and you should see an option or a button to install the theme i currently have it installed so i see this option to uninstall once you install that theme how do you assign it because the themes are not assigned automatically you have to choose the theme you have a default theme a default set of colors and you have to customize this where do you do it well you go to file then you go to preferences and click on color theme you can also use the keyboard shortcuts ctrl k and ctrl t great now you can see all the different options that you have to customize your theme you can see the free code cam dark theme that i'm using and you can also see other themes that are installed with visual studio code by default you have a light theme a quiet light solarize slide light abyss dark and can be dark you also have monokai red solarize dark and high contrast you should choose a theme that you like based on your personal preference i used to like light themes there the background is sort of like white and light colors but after spending some time with long coding sessions i realized that really a dark theme is what your eyes need after 10-12 hours in the computer okay so i really recommend a dark theme freako kam is a dark theme you can also use monokai which is like brown and you have many other choices it's up to you to choose which one you like but now you know how to customize them great now that you know how to customize visual studio code it's time to see how you can run your code in visual studio code with the terminal we'll go over the terminal and the basic functionality okay so let's dive into the terminal let's see how it works for this example for the terminal um i am going to create a javascript file so you can review everything you've been learning so far i will open the explorer and right here i will create a file i will name the file script.js and press enter now i have my new javascript file let's write a line of code hello world to run javascript in visual studio code you need to install nodejs okay you can just go to the website download it and install it if you want to but this is just an example to show you how you can run your code in the terminal okay so let's close the explorer we only need the javascript file for now and let's open the terminal we go to view and then we click on terminal the shortcut the keyword shortcut for the terminal is control plus the backtick okay so you can use that to open the terminal you can resize the terminal and you can also change the font size of the terminal you can see that right now i probably have a larger font size than what you are currently seeing on your visual studio code but for now let's focus on how you can write the commands by default when you open the terminal you will be at the folder that you currently have opened right now in the explorer i have my youtube videos folder so you can see the path to that folder right here and if you run a command the command will be run inside that folder okay so if any command needs a specific file that file should be inside that folder this is how you can open the terminal you can also close the terminal right here with the x close panel and you can open it again with control plus the backtick or right here you can also add another terminal start another terminal with the plus sign you can remove or stop the terminal right here with the trash can and if you click on the arrow you can choose other types of different elements that you can open like powershell command prompt git bash javascript debug terminal and you can split the terminal okay those are really helpful options for example you might need to have two terminals open if you are running a react app and you also want to install a package from node package manager those are scenarios where you will need to have multiple terminals opened okay so let's see how you can run this script file you enter the command in this case it's known and then the name of the file this will be specific to the programming language or technology that you're working with in this case for javascript we just need to write this command and we see the output okay so this is a sample of how you can work with the terminal now there is a very important command i'm not sure if you're familiar with this already but it's really important so i would like to mention it if we create another folder right here like my files like we had before we have this folder inside our youtube videos folder so if we want to move in the terminal inside the terminal to this folder we run the command cd and we write the name of the folder like my files in this case we press enter and now you can see that we are in this folder we're inside this folder so if we want to run a particular command inside this folder we can do so with the cd command cd just means change directory okay it lets us change directory and if we want to go up again we want to go back to our main youtube videos folder we run cd and two dots the dots will turn gray that's totally okay we press enter and now we're back to youtube videos great so now you know the basic commands for the terminal of course there are hundreds of different commands for the terminal but you have the basic idea of how you can work with it in visual studio code right here you also have different panels like problems output and the debug console but i usually work with the terminal okay you can also add a like right here a command prompt and other different types of tools you can split the terminal right here as well great so it's time to show you some really super helpful shortcuts for visual studio code that will really improve your productivity let's see let's first delete this folder move it to the recycle bin and we have the three files if for example we want to format the entire file let's say that we are not using the right indentation like in this case let's say that we wrote an html file like this which is super awful you should never do this it's not recommended because you can't see the structure of the file but if we want to have a really quick fix we can use the keyboard shortcut shift alt f and you can see how this fixes the indentation of the file immediately okay in this case it's not indenting the head and body tags that is one way to present your code you can also indent them in your file so if you want to do that if you want to indent an entire block of code what you would do is you would press control plus the closing square bracket like this and to move the code one level of indentation to the left you press control plus the opening square bracket control plus the closing square bracket indents the cone one level to the right and control plus the opening square bracket removes that indentation that level of indentation okay those are super helpful shortcuts now if we want to change something let's say that we have script and we have a particular variable myvariable and we have an identifier like a variable name repeated throughout our code and we want to rename it how can we change that particular value you can press ctrl shift l and you will see that the variable or the identifier could be a function name it could be a class name it could be a variable name will be selected throughout the file and if you modify it like your variable that identifier will be updated throughout your file so that is super super awesome super helpful if you ever want to rename something in your cone another helpful shortcut is ctrl tab and tab this will let you jump from one file to another with your keyboard let's say that we have three files opened html css and javascript and we don't want to click on the tabs to jump between files what we do is we press ctrl tab and then another tab when we press control tab this little menu or list of files that we have opened appears and then with the next click on tab we still have to keep control pressed we press control tab and then we are still pressing control and then tap as many times as we need to to reach our file like this like this like this okay so that's also something that can save you a lot of time you don't have to click on the mouse to reach that file and another thing that i wanted to share with you is that you can work with version control directly within visual studio code if you click right here on source control you will see this description let's read it the folder currently open doesn't have a git repository i haven't initialized one you can initialize a repository which will enable source control features powered by git you already have to have git installed okay but visual studio code if you do have it installed will work with the git version that you're currently using you can also directly publish this folder to a github repository okay so you can also publish it once published you will have access to source code features powered by git and github so you have two options you can initialize a local repository or you can publish the repository to github let's initialize a repository okay so visual studio code together with kin have initialized a repository for us once you have that repository visual studio code will be incredibly helpful to track the changes that you've made to your project in this case we have three changes why because each file is on tracked with the commits okay we haven't made a commit to track these files you can see this on tracked untracked on tracked now if we want to stage the changes we just click on the plus icon and we click on the plus icon and the plus icon okay now we see that they change from this part which says changes to staged changes these are the changes that will be committed if we write a commit message let me just readjust this now the you that you saw previously on the files changed to a a means index added okay the the file has been added to the staging area you can see the message index added right here if you hover over the letter you can also unstage changes by clicking here on the little hyphen or dash icon and now this this may look initially like a search bar but it's actually where you write the commit message and if you click control plus enter you are going to commit on the master branch let's say initial commit if i click on control plus enter that will create a commit okay so now everything has been committed in the repository let's make some changes to the file for example let's add a second variable myvariable we save the file with ctrl s the shortcut and now we see this on the explorer we see the letter m which means modified you will see this and this letter right here when you make changes to the file and those changes have not been committed and you can also see the change the line where the change occurred with these little bars next to the code green means that you added that line okay so now if we go to source control you see that we have changes the changes were made in this file and we can stage those changes and then we can just write the commit message added a variable we click on control enter ctrl enter and now we don't have any changes to command they're all committed great right here we have other options like vos tree we have commit we have refresh and we see other different options like pool push clone we can also have different options for the commits changes pull and push if you're working with a remote repository like github branches you also have options to merge branches rebase branches create branches create branches from other branches rename a branch delete a branch publish a branch you can also add a remote if you're working with a github repository or another remote repository or remove it you can also stash changes and create tags and you can also show git output okay if you want to learn more about visual studio code i also suggest reading the documentation you go to code.visualstudio.com the same website where we downloaded visual studio code you click on docs and right here you see the documentation you see an overview for get started user guide javascript typescript python java c plus plus data science and other things you will also find a very helpful article on keyboard shortcuts like this you have a shortcut reference sheet you have key map extensions and how to customize keyboard shortcuts thank you for watching my video if you like this crash course i really appreciate your likes and subscribe to my channel to be the first to know when i publish new videos have an awesome day and happy coding

Channel: Coding with Estefania

Views: 17,539

Keywords: coding, programming, learn to code, code, coding bootcamp, bootcamp, visual studio code, vs code, IDE, code editor

Id: yjeHLSrhPao

Length: 43min 15sec (2595 seconds)

Published: Thu Jan 20 2022