Visual Studio Code Tutorial for Beginners - Introduction

welcome to this video where we will have a look at visual studio code not visual studio visual studio code is a code editor and we use it for quite a while now and we like it actually so we thought why don't we have a look at it together now now as i said visual studio code is a code editor and it's positioned kind of in between text editors like atom and real ides like visual studio this means it has all these text editor functions that you would expect when writing code but it also comes with some selected ide features for debugging for example so it's kind of a nice hybrid as i would say the cool thing is that visual studio code is for free and that it's available for all platforms so windows macos or linux you can download visual studio code right here on code.visualstudio.com and after you downloaded and installed visual studio code you should see something like this right here this welcome screen now we will have a look at the interface in a few seconds but let's first open our first project in visual studio code and for that you can either select open folder right here in this start area or you simply go to file and right here open like that if you do that you can navigate to a folder of your choice so either an existing project like this one in my case or we can simply create a new folder and by that a new project in the end by adding or by pressing new folder and maybe name it project 2 because we have really creative naming conventions like that so here now selected project 2 press open and here it is here we have our project opened in visual studio code let's close this welcome screen now this is something we can change in the settings by the way we'll also have a look at that throughout this video and we can also right click right here to hide the open editors also something we can change in the settings so as you can imagine already visual studio code is quite customizable apparently right now i'm here in this sidebar and if i click right here onto this symbol i can create a new file and let's maybe name it index.html this might be a good starting point after pressing enter we can see that the file was opened in that tab right here and here i can now enter something like html and you can already see that visual studio code comes with integrated tools for auto completion and for making writing our code a bit more convenient now i won't dive into the technical details behind these tools the important thing is that we have ammet integrated right here which helps us to autocomplete our code as we will see it right here in a few seconds and we also have intellisense not intelligence intellisense which also helps us to autocomplete our code especially for javascript and typescript this is where it comes implemented already or built in already when you download visual studio code and this intellisense helps you to kind of get suggestions how your code could continue from a logical perspective also something we'll see throughout this video but for the moment let's simply select html5 right here and press tab and voila as you can see we immediately created our html skeleton right here whoops like that now right here we could for example add a div like that and as you can see you again get these abbreviations and if we press enter and enter age you can see you get a lot more suggestions right here and if i now select the h1 tag and write hello well then we created our first html file in a few seconds quite cool actually we can also add another file of course if we want to right here maybe call it style.css something like that or we could also add a new folder by clicking right here and maybe call it well images as you prefer like this now an interesting thing if i close both of these files now if i select it like this with a single click you can see the file opens and if i click the other file the second file opens but if i double click onto the file like this and like that you can open both files simultaneously also quite a nice feature which allows us to navigate a bit quicker through these files right here talking about opening the files simultaneously if you go right here to this view menu right there and now go down right here to split editor well if you click onto that then you can see that you can open two editors at the same time and we can for example select this one and double click the style css file and if we now close this file the index.html file and the style css file right here you can see that we can work in both files simultaneously again by the way if you go to view right here and now go to toggle editor group layout like that then you can see that the two files are now displayed below each other not next to each other anymore you can also add more than two files right here this is up to you in the end and if you don't want to have this view then you can simply click right here to close the file and to have the single file view once again now talking about this view menu right here we can see that we have a lot of different commands i will not dive into all of these feel free to play around right there but you can see that we have this explorer search scm debug and extension menus and some corresponding shortcuts now this is actually our activity bar the bar right here this one at the moment we are in the explorer this is our main working folder where we have our files our project and our code below that we have a search option where we can see hello is selected automatically so we can for example enter h1 and press enter and we can see that both the h1 opening and closing tag are highlighted right here so this is the search option that we have we also have a source control implemented into visual studio code this means we can add git right here and manage our project with git in virtual studio code we'll have a closer look at git in a separate video on this channel the next thing we have in our activity bar is debugging this simply comes with some well debugging feature as you would expected you can set break points in your code to see where certain issues might be coming from we also use this debugging feature in our courses by the way not all of them but in a lot of courses so in case you saw one of our courses you might have seen this debugging feature the last option is a really important one also and also an activity we will have a look at in this video this is the extensions activity visual studio code comes with a lot of integrated built-in functions i talked about amit and this intellisense in the beginning but the main support the main default support is for html css javascript and typescript but you can of course also work with frameworks like angular or react or with languages like python in visual studio code and for that you can install different extensions and with that also get all these convenience features like auto completion and a lot more just by installing these extensions something we'll have a look at in a few minutes also so we can go back to our explorer menu actually and now have a look at what else we can see on our screen and this is actually just this statue spa down here this is not too spectacular as i think the nice feature we have right here is if we click into this left part is that we can open this panel right there which comes with four different ribbons problems output the debug console and more interestingly the terminal visual studio code comes with an integrated terminal this means if you open the terminal right here inside the code editor it already automatically navigated into your project folder which is quite cool and quite convenient additionally if you want to run a development server for example and need more than one terminal therefore you can also add additional terminals by clicking right here and then you can switch between the terminals right here in this menu so also something that is quite nice actually and that comes with visual studio code by default let's close that though and let's go back to this view menu right here once again because as you can see down here you can also customize the way the interface is displayed right here in visual studio code you can for example hide this status bar down here and as you can see this bar at the bottom of the page now disappeared you can bring it back immediately of course by clicking right there feel free to play around right here to customize your visual studio code experience in the end now as we talk about customization we can of course also change the look of visual studio code in general for that we can simply go up here into this upper bar once again and now go to code preferences and color theme and now you see that we again moved up here open the menu selected something and that's not really a convenient approach as i would say and the good thing is that in visual studio code we have a better way to navigate in visual studio code and also to execute different commands we have the so-called command palette now we can open this command palette either by going up right here to view once again and clicking onto command palette or right here you can already see the shortcut right here on the mac it's shift command and p and if i press that right now like this then you can see that this well command palette opens and if you now think back about this color theme that we saw in the menu we can simply enter that right here and here it is we can now we'll of course navigate right here but we can select the preferences color theme press enter and now simply switch between different default color themes visual studio code ships with well it's up on you to decide which one you like there are some which are beautiful some which are probably less beautiful like maybe this one but we always use this dark plus theme right here as a default so let's press enter and as you can see this is still the theme we used so far we are not limited to the theme in general though we can also customize our icons for example so these icons right here next to our files let's again open the command palette by pressing shift command p and now enter simply icon and we can see right here preferences file icon theme this seems to be interesting and here we have four different options we have none and as you can see to the left then we have no file icons that was quite expected then we have minimal which is this look right here or we have seti ct seti i think this is the default one that we have in visual studio code but we have a more interesting option down here install additional file icon themes now if we press that so enter then you can see that we are back again in our extensions activity right here and that the tag icon theme was added right here now if we delete that and add material icon like that then you can select this theme right there so if you now press install right here wait a few seconds and then important press reload to really kind of activate this theme right here then we can see that the icon theme was installed which was also quite expected but if we now go back to our explorer and now again enter our command palette go to file icon theme and now up here select the material icon theme then you can see that the icons changed already so let's press enter and as you can see now our editor looks a bit more fancy as i would say so with that we also customized visual studio code a bit let's now have a look at the actual workflow once again because you already saw that right here we have this integrated emit tool which allows us to create the elements right here in html quite conveniently i could also add an h2 element anything like that this works quite nice the same thing is true for css so if i for example add an h1 selector right here so you can see like this and then for example add display right here you can see i get a lot of different things that i can add right here for example we could create flexbox right here so this is all really convenient but the cool thing is that if we now go to javascript for example we can see a lot more of these convenience features before we do that though let's make sure to save our changes because this little bullets right here so this one and that one indicate that we didn't save our project so we can press save right here and right there also something we can do in a more convenient way when we talk about the settings so with that we save that and now i want to open a new project where we have some javascript code in it for that we can simply go right here to file and now press new window if we click on to that well as expected a new window is opening and now we can press open folder once again and now select project 1 in my case this could be any project you have the important thing is that you have some javascript code in it if you want to follow along right here now let's open this project like this and as you can see this is again an index.html file css file and a javascript file right here and if we now have a look at the javascript code we can also see the workflow in virtual studio code a bit better because let's say we want to declare another variable so let's head over let's say just test thing equals now i add document you can see i can select it right here press tab and now i enter the dot and now you can see that the code editor shows me a lot of different properties or methods that might be reasonable to add right here in my case i would like to add a query selector so i press q and as you can see we have different options right here well different methods starting with queue in my case i will use the query selector and then i could select anything that i would like to have right here so this is one thing where this intellisense feature or tool that we have right here can be helpful especially for javascript and typescript in that case so let's maybe delete that because i don't think we need it but we also have more convenience features implemented for example if we hover to our event listener right here as you can see if you do that you get a lot of information about this event listener and even better if we maybe just add a bit of space right here you will see in a few seconds why i'm doing this and now right click on to open mobile important open mobile is the function we defined right here so if i right click on to open mobile i have a lot of interesting features let me show you just two of these now and this is go to definition and peak definition go to definition simply lets us jump to the well location in our code where this function was created where this function was defined but this might not be the most convenient solution if you're in line 200 and then you jump back up again probably not what you want if you just want to change the function name for example so if we go back right here right click once again and now select peak definition then we can see that we have this integrated window right here which shows us that we are in the main js file and in line four and right here we have our function definition so if i now add an s for example right here as you can see i can really change the function name and also add this s right there so let's select that and if we now close that window we can see that we have open mobiles right here and open mobiles up there don't forget to save the progress by the way so this is just a little bit of a preview how this integrated code completion but also intelligent intellisense actually features help you to write the code in a more convenient way in visual studio code the problem is that these features are by default only implemented for html partially css javascript and typescript but you might want to use visual studio code with other frameworks and languages but the extensions we had a look at already help you there if you go to the extensions down here then you can either click right there and show the most popular extensions for example this one for python by the way also an extension that we are using for python or again you can search right here so you can for example type angular essentials also an extension we are using this one right here and then if you hit install right there you could install this extension important if you scroll down right here you can see that the angular essentials extension comes with other extensions which are part of this pack so you get a list of these right here and for example down there you have this prettier extension and angular in line and well as you see a lot of other extensions that are integrated by default so make sure to read for these details in case you want to know which extensions are coming with this package now if you want to know which extensions we are using generally in our videos this slide right here shows you all the extensions and also the themes we talked about and as you can see we don't use a lot of extensions actually just because it makes it more difficult for us to show you what we do in the videos because then you might not be able to follow along because you don't have a certain extension installed so we keep it to a minimum normally but this is actually everything you need to follow along our academic videos and with these extensions you're actually prepared to work in angular view react and python and of course javascript and typescript of course you can also uninstall extensions if you don't need them anymore so if you go right here to your installed extensions for example go to the material icon theme you can simply press uninstall and the extension is gone so everything quite easy and quite fast that's the cool thing about visual studio code now let's go back to our explorer right here and talk about another important feature shortcuts because we already used the shift command and p shortcut to open our command pad right here now if you go right here to shortcut right there you can open the preferences right here to open the keyboard shortcuts because well as you can imagine visual studio code comes with a lot of shortcuts right here and now we could talk about a lot of different shortcuts and which one you should use or you could use and so on the problem is i think this is boring and not really helpful therefore i prepared an article link can be found below the video where you can find an overview of all the shortcuts we are using and that might also be helpful for you nevertheless i would like to quickly show you how you can work with these key bindings right here because it's really helpful to be honest for example we used the shift command and p shortcut and as you can see this can be simply entered right here and then you have to show all commands key binding right there displayed and if you click onto this pencil you could change the key combination or you can also double click right here which would do the same thing another nice shortcut is if you enter integrated right here oops integrated then you can toggle the integrated terminal with this key binding so basically like this and the terminal would appear and disappear so a lot of different shortcuts in there but as i said make sure to have a look at this article in case you want to find out more about these or on the other hand just play around right here by looking for specific keyboards and i'm sure you will find a shortcut that will be helpful for you however let's go back to our code quickly right here and let me show you some quick things that might also be helpful when you work with text for example let's say you want to change the class name right here of our span then you can click right here let's say you want to add something at the beginning of this class name and then you can simply press and hold alt and with that you select all these different well positions in your code file at the same time and you can now simply add awesome button whatever you prefer like this so that's a nice convenience feature another nice convenience feature is if you select the span right here you can see that visual studio code automatically selects all the spans it identifies on this page of the code if you now press command and d then you can simply select the second the third the fourth the fifth and the sixth span that you have right here on this page and as you can imagine if you not type div for example or a span it will be changed simultaneously once again for all these tags that you selected also something really nice and in case you're not sure what this feature is called you can simply go to the keyboard shortcuts enter command d and voila here it is it's add selection to next find match so this is how you can easily get more convenient or comfortable with all the shortcuts that you have right here in visual studio code this is also true for code formatting by the way i told you i won't dive into shortcuts too much i just want to show you some of these because if you say that the span is kind of not indented correctly you can simply search for format like that and you see format document is shift alt and f so if we go back and simply press shift alt and f like this voila the entire html document is formatted this does not work for css by the way so make sure to see if it works for the programming language you're using in case it doesn't have a look for extensions for this language with that it should be fine in the end now we're almost done with the shortcuts which i actually didn't want to have a look at but there are two more things that i would like to show you because i think these are really important and make your lives a lot easier the first shortcut is switching between the different files we have right here of course we can do it like this and like that that's one way but another really convenient way is to simply press command p like that if you keep the command key pressed and press p to navigate through different files you want to select and then release the command key you are in another file and as you can see this allows you to navigate quickly through the files of your project now in case you want to switch to a project or recent project you created you can simply press control not command control r and as you can see you can switch between these two projects now in my case so let's go to project two whoops like that and here we are and we can switch back to project one also easily like that now you can find all of these shortcuts and how they work in the article i mentioned with that let me only add one important thing regarding the shortcuts if you go to help you can find the keyboard shortcuts reference which also gives you a nice overview of all the shortcuts available back to the editor though because we are almost done with our quick introduction to visual studio code there is only one last thing that i would like to have a look at and these are the settings in visual studio code to open the settings you can well again use the command palette and enter settings right here and if we go down we can open the settings now we can quickly hide the sidebar by clicking right here and now we see something really interesting the first thing is we can search in the settings as i said in the beginning we have this welcome screen you remember this one right here so if we enter welcome right there we can define what page should be displayed when we start visual studio code or a new project in visual studio code if you click onto this pencil then you can say that you don't want to display anything so basically an empty project as we head it you want to have this welcome page or you want to have a new untitled file now i prefer to display nothing right here so let's press none and as you can see up here we now have added non automatically i hope you saw it like this we now added this command right here automatically to our user settings i'll come back to that in a few seconds if i would change it now right here to welcome page it would switch to welcome page and so on so that's how you can easily change your settings right here i also mentioned these open editors this thing right here this is also something we can change right here in our settings let's simply enter explorer dot open dot edit i think this was right here here it is so this command right here explorer open editors visible nine if we now simply press right here copy it to the settings and then enter nine to zero like that the open editors won't be displayed anymore so also something which allows us to customize our user experience right here the last option i would like to show you is this one right here files dot auto save down there this one so files auto save and also files auto save delay these are options that allow you to customize the saving behavior of visual studio code i will keep it the way it is at the moment because that's how we normally work but here also free to play around and find the right settings for you so that's it about these settings in general but there is the but we have this user settings and these workspace settings and as you can see the workspace settings are empty in my case user settings have some of the options integrated this is an important core concept of visual studio code now the user settings apply to each virtual studio code instance on your machine so if you open videos to the code these settings will be applied but there is one exception this exception are the workspace settings if you define workspace settings these settings will overwrite your user settings in my case right here only for this specific project so right here i'm in this project one let's try this out maybe because if i say i want to change the window zoom level at the moment we have a level of six so let's go right here let's enter window zoom like that let's click right here copy to settings and let's maybe and whoops now we see it's at zero so let's maybe say it should be at four something like that let's save this now you can see the zoom level is different and now for this specific file so only for this project i added this workspace setting the zoom level is set to four but if i now switch back to the other project we have with ctrl r right here we learned that so let's switch back to project two right here then you can see that the zoom level is still at level six i can prove this to you if i open these settings also right here open the settings and hide the site navigation bar you can see that the workspace settings right here are empty because we didn't add any workspace settings for this specific project but for the user settings we still have the zoom level of 6. so that's the first thing to keep in mind regarding the user settings and the workspace settings but there is another really cool feature about these workspace settings because if we go back to our project right here this one where we edit this workspace setting and maybe close the setting now and show this once again and now go to file up here and now say that we want to save the workspace so this workspace right here as then if we click onto that we can enter a name for this i'll just call it whatever our project something like that and now save this file right here then nothing changed right well let's see let's now first save maybe this file right here and let's now close all our instances of visual studio code like that and now let's navigate to the folder where we just saved our workspace to so in my case this was this projects folder and as you can see both project 1 and project 2 are on the same level as this workspace file right here now if i click onto this file you can see that i'm back in my project not really spectacular but if i now go to file once again and now go to add folder to workspace you remember this was this option right here in the beginning on the welcome screen like that and now select project two and press add well then you can see the following we now have both projects right here in our editor in our workspace but these projects are not connected these are still separate projects but we can access both in one visual studio code instance and the cool thing is that if i now go to project 2 right here you can see that the zoom level doesn't change because right now we created a workspace setting and the workspace is no longer a single file as it was in the beginning but now the workspace contains these two or even more projects and all these workspace settings apply to these projects so if we open the settings once again right here we can see that the user settings are still with a zoom level of six so this should be zoomed in a bit more actually but as we have the workspace settings set to a level of four the zoom is a bit decreased right here so this is pretty cool actually because this allows us now to simply manage our different projects with specific settings that we want to have and by the way if when i open a new visual studio code project so with new window you can immediately see what's happening right here we now have an empty project because that's what we defined in the settings and if i now click right here onto file open and if i now maybe create a project right here on this top level let's say right here and let's say this is my private projects whatever folder like that so as you can see this file for our workspace is inside the projects folder and i created this folder right here and i open this one then i have this folder it's an empty folder but as you can see if i add a file quickly index html you can see the zoom level is still at this level six but if i now switch back to the other project so this workspace right here and now again go to add folder to workspace now select the private projects folder like that you can see that the private projects folder is now also part of this workspace with all these settings but that's important not connected to all the other projects so that's a feature you can use for different projects you can use this for the front end and the back end code of your project that might be in different locations on your drive anything like that but i think it's a really cool feature so make sure to dive deeper into that because i think it can make your life a lot easier in visual studio code so with that we finished this introduction of course visual studio code offers a lot more a lot of cool features a lot of things to learn and explore depending on your project needs so make sure to have a look at the official docs right here where well you are guided through the entire process behind visual studio code how you can set it up you can see the top extensions get some first steps you can even dive deeper in this user guide area learn more about debugging which we didn't have a look at so far so all these cool features and as you hopefully see max and myself we really like widows to the code a lot in the meanwhile so in case you're looking for a new code editor have a look if it fits your needs and with that as always the only thing i can say is thanks a lot for watching hope to see you in the next videos and bye

Channel: Academind

Views: 3,021,960

Keywords: visual studio code, vs code, visual studio code tutorial, visual studio code html, code editor, ide

Id: VqCgcpAypFQ

Length: 33min 48sec (2028 seconds)

Published: Thu May 24 2018