Transcript for:
Getting Started with Visual Studio Code

Visual Studio codee commonly referred to as vs code not versus code is a popular code editor used by millions of developers worldwide its relatively small size and low system requirements make it one of the better code editors out there and a great entry point into the world of coding for beginners hi I'm Victor let's take a little tour around vs code today on height above sea level if you're looking for visual studio IDE I've covered that in a separate video I will link to the top right of of your screen but in this video we'll be looking at Visual Studio code those two are a bit different they accomplish the same thing of writing code but Visual Studio IDE has a couple more features and more bells and whistles to help deal with certain languages but for visual studio code I'd recommend going to code. visual studio.com and go to visual studio code on Windows because that's the that's what we'll be covering in this video but the steps are similar if you using Mac OS and you'll click on this link it will start the download up here to the top right and it'll take you through the installer which will as it says here will take only a minute if you've installed a program on Windows then you probably know how the steps go they ask you to accept the Privacy agreement and the terms and conditions and whatnot and uh that's all you have to do all right once you've done that you'll arrive at a screen that looks similar to this one you probably have some options to your right here here with some progress balls and a walkth through but mine doesn't have that cuz I removed it however if you want to get back to those walkthroughs come here and say open a walk through so let's look at the get started with vs code cck that and the first thing we're going to look at is changing your theme if you don't like this dark theme you can quickly change it by clicking here that'll change it to light theme go back to Dark theme we can go dark high contrast or light high contrast and I hope you can see the difference but what I'm going to do is just click on dark modern and by the way these walkthroughs help you get through Visual Studio code step by step and as you move along you can click here to check it and uncheck it if you haven't gone through that step if you want to do this later on we've looked at our theme how to change it let's look at the next one reach support for languages you can add extensions to vs code to help with SE languages you can do so for JavaScript C++ C descript Etc we look at extensions in a little bit but I'm just letting you know about this step you can go to browse language extensions which will open the extensions right here but for now we're going to close this and we'll get to that soon but just bear with me we're going through everything step by step because this is a beginner video and I want to make sure I cover everything in detail to make sure any beginner even the one who's never written code can understand what's going on here right then go to tune your settings now when it comes to settings you can change things like autosave the font W DRP and W drop is when the line reaches the end it doesn't scroll the editor doesn't make you scroll to see what's in the what's what's in the next portion of the line it just wraps to the next line that way you don't have any scroll bars in the editor so if you completed that you can take this click here and that will take it or or leave it unchecked then in order to sync your settings across devices there's a part here where you can sign in so if you click it the setting sync is on and this is my uh I've signed in already but if you sign out like that be asked to sign out successfully signed out over there the thing that happens is that when you sign out oops let me just remove this tip when you sign out your settings don't sync across devices so let's say you're using this on a Windows device and you want to use it on a Surface Pro maybe you've traveled without setting sync on you can't sync whatever settings you've changed in that device so if you've changed it on your PC if you go to your Surface Pro while you're traveling those settings don't sync so in order to do that you'll need to sign in I signed in with GitHub I just signed out to show you what it's like then you can look at the command pilot we'll also take take a look at this this gives you some quick shortcuts like let's say you want to clear the console or open the terminal or just look for help you can come here to the command pet you can click here or I'll show you the shortcut then you can use this to pick a folder open up your code you can uh it says here you're all set so you can start coding create files create folders and whatnot and that's it for the welcome walk through I can go to the next section which is about the fundamentals again it's telling us to code with extensions extens are just packages that add functionality to vs code so you can add one for python you can add one for C++ you can even add things like code format as like this one here Bridge here and also other things like view if your web development by the way I apologize if this is too small you can zoom in with control plus equals let me zoom in so it's bigger Control Plus the equals sign make things a bit bigger so you can see it I think that's better yeah this is better that's one of the things you can do I should have mentioned that at the beginning but if you've been struggling I apologize hope this is better and then vs code also has a buil in terminal I do plan on covering the terminal in a separate video so please stick around for that subscribe to the YouTube channel I will cover the terminal in detail how to use it and even things like git and GitHub those are videos that are coming down the pipeline I hope you subscribe and you will get notified when those come up again here we have git for Version Control if you're into Version Control and then you can customize your keyboard shortcuts maybe you're using a different editor and you want to use the same keyboard shortcuts you can add those here by clicking this it'll open up a window like this to show you all the shortcuts but I'm going to cover that in a little bit right I think that's it for the walkthroughs over here you can see you can open such in this panel you can create a new file you can open file I think I just let me zoom in one more time just in case you're watching this on a mobile device yeah that's B so you can open a new file open a new folder clone a GE repository open the walkthroughs like we've done before this is what I just did you have to go back to those walkthroughs and maybe you've closed them like I did you can just click here and you can connect to other services like a remote repository and so on and so forth and then in the recent like you've seen I've been using a couple of I've been opening a couple of files I looked at the finance app and Powershell these are all files and folders that I opened and my first mobile app and so on if you want to quickly go to a previous project that you opened come here click on it and it will open it for you in vs code all right that is it for the welcome by the way if you don't know how to do that how to go back to that welcome page you can go here click help and it shows you again and if you click this this uh dialogue box every time you close vs code and open it again you won't get this welcome message or this welcome file but I've kept it on because I wanted to show you what you see when you download vs code for the first time all right before we go on if you do like this video and want to see more things like vs code tips and tricks please consider following me on patreon at patreon.com height above sea level I'll be covering a couple of other things like tips to increase your productivity and things like sticky scroll CST Tippets custom keyboard shortcuts and more videos including things like C un even game development later on so if you're into that kind of thing and also want maybe a few goodies like the Sakura theme Al a visual studio IDE please consider supporting the channel at supporting me on patreon.com height above sea level and I will be very grateful thank you all right back to the tutorial as you can see up here because I zoomed in there's this that this triple dots or these ellipses which means it can't show everything so it has to show them in a drop down if I zoom back out you can see those are coming back for the sake of those who are watching on mobile devices let me zoom in a couple more times even just for you who's watching on the bigger screen all right that's it now let's look at the Navar up here in the nav bar we have the file tab in the file tab just like in other programs you can open a new text file if I click this it'll open a text file which is just txt file you can just write a few words in here there not this isn't code you're just saying it's just a text file text only you're not executing any code but you can also create a new file that was a text file but you can also create a new file of let's say a Javascript file let's use a Java Javascript file you can do so with a cop with C++ but let's use a JavaScript with index jsjs means JavaScript if you put CS that'll be cop cppp that'll be C++ Java that'll be Java and so on and so forth let's put. JS and by the way I Rec I recommend using folders but I just want to show you what happens if you create a file that way so I can press this It'll ask me where I want to put it I'll put it in the desktop over here and it'll be called index I can create the file like that I can say something like console log by the way this here is intelligence intelligence gives you suggestions when you're typing like it takes into context if you have maybe variables inside a method it will suggest to you the variables that start with C if you type c variables I start with f if you're typing F maybe you have a variable named bus name and you're typing f it will show you all the methods and all the variables with f in the intelligence and it's a really good way to speed up your coding and it saves you a bit of time instead of thinking oh what did I write then and what was the name of that variable well intelligence comes to your Aid and it gives you suggestions based on what you type as you're typing so I can just say cons console condo but console do log log is a method as you can see with this Square let tab Cate then I can say hello world there you go this is the default theme these colors that you're seeing here this blue log and yellow and this orange but I should have mentioned this earlier you can also change the theme aside from changing the theme in the welcome page like we did earlier like if I go back to that walk through get started with vs code choose your theme light and all that you can also get some from the visual studio Marketplace so if you go to here we can go to the marketplace this is the visual studio code Marketplace and you can get extensions in addition to themes so these are extensions like copilot copilot and uh Vu and safira theme but let's look at the just the themes that make vs code more much preer go click here themes and give it a second so these are the themes that you can download for vs code you have the dracul theme maybe you can look at winter is coming theme and you can read all this information that you want that will give you more context and what the theme is and they usually have pictures like this so if you like this color and you like this text this font and anything else about this this theme you can come up here and install it and when you do so it's going to show up in your extensions area I don't have anything yet because I haven't installed it the theme is also an extension but let's just go back to what we're doing here with creating a file this is our JX file and we've created it the next thing you're going to look at is a new window if you want to open just like a browser if you want another instance of vs code you can go file new window and you see it opens a new window in here you can expand this make it bigger just like you do with chrome you can do try this with chrome or Safari and it'll do open a new window for you just like you see right here let me close that because we don't need it next open a file we can open the index.js file so let's say this is closed you can say file open file this one and it opens it for us over here and you can do this for file saved in other places in your code not not just the desktop I'm just using that for demonstration purposes you can open a folder you have a folder in here that has code it'll open there and it'll show over here no folder opened so why don't we click here to open a folder why don't we create one just to give you some a good idea of what it likes working with folders so open folder let me create one here new folder new folder I can say BS Cod folder like that enter and I can select the folder select that and I have vs code folder by the way it didn't open the file as you can see what happened that file that had opened is not longer there because we're in a different folder right now so I wanted to open it again open file desktop index.js open there it is another thing I could do is I could say open file then when I'm here move this to vs code folder like that and look what happens it shows there because we're in the vs code folder you can just exit out of here and open it this way there we go by the way what you see here is the editor is on editors so if you open a file it'll also show you the file open inside open editors so if you have a bunch of files let's say you have more index.js you have dashboard. Js and so on and so forth as you open them they will show up here I can even show you how to do that over here and I'll tell you about this activity bar shortly so if you want to create a file you can also click here let's call this maybe sandbox. JS you also have to have a legitimate name you can just put sandbox dot so sandbox. JS there we go and I can also make maybe have a variable in here like H name equals uh vs code student there we go and as you can see it's coming here as well so as you add them they go up they show up in open editors and you can close them this way or you can close them like this or you can click here to close all editors so let's say you have this open all like that and anytime you're not sure what you need to do you can have uh you can just hop over these new entitle text file save all uh close all editors you can just hover over these and it'll give you the context of what you want to do right so where were we we were looking at the open folders open folder you can open a workspace from a file workspace is just a project it's like a project so if you have a file like index index.js is a big file you can open a workpace from that file again like we did before open recent let me zoom out because it's misbehaving a bit so I can see with the control plus minus or the equal sign and I can say file open res and you see it comes over here we looked at the vs code folder recently and these are the ones I had that we saw in the welcome walkth through so if you have some projects you opened recently you can just come here look at the one you want to look at that you want to open and then open it and uh there you have it Bobs your uncle you can add a folder to this workspace you can save it as you know how saving works like in a regular program you can save it as a name with this name or you can change the name if you want but I'm sure if you worked with a computer and uh which you have which is why you're here and you know what save as does you can duplicate this workspace which is like this project you can save here just the way you normally save let me me say console Del right line I can duplicate this with contrl c and contrl plus v control that's copy and paste and if I press file when you see this dot right there that means changes haven't been saved you can say save as save changes saved and then if you have multiple you can have save all right and if you want to share your code come here export file well this is the profile that I'm using profiles are just over here you can go to profiles if you want to have a couple of extensions in one profile but you don't want to have them in another profile you can have to separate profiles where you have like let me show you this is the default one that I normally use just to give give you an idea of uh how things are different this is my default one with some extensions I've already installed but for this for the purposes of this video I'm using the test one to show you what it's like with the with a fresh install of visuals vs code it zoomed me back out so I'm going to zoom in again with Control Plus the equal sign or you can just say view appearance zoom in like that by the way the shortcut is also the view expence appearance and Control Plus equal sign right there all right so we looked at save as share you can have auto save on and then your preferences like the theme that you want the tasks this is for if you have many commands that you want to run together you can call user you can check your tasks that you set up you can go to the settings profile that you've chosen that I just shown you I have the test profile selected now the settings that you want to change and then extensions that you have installed the keyboard shortcuts that we looked at earlier and the code Snippets so why don't we look at code Snippets real quick so remember in JavaScript you can create a function I hope you're at least familiar with functions and or know have an idea of what they are but let's take a look functions you can press Funk and this here is a keyboard is a code snippet this one of the square that's a code snippet so when I press tab it's going to declare a function for me and then this area name is going to be highlighted which means I can edit it so I can say say something and the first letter is lowercase second all letters after are uppercase that is a convention known as camel case I have a video for programming naming conventions I will attach the top right of your screen if you're not familiar with those but this is the name of the function say something and then if I press tab it will go inside the crace as you see that's changed color and I can say call this parameter message and then I press tab you'll see the cura this area here that has this thin white line that's where the cura will go next if I press tab so I press Tab and now I'm inside the method body and now I can just say maybe log to the console console do log message that we pass as a parameter here so we log the message there and a semicolon by the way sometimes JavaScript doesn't always punish you for forgetting the semicolon that's something you should that's a little fun fact and you can also uh adjust this as many times as you like to based on what you think is best for you all right so that's it for the preferences and if you want to change the theme you can go to color theme and if you have themes installed it'll show up here so if you hop over this I believe it'll show me a preview is it going to show me no but I can click here let's see what doc plus looks like okay that's the doc Plus then you can come back to preferences maybe I can look at a different theme like fire light oh that's very bright but uh yeah this is that's how you change the theme if you have those installed you can come to preferences and I'll show you how to do something similar with the command prompt so what did I go preferences theme color theme dark I believe the one I was using was uh dark plus no dark mode yes let me just use a dark mode just cuz it's easy on the eyes and I don't want to be blinding you if you're watching this at 11:00 p.m. at night that's it for the file tab what else and you look at Exit if you want to exit the application but I don't want to do that close window if you want to close an editor which is this one this is considered an editor this entire area anything written inside here is consider the editor this big big area so if you want to close the editor you can click there and close a folder can close a window and those are pretty much self-explanatory that there is a file tab let's go to the edit tab so the edit tab you can do like you've done so in other programs you can undo with Control Plus Z or click here so let's say I make a mistake I do a bunch of gibberish write a bunch of gibberish come here undo is gone again can write that and press contrl plus Z it's gone going to redo control+ y that is again and do there it is and then you can cut control+ x copy paste I'm sure you know how to do this and I don't need to explain in detail what these do you can find let's say you're looking for a certain word here I duplicated this but let's say looking for the word hello you can press control plus F this box is going to show up let's look for the word hello and you can click here to make sure it's case sensitive so right now it's m it's not it's case insensitive so anyway it has hello whether the capital letters or lowercase letters is going to get a match but if I want it to be case sensitive can click here and then no results but if I do type Capital H I get one out of two and I can click this arrows to go the next match or the first match and then this one is to match the entire word or not and you can click this arrow down here to toggle replace if you want to replace the word and I can say replace it with I so you can click here if you want to replace or you can replace all the Curren so let me click here replace this F occurrence number one first one over here as you can see this is replaced with high World instead of hello if I press control plus Z that'll undo it and then if I want to replace everything click here replace all I World let Meo that contrl plus Z then click on the X to close it you can also click Escape next thing is replace you've seen replace Control Plus H is the same dialogue box Control Plus H the same thing if you want to replace but if you just want to find contrl plus F and this white line white circle means I Haven been saved so I can save always a good idea to save uh when you're working just in case maybe the power goes out or you forget or you accidentally something happens just control+ s to save right you can find in files this one also open here control shift plus f look at that tool tip control shift plus F you can also open it through here finding files let's say you're looking for a method like say some this say something method maybe you have a project with multiple multiple files and you're looking for the same something method you can come here say say something what's going to happen is let me make this bigger it'll show you the name of the method the name of what you're looking for and which file it's in so you see say something is in there index.js if I click here it'll show it to me even if this is closed let's say I had nothing open and I come here I can click here going to open the file and highlight to me the thing I'm looking for why don't we search for something in um sandbox ajs let's say name so I can come here or edit finding files I can look for name as you can see inside sandbox. JS and here it is it gives me a short preview of what I'm looking for click it and there we go the name thing that I was looking for the variable is over here and that's how you use the finding files you can also do find and replace in files control shift plus h and now you can find the dialogue right here if you open click on this Arrow it shows a replace just like we did before but if you click it again it is the replace so if you wanted to replace that in every file we can say replace that with with a first name again this is camel case first letter of first word lowercase first letter of all worlds after uppercase so we can replace this as you can see also the preview here name is crossed out and green is what's going to be shown next fast name again replace all you can hover over this to give you some context replace all replace all one occurrence if there are many occurrences it'll say replace 20 occurrences replace 50 occurrences and it'll show you what you're replacing it with so yes I want to replace click that place first name so if I had multiple places in the code that have that name just the word name that will be replaced with first name all right and that's how you use find then replace toggle line comment in programming we also have comments that we normally write it's not code but it's just there to give us context of what of what we're writing and why we're writing it so I can go to index.js and by the way if you click it once it's italicize because this is a preview you have to you can click it twice to open the file so click twice as you can see the talic changed to regular font style not not leaning over click once metallics click twice regular right let me open it click twice then remember what you're looking at toggle line comment so if you want to write a comment the quick way you can do tole line comment or control+ for slash I'll just click here for now and then you can write a comment this is comment above the function again I can show you another way with control+ Slash this is another comment all right go back to edit tab we're looking at toggle block comment so if you want to have a comment with of a that's made of a block let's say you want to have multiple lines in a comment you can come here edit shift alt a or click here toggle block comment and as you can see this is also a comment and the difference with this one is you can press enter like this is a comment with multiple spell that right multiple lines if I go to the next line with enter I'm still in the comment but the thing about this other one if I press control plus slash I can say this is this is one more comment but if I press enter this is not a comment this is this is now back to the code you're writing code that's why I have red underlines because the compiler is thinking that this is code is no longer a comment so if you want to have comments with multiple lines when you press enter you can use a Blog comment like this go to edit too block comment if you only want to have one line then you can do it this way but if you if you want to have uh have it this way where you're constantly putting these forward slashes then you can also do that but I recommend having this one for multiple comments lines this is image it's for writing HTML if you have something like HTML file say index.html and you want to type you want to have a list of item know an art owned list and inside it you want to have a list of items three times and if I press tab you see EMT expand abbreviation you press tab this is EMT syntax I'll leave the link to that in the description below if I press tab oops delete that then press tab that's what is going to give me an unordered list list of items like this it's just a short way of typing quickly or coding quickly but that's beyond what I'm trying to teach you I'm just trying to show you vs code that's just a little demo IED to give you for using Amit all right that's it for the edit tab let's go to the selection tab again just like you've seen before in other applications you can select all so you can press contr a to select all or you can go selection select all expand selection shift alt right arrow expand selection is let's say you selected this and if you want to make the selection bigger you can come here expand selection or if you want to make it smaller you can go shrink selection to what you just selected I don't Tru use this because I just select everything what I want to select but if you ever find yourself selected something already you can add expand selection if if you want to select more we can shrink selection if you want to shrink selection all right and we can say copy line up the line above us this one copy line up you can also press shift alt up Arrow so if I'm the cursor is there shift out up Arrow I'll copy this line then you can also do the same for copy line down because this is just the same line it'll copy it down can move line up without plus up Arrow so let me use the call shortcut alt up Arrow you can move it down also I mean you can move it up with alt up Arrow you can move it down with alt down arrow like that you can add a CA you can duplicate selection so whoops select it duplicate selection so everything in the selection tab most of the things here deals with adding uh anytime you select things like this selection the things you selected but you can add a CA above so let's say you want to add a CA above this let me duplicate this let me have another mission like console.log string like done so let's say you wanted to add a cursor up to this line you going go selection add curer above and now you see you have two curers if you want to type something it's typed on two lines like that same thing you can add a cursor below so if on this line and you want to add the cursor down here you can choose add cursor below and then add cursor to line ends to the end of the line you can add next occurrence control D I've never used add occurrence add next occurrence or add previous occurrence but I believe that's with selection you can select all all occurrences I've never used occurrences so don't worry too much about them then you can switch to control plus click for multicluster which I'm not going to do it's just the same thing of adding clusters above and below but not Now using Control Plus click never use column selection mode so it's not something it's not a big deal that will make or break your coding experience now the view tab all right the command pallet I mentioned this earlier before but if you want to look at all the commands you can press control plus shift plus P or you can go to view command pallet let's click it and see what happens all right so these are the commands that are available in vs code so I recently used this one and it's telling me I recently used it if you want to open the help page without uh not going to help and then welcome you can just go to view or Control Plus shift plus P open the command pallet and then go down here help welcome what does that mean go to the help tab then open the welcome click on welcome and that brings us here go to the help click on welcome that shows that there others like control like if I press control shift p again add Casa above add Casa below we just looked at these if you want a quick way to look at to uh use those commands you can press control shift p and come here and use those use the commands available to you any way you see how and based on what it is you're trying to achieve like add cursor below I use terminal clear to to clear the terminal because I had a bunch of stuff in there but yeah control shift P gives you the command page and you can see all the commands appearance you can go full screen with f11 open view which view do you want to open do you want to open something here like the Explorer or the search if you want to open search over here let's click this open search then it just tells you whatever view you want to open if you want to open the terminal which I'll cover in a little bit by the way I plan on covering a terminal in depth because that requires its own video so again this subscribe if you want to see that press X to close it like we normally do in all applications so view you can change the appearance like if you want to go full screen click here and the that's gone you can see that up there you want to go back F1 and your menu your Navar is back you can also do things like Zen mode control K plus Z if you just want to focus on this like just like the name suggests Zen mode you're fully focused contrl plus K control then Z it brings me back and remember the shortcut is right here is Zend mode you have a centered layout you have the menu bar which is the one that I was up here now it's gone and you can click here again now it's a hamburger menu just like you see in cell phones and click here again uh view parents menu bar toggle that same thing you can do for the primary side bar this is this right here is a primary sidebar so I go to appearance primary sidebar it's gone you can also press control plus b contr plus b again to hide it if you want more real estate and you don't want you feel like it's a distraction and you just want to focus you can close it and toggle it like that plus b or come here prary side but there's a shortcut if you want a secondary sidebar you can click this and that'll bring one to the right side like here you want to drag something here well not a file but you can drag a view here to display it I've never used this before because I feel like it squashes everything and I don't like how it takes up all a lot of the screen real estate so if you want to do that you can have that there if that makes you happy VAR we can go again to the status bar this down here is a status bar whoops not that but this area down here it shows you what line you're on what line the CLE is on so if I go to line line 11 see it changes line 11 column 30 line 14 line 14 column 26 and the spaces tell you how many spaces are there when you press tab so if I come here where the console is this text I can press one two 3 four and that takes me to the edge so it tells you how many spaces are used when you press tab utf8 is the characters that you're using I won go to details and carriage line crlf is Carriage line return feed so that means how the line endings are handled Mac it's going to be probably carriage return and on Windows is crlf carriage return carage line no carriage return line feed and then over here it just tells you the whether they're using JavaScript the language you're using or if you have any notification down here that is the status bar all right what else do we have back to view you can toggle the status bar on or off see it's gone again appearance status bar where is it there all right the panel is where we have the terminal and a bunch of other things if I press control plus J this down here is a terminal so you can look at problems output ports debug console we'll cover this in just a little bit but if you want to see this then you can come here view appearance terminal or panel or you can press contrl plus J to toggle it contrl plus J toggles it off contr plus J again brings it back all right what else do we have you can move the primary Side by to the right this one you can move it to the right if you want go to appearance move it to the right where is it now it's on the right side some people like having this to the right maybe if you can even close it that way you like you're used to using this when you're using a text book or exercise Book used to having the the margin to the left maybe this could work for you but if you're like me and you like it to the left you can leave the default if you like this you can move it to the right side I want to put mine back at activity bar position or move primary Side by to the left then what else can we do in appearance we can look at the activity bar position this one you can move it top or uh actually no activity bar position isn't that activity bar position I press control plus b this is the activity bar sorry this is the status bar at the bottom this is the activity bar I moved it to the top and also I can move it back to the bottom down here or I can just leave it to where it was before to default which is the left here that is the activity bar and same thing with the panel that we just saw you can move it to the left to right you can align the panel the tab bar right here this is the tab bar so if you have multiple like this open this section here is a tab bar so if you go to view variance tab bar you can have single hidden and so on see the it's hidden going to bring it back bar multiple tabs like that I'm just going to go through this a little bit faster because most of them are self-explanatory I just want to give you a quick quick overview of what it looks like when you change them editor actions positions you can change the tab bar title bar hidden you can have a a mini map uh you can turn that on this here is a mini map if you have a bunch of code let's say you have a lot of lines down here they can show you where you made an error or even you can see with these colors that it's giving you an idea of what you type but if you don't like that and you want more screen real estate turn that off that as you can see it's gone you have it I like it on breadcrumbs like these are breadcrumbs right here index HTML this is right here is a breadcrumb maybe let me add a folder like just fer to give you a better idea of breadcrumbs and I add index.js drag it move yes and as you can see these are breadcrumbs it's it tells you the path to how you found the how you got to the file you're in by the way to CLI to create a folder just click here now if you don't want that parents breadcrumbs no breadcrumbs if you want to come want it again parents breadcrumbs we have breadcrumbs next we can look at the sticky scroll right sticky scroll is an interesting one let's say you have many methods let me create a couple like this another function call it another method and let me pop nothing here press tab I'm just going to let me put a comment control+ for slash this is a comment and I can just duplicate this like this now as you can see sticky scroll is on so that I know that all this belongs to this function without sticky scroll let's see what happens I won't be able to have this stick at the top so if I go to appearance take a scroll turn that off as you can see it doesn't stick to the top there come back appearance sticky scroll on there we go it sticks to the top to let me know I'm inside this Method All Right Next One appearance random whitespace I've never used control characters I never used zoom in like I told you before zoom out and if you want to reset the zoom to its default you can click there that's it for appearance and edit a layout I click here to close this back to view you can split the editor remember the editor this section right here you can split it into multiple views so if I say editor split up now we have split it we split it into two and I can close all to close everything there you can split it into right like that another way you can do that is to click here and it splits it into two and you can keep splitting and splitting and splitting if you have the screen real estate that is something I will not be doing because I don't have the screen real EST real screen real estate you can say split in group that opens a group and you can toggle layout have it one on top of the other or side by side I can close all to get rid of that group like that or get rid of both of them and that's it for splitting these are just splitting you can decide how many columns you want three columns like you've done before one column two columns three columns and these are just having you this is just rely on you to play around and see what you like you can have a grid you can have two columns right flip layout and so on and so forth all right Explorer control shift e explorer here is just this as you can see I hover over that control shift e opens that n search control shift F open search over here you click it and the same thing for Source control control shift plus G opens here Source no this one source control extension Source control is for git and GitHub if you're using git to to for Version Control you can come here and it'll show you the changes that you have made and this isn't a get repository so that's why you're not seeing anything but you're going click here or go to view Source control when you click run it just shows you this part run and debug if you want to see the run and debug or whatever it is you're debugging all the methods all the variables it'll show you right here you can click this or you can go to view run extensions show you the extensions you've you have and you can also click here problems this is in the panel that we opened this panel here output if you are logging something to the console it goes to debug console if there's an output it comes here the terminal that we just look at and if you have any ports let's say you're running something locally the ports will show here again you can look at those through this way toggle them this way debug console like that all right finally we have W wrap so let's say you have a very long piece of text let me duplicate this control V control V control V you see I'm scrolling to the side if you don't want that to happen you can go to view w WP and it wraps to the next line again go to view control y drop turn it off alt plus Z let me press that Al plus Z turns off the word drop and now I have the scrolling if that's what I was looking for that is it for the view tab now we look at go so what is what happens when you click go and go back go forward you can also do this click here it's just like going back in the in the browser you can click go back go go forward pick last edit location you can switch edit to the next editor let's say you have two of these now you can click switch editor next editor or and go to previous editor click that you can also have uh go to file let's say you have a bunch of files and you want to go to particular one you can go to go go to file and you can say it even gives you suggestions you can go to index.html have to go to that file or I can go to a different file sandbox. JS if I have many files I can go there or we can just press control+ V and then go to the file I've never used symbols so I'm not sure what these do but if as a beginner you won't need to worry about them I've been using vs code for a while and I've never had any need to use these definition go to definition all right let's look at that let's say you're on index.js maybe you've written a bunch of code and you've called a bunch of methods let's say we're down here and we call say something and you say say something I'm giving up on you that's a song If you don't know what that is I hope you found that funny if you did find it funny please leave a comment below so let's say you have this method called say something and you want to know where it is so you put your CER there press go you can say go to F definition or press F12 so put my CER there F12 will take me to where the method is defined and if I have a variable let's say I have a constant top here they con uh last name you can say is uh Smith and if I cirle say something and pause last name I can put my cursor here and this time I go to up here gu definition it takes me to where this is defined where I created it that's go to definition then we can also go to declaration i't Ed that or type definition go to implementation so let's say used say something here and used it in multiple places you can go put your c on it then press go to implementations there it is it's implemented here next one you can look at is go to line column I've never used that go to bracket I've never used that maybe you can try it and see what it does I don't know why I need you want to go to a bracket but maybe okay I I think you can use it to go to the end of the bracket go go to bracket yeah it goes to the end of the bracket but I've never I've never had any use for going to the end of the bracket I just scroll down next problem if you have many problems in the on the panel so contrl plus J to open the panel they'll show up here no problems have been detected but if you have them in your code like this can press go and it'll show next problem f8 it'll go to the next problem previous problem as shift plus FH and this this I believe is for Version Control I've never used it so as a beginner I don't think you'll have to worry about this that's it for the Go tab let's go to the Run tab you can start debugging if you want to debug this code then go here run and start debugging in order to debug you need to have break points so why don't we uh just show a little quick demo of debugging so in order to to have to start debugging you need break points so come over here and you can click to add a break point and when it's bright red like this that means the break point is enabled so if you want to run the debug you can press F5 or click here debugging since we've called this method here we'll hit this break point and we'll see what the debugging session looks like Run start debugging click it just you know those JS and as you can see I can debug what's going on inside this say something method I know that it might be confusing because the function is declared here and we're using it here but that's just how JavaScript works you can declare the function first and then use it and then when it's called we go to the function where is declad and we had a breako so that we see what's going on inside the function so as you can see we can also debug it's logged into the console hello old that's from here so that's not part of the method but we can see see what the message parameter is if you look up here message is Smith last name is equal to Smith and that's what we passing that's what we're passing as the message so this is our debug session this are the local variables local meaning inside the function Global variables are this is just normally things found in the global environment like the entire uh I don't know how to say it but the entire JavaScript node JS environment so you don't need to worry about these too much usually the local ones are the ones you worry about but you can decide to watch a variable if I want to watch the message variable let's say this message variable changes a couple of times inside this method I can keep watch of all those changes here and I can add it to the watch variable and click X to remove it or I can click collapse all and this is the call stack this are these are your break points as you can see we have a break point here right right here and it's shown over here if I click this it'll disable it but because we're debugging we come over here and enable it if you want to step over step over means go to the next line press here or press F10 and if I want to start the debug session again control shift F5 and it'll go back and hit this I to step into let's say this was a method wanted to step into it i' press F1 if want to step step out of the say something method I'll press F shift f11 like that we've stepped out with the method and if I want to stop the debug session I can press shift plus F5 I'll click here and that is the debug the debug session you can run without debugging so let's say let me remove this just so we're not confused and I can comment this out with control K with control slash so if you want to run without debugging so say something we'll just log the name to the console and I can run without debugging control F5 smth so what that means is I call the say something method which loged to the console the message passed to it the message pass to it is the last name which is Smith so it logs Smith to the console all right anything else you can stop the debugging we saw that control and shift 5 you add some configuration for debugging you can toggle breakpoint so we have a break point here press F9 on this line this particular line this one I can toggle a break point like that and again run you can we saw step over step into step out and it continue we saw that in the previous uh past couple of seconds you can toggle the breakpoint F9 you can add a new breakpoint and be a type conditional like we did when you clicked here or you can right click there add conditional break point log point or triggered break point and I don't go into details what those do but those are break points you can add them that way you can enable all or disable all so if you have a couple of break points like this come here if you want to disable all break points maybe you want to just run your application without breaking or you forgotten where all your break points are come here TB all they all turn gray and you come here again enable all if you want to enable them or if you want to remove everything remove all and install in additional debuggers is if you want to debug in different ways or ADD no yeah debug in different ways or if you had to debug debug an application that requires a specific debugger you can install a couple of other ones this way click here the terminal if you want to create a new terminal you can come View and go to the panel where's the panel is it over here no selection it should be in view but I can press control plus J because I remember the shortcut and then come to the terminal here or I can go to terminal tab then click on new terminal right here and this is the terminal again I do plan to make some more videos on the terminal and go deep into it and what you can do with the terminal opening files making directories and using G that so please subscribe if you want to see that more see more of that and you can open open multiple terminals too so this is a terminal this is a terminal this is another one delete that if I don't need it delete that and you can open different ones like a JavaScript debug terminal Powershell G bash command prop you can run some tasks like maybe you want to run npm install if you're working with a node.js environment for those of you who do JavaScript or you can configure your tasks that is a terminal you can split the terminal you have him split like this or you can so just click here to split the terminal maybe you on to the terminals side by side I let just use one the way it is so I don't really worry too much about that you can run the tasks build task if you want to build the application run active file or run selected text I've never used these before but the kind s explanatory if you select a piece of text and you run it you can do this you can show running tasks restart running tasks I've never used this before but I believe if you're familiar with tasks then they're they're self-explanatory you can configure your tasks and your default build task finally we have the help tab if you need any help just check in here if you want to go to the welcome screen again click W welcome it'll show you your recent ones you can open a walkr if you want to go back to the vs Code walkthrough that we just looked at at the beginning you can open a file open a folder it show this welcome page will show you everything or at least the basic things you need to know and you can come here and see help you can see all the commands with the command pallet that we looked at remember control shift p and then you can also do video tutorials this will take you to the website vs code website to look at video tutorials tips and tracks will also take you to the vs code website and go to the YouTube channel search for feature request report on issue if you're having trouble with vs code and check the license privacy statement and developer tools if you want to toggle those and yeah you can check the keyboard shortcuts look at the all the documentation on vs code by clicking here that is it on the documentation or the the help tab on vs code that's it for the Navar we've already seen this this is where your files are the editor by the way this is called the activity bar you seen the explored if you want to search for files and rename them and delete I can delete this going to run and debug we saw to run and debug G this is for Version Control so if you're familiar with Version Control you'll see this here and it'll show you a number whenever you have different different changes so you can come here but the one we haven't looked at is the extensions so if you come here you'll see all the extensions that you have installed popular ones that I mean they're just popular and then the ones vs code recommend so you can look at these Docker git lens GitHub co-pilot if you want to have some AI help with your coding you can come here and have the debugger so these are some of the extensions you can installed you just come here click this let's say you want to use python let me remove this it gives you the details if you want to look at uh read this what the extension does the support and extensibility and all that the features that it has the change log all the changes that have been done extension pack and then you can come here and you can click on this down arrow you can install a pre-release version or a release version and then it's usually very simple sometimes you have to restart the VSS code editor for them to take effect but normally you just click here and it starts working why don't I show you how to use one to install one I'm going to look for material icon theme material icon this is one of the extensions that's oh there we go he showed in there briefly but that's fine this is the one that I like I'm going to install it for this profile just so you can see what it looks like so you come here and by the way keep track as you can see these icons over here they'll change once this is installed as you can see I've installed it the icons have changed much nicer that the default ones that come with vs code so uh I change something that file icon theme oh yeah I have to click this to change it so I set file icon theme to this and that changes it there usually a couple of steps but if you're lost just go to The Details page and click on the extension and it'll show it show it'll show you what you need to do to enable it you going to uninstall extension as you can see we have this installed you can come here uninstall disable it if you want to just disable it let's uninstall and see what happens I can see this is restart extensions to complete the uninstallation okay restart it and then we go back to our file we're back to what we had four that is pretty much it for the BS code introduction I hope is there anything I've missed we looked at the nav bar we've looked at the activity we looked at the status bar activity bar we've looked at the side barar this one we've looked at the other sidebar I believe you're pretty much good to go you can also use these to Fogle primary sidebar like that toggle panel you can also click up here toggle secondary sidebar even customize the layouts based on what you want this is all things you can play around with you won't need them to begin with but you can play around with these all you want and uh you can configure vs code to work exactly the way you want it to work and that's it for the introduction I hope to give you a bit of a a good intro into vs code and I hope that you learned something again please support on patreon.com if you want to learn more about the vs code functionalities the tips and tricks we want to go really deep into some of the things that you need to help you improve your productivity and make you a better programmer overall so patron.com level and thank you so much for making it this far if you haven't subscribed to YouTube yet please consider subscribing ask your questions in the comments below if you have them and please remember to join Discord if you want to chat more about this outside of YouTube I do plan on streaming on Twitch again so if you want a more live coding experience a more interactive experience please follow me on Twitch at Avatar Vic the link will also be in the description below that's all out for you guys thank you so much for watching and as always from me to you duke says