Visual Studio Code Crash Course

Key Takeaways

hello and welcome to this visual studio code vs code crash course where you are going to learn all the ins and outs of the best and most popular and most powerful editor for web development my name is james q quick and i run a youtube channel at jamesquick on youtube where i do web development tutorials every week so you can go and check that out if you're interested in the meantime let's go ahead and get started breaking down all of the ins and outs of vs code in this crash course so before we dive in and actually show you what vs code looks like and what it's all about i want to start by just kind of talking about what it's about so visual studio code is in my mind the most popular and most powerful text editor there is especially in the realm of web development so if you look at what vs code is it's not a fully fledged ide or integrated development environment it's not like eclipse is for java or intellij is for java or for visual studio is for c-sharp and windows related activities visual studio code is more of a lightweight text editor so you can compare this to something like atom or brackets or notepad plus plus etc the really cool thing about vs code is that it's cross-platform which means it runs on mac windows and linux and you can see here it's got a download button that says download for mac for me because it's automatically detecting which operating system i'm currently on now some of the cool behind the scenes stuff of why that's possible is vs code is actually built with something called electron js so electron js allows you to build desktop applications using web technologies javascript html and css which is really really neat so vs code i think is one of the best examples of how you can build a really powerful and really performant application that can do a lot of things that you'll learn more about here in a few minutes with your basic web technology so electron is really amazing in that sense and that allows vs code to now be cross platform which means regardless of what operating system you're on you can download vs code and you can start working with it from there so i kind of mentioned vs code is i would say the most popular text editor in web development which means it's great for doing html css javascript doing react or node or php or python things like that but it can do a lot more than just those languages it can it can work with java it can work with c-sharp it can work with net core it can work with markdown for example we might see a little bit of that in this crash course as well you can work with almost anything inside of vs code and that's the real power behind it where it's really lightweight it's super fast to start up but it's also very powerful where you can add features through their extensions which we'll see more of here in a little bit to be able to support different workflows different languages different frameworks that sort of thing so if you scroll down you see some of their core features here intellisense we'll look at debugging we'll take a quick look at some of the built-in git features being able to work with source control locally with git and then work with github and other things like bitbucket and things like that and then the extension ecosystem the things that you can add to vs code to just make it more powerful is really the beauty of this thing so you've got some testimonials in here you can scroll down and kind of read some more of this but i think the main thing we want to see here is just this actually being hands-on now the one thing i do want to show you is that there's two different versions of vs code there's kind of the the stable edition that's what you see here the stable build and then there's also the insider's edition now the insider's edition is a version of vs code that really shows you the latest code that's coming out from the vs code developers on a daily basis and what this means is you'll get some extra features some new features but they may not work all the time because these are things that they're testing out before they officially ship it to the stable version so this is for early adopters this is for people who really want to try the latest and greatest features they don't mind if they get an occasional broken build here so things might go wrong but i can tell you from my experience i have used the vs code insider's edition for months at a time and never had any issues so you can kind of take that for what it's worth but you'll get these frequent builds at least every day with new features and bug fixes and the cool thing is you can install vs code stable edition as well as the insider's edition both on your laptop and or your computer and not have any issues so you can try out some of those latest and greatest features and then also go back to the stable version if you want to so to get started with vs code you'll download this you'll run through some of the setup stuff and then when you open it you'll see kind of a welcome screen so let me go ahead and open up vs code on mine and you'll see how quickly this loads especially in comparison this is actually going to seemingly take longer than it did because it pulled up on another screen but one of the things that i really like is when you open vs code it's going to show you often some updates of what became new that month so the stable edition comes out with new features and these are pretty powerful features every single month and they give you this kind of newsletter to show you what all is new and you can see in here it has like even images and animated videos so vs code just does a really great job of one adding features and taking feedback on which features to add but then also communicating and let you know as they do this on a monthly basis what things have changed so if you open this up for the first time you can close that out you'll also have kind of a welcome message or welcome page this will show you your recent projects that you've worked on before some help you can get the access to the keyboard cheat sheet we'll talk a lot about keyboard shortcuts in here there's tips and tricks and different things that you can work on there's some features or some sections in here on how to customize to set up support for other languages than just javascript so python and java php working with azure as a cloud platform and docker as a container system if those things don't mean anything to you that's okay because you don't need to worry about it those are extra things that you can customize and use in vs code but you absolutely don't have to so probably the first thing that you would do in vs code is go ahead and open a folder now i'm opening a project called dev setups which is one that i've been working on recently which allows users to upload an image of their desk setup and you can kind of scroll through and see different people's setup so this is just kind of a fun project that i've been working on and i've got this thing open in here and we'll kind of use this as a way to just kind of poke around and show you more about the editor now the first thing you'll see this is i'm going to close this welcome tab here is you've got this sidebar over here with several different icons and the top one is probably what you're looking for to get started and this just shows you all of the files that you have inside of this open project so i've got this dev setups folder this project open and you can see here are all of the files that are inside of this project now if you're if you're new to react if you're new to javascript don't worry about what these files do specifically just know that this is where you would go and see all of those files so in addition to the file explorer you also have a search icon so you can go and search through your project if i wanted to search for react for example this is a really powerful feature in here where this will show me everywhere that react is inside of this project you can see it's a lot and then i can go in and actually do a replace for example of replacing this with um something else it doesn't really matter and the cool thing is vs code will show you kind of in line what that replace will do so react will become something else this is not something i want to do so i'm going to go ahead and back out of that so we'll talk a little bit more about search and replace in a minute but you come down you also have a source control tab so as you make changes and we'll cover some of the basics of this you'll see the files that are changed you'll see the files that are ready to be committed you'll see ones that have been staged and so on and so on so all of your git stuff you can do right inside of vs code which is really nice there's also a debugging section down here so this allows you to do like a true debugging experience where you can have break points and inspect variables and all that sort of stuff and then lastly you'll come down and see there's the extensions tab and this is where you can search for extensions to add different pieces of functionality to your vs code instance now the couple of a couple of tabs i have down here these are extra ones that i have installed from extensions so we don't need to cover that but when you start off you'll see these four right here and you'll also notice that your vs code probably color wise looks a little bit different a little bit different so we'll cover themes here in a minute and i use the cobalt 2 theme so if you want to go ahead and look at this yourself you can go to the extensions tab you can search cobalt 2 and then when you get to an extension you can click to install it and it'll be ready to go and yours will start to look a lot more like mine but i will cover some of the different things that i have customized in mine here in a second so one of the things that i think is really neat with vs code is you can kind of customize the way things look and your space that you're working with with using shortcuts this is one of my favorite things so let me open up here's an app.css file so here's a random css file and i can do command b on mac or control b on windows and for all the shortcuts that i mentioned going forward command will be on mac and control will be the equivalent on windows so i will probably just stick with command or i'll say command and control and you'll know command is for mac and control is for windows so with that said command control b allows me to toggle open this sidebar and this is really nice because as a developer i might want to look at my files here but then as i start to write code i might want that to go away so i have more room to actually write the code that i care about so i use command b command control b to toggle this open all of the time and then you can take that one step further if you hover over these icons you can do command shift e to go directly to the explorer or you can do command shift f to go directly to finder or the search and replace you can do command shift g actually this one specifically is control shift g so control shift g on both windows and mac for the source control and then command shift d to go straight to debugging and then lastly again command b to make that toggle the sidebar menu open and close completely which is pretty nice now you also will get some information down here on this bottom bar i've got a few extensions installed so i get a little bit more information than what you will probably see but you'll have a little bit of information about probably the branch that you're working on so in this case i'm working in a master branch inside of this repository and it shows me down there which one i am working on so you get a little bit of information down there and you'll get a little bit of information up here to show you which file you're working on now i want to show you a couple of cool things with working with files there's a grid tab system in vs code where i can open a file you can have two files open at one time and then also i can drag these over to the side and notice you get this kind of darkened effect that splits the screen well i can have two files side by side and i can resize these to any combination of sizing that i want so not only can you have two files side by side you can also bring out files in a grid system with rows and columns so now i've got two went to pane side by side and then on the right side i've split that top and bottom and not only can you do that you can also customize how those are laid out as well so you can get as crazy about this as you want to with just adding on more and more files and i don't know that there's really a limit here but at a certain point it's not really practical to have all these files but here's three going vertically on this column and then two over here so you can do this any combination of that you want i typically stick with just having two files side by side i don't usually use multiple rows i typically just use two different columns and i didn't show this but you can also take a window over here and have three side by side and however many you want so it's only so practical depending on the size of your screen but you have the flexibility to kind of make that your own which is really nice all right one thing i want to let you know is your kind of holy grail your master command inside of vs code is going to be the command palette so this is command shift p or control shift p and after you do that you have the ability to kind of search for whatever you want any command that you can run inside of vs code you can do from here so one of the things i want to show you is something called zen mode under view so view toggle zen mode and what zen mode will do is basically get rid of all the fluff so all of the border items up here all the sidebar all of that stuff is completely gone and now i can just focus on my code lots of people love this feature where they've got no distractions they just see code i don't personally use this because i don't get too distracted by the other stuff going on but i think this is a pretty cool feature inside of vs code to be able to use so i'm going to toggle this back off by running that command again from the command palette again command palette is going to be your savior you can always go to the command palette and search for anything that you're looking for now another thing that you'll see is on yours by default you will probably see this mini map thing over here and this is extremely useful if we get into what's a bigger file in here do we have a big file so if we have a much bigger file like this the minimap over here will allow you to kind of scroll through all of these lines of code pretty quickly so instead of having to scroll with my mouse wheel over here you can just kind of select and really jump to wherever you want inside of your code pretty quickly so i don't leave the minimap on just because i don't want to take up space in my instance of vs code but you can leave minimap there and use it to jump around really big files now again going to the command palette you have the ability to toggle on the minimap and add it or get rid of it so you can do that just like that alright i mentioned search and replace so we started by doing this over in the left over here but we can also do this right inside of a file so if i wanted to search for center i could do command f and this will open the find window and i can type in center for example i can also and you may have noticed it did this before if i get rid of this and i select a piece of text and then do command f it will go ahead and automatically populate that with that piece of text which is really neat you can also from here go down and say all right instead of center i want to be right and i don't think this is a valid property for justified content but that's not really the point so inside of here i can do a replace of one instance or a replace of all so if you remember the shortcuts for this you can actually do some search and replace stuff really really powerfully and really quickly and easily inside of vs code all right so i could run this and do a replace you see that replaces right there now this is obviously in just one file you can also do the same sort of thing inside of what we showed earlier where i could search for center for example and everywhere i have center not something i probably want to do i could replace this with write you can see all the instances of where that is and you can even by file by file say all right in this specific file in tailwind.js replace all of the instances of center with write in just that file so you can go by file by file or line by line you can click on these and go to it and make a decision on whether or not this is something you actually want to change and vs code does a really cool example of showing you you're going to change this line to this line by replacing center with write so the search and replace stuff in vs code is really really powerful you can save yourself a lot of time if you understand some of the shortcuts of how to trigger the search and replace and then go ahead and act on them so speaking of shortcuts we've mentioned a few already we mentioned command or control b to toggle open this window there's also a few neat ones where you can do command w to close a file i use this a lot and then also if you have two files open or multiple files open whatever these are you can control tab to switch through these files so you can toggle through them like this i use this a lot as well you can also do control shift tab to toggle back the opposite way so if i've got a bunch of different files open up here and i want to go from profile to home that's good but if i want to go from profile to tailwind css i can do it backwards by doing control shift and tab to go and see that pop up as well so control tab and control shift tab on mac and windows will allow you to toggle through those files now another thing that i do a lot is i do command p to open up or to search files to open them so if i want to search for my app js i will do command p i'll type the name of that file and then enter and it will open that thing for me now i usually leave this sidebar closed so that i have more space for code and then i just come in and do this where i can search for the file press enter and now i've got that file open right here and then i can command w or control w to close a file and then i can toggle through that using these control tab and control shift tab shortcuts to go forwards and backwards i think one of the main things main pieces of advice that i have for people that are writing code is learn to use your shortcuts it will save you a lot of time writing code the less amount of time you spend on a mouse the more time you spend on your keyboard the better off your you'll be and the more productive you will be all right so a couple of other things i want to share with you is just how to uh work is just how to navigate through your text so what i mean is if i want to go from right here to right here i don't want to have to click so i could just arrow over so i could type the arrow key a bunch of times that's not really productive or i could start to use some shortcuts to help me navigate this text so if you hold down option and press left or right what this will do is it will navigate word by word and that word is kind of a loose definition where like this thing is a word this thing is a word this is kind of a series of connected characters so it really just kind of goes by where the space is so you can navigate word by word this way you can also hold down on mac you can hold down command and go left or right to get to the beginning and end of a line so this is really helpful as well now you can also hold down command and go top or bottom or up and down to get to the top or bottom of the file and on a windows machine i think you can do control and then home and end to do the same sort of thing so home and end will take you to the beginning and end of a line if you hold down your control and do that you can get to the top or bottom of a file as well so you might have to play around with that to get kind of comfortable in doing that but it is really really helpful if you can start to learn to use your shortcuts to navigate through text quickly you can save yourself some time keep your hands on the keyboard keep them off of the mouse and really become a much more productive programmer so i want to make sure that i undo all of these changes and i can do that with command or control z so i can hold that down and undo all the changes that i just made you can also as you would probably expect if you've used other editors you can select a line and do command c or control c and then command or control v to paste you can do that but even cooler you don't have to select the line so if i'm on this line and i want to copy this entire thing i can just do command c and then command v so i don't even have to select it it will basically inherently select the entire line by itself now another one of my favorites is you can use command d or control d to select the actual word that you're on so if i wanted my character was inside of this word i could use command d then i could use command f to be able to search that thing and then i could go and replace it with something else if i wanted to as well so again learning these shortcuts learning how to work with them will really save you some time now another thing that will save you some time in vs code is the built-in intellisense that vs code provides you so what i mean is if i start typing in document you see i get a bunch of things pop open here but if i'm working with the document element object inside of javascript and i press dot now vs code knows that this thing is the document object and i can scroll through to see all the different things i can do with this document object so if i scroll down you can see the difference in these little icons here this little purple one those are actually functions so a common thing you'll do in javascript is add an event listener so i could press enter on this and if i open up the parentheses to go ahead and call this function you can see vs code is also giving me some intellisense on what parameters are required here so the first parameter is going to be a type so you can see things like there's 86 more there's a ton in here so these are the different events that you can listen for and it's saying that that thing is a type of event and then the the second thing you pass is an actual callback function so if i type in click notice it's giving me intellisense in here so not only can i get click i can get close and can play and cancel on those sort of things and then if i go down to the second parameter i can read through this documentation to show me what all is needed including the callback which is the second part so intellisense is something that i use all of the time because as a developer i don't necessarily want to write every single word or every single character every single line of code i would rather have a tool take care of assisting that for me and vs code does a really really great job of providing you really powerful intellisense that you can use to save yourself a lot of time now another really cool feature i'm going to get rid of all of these changes another feature that i like a lot is i'm going to add a new file in here we haven't really shown how to do new files but if i click the new file up here i can get a new test html and i love this feature right here it's a feature called emmett which is built into vs code but emmett is its own thing so if you look up emit snippets in here you can go to docs.imit.io and you can learn a lot more about this but basically it's powerful shortcuts that you can use for your html and css so if i do the bang character here it shows me vs code does with intellisense that there's an emit abbreviation for this and this will give me the boilerplate code to an html file that's really powerful i couldn't write all of this stuff from scratch myself personally so i use this little bang character snippet to generate the boilerplate stuff or code for an html file now you can take this several many steps further if i type in an h1 for example and press enter that comes from emmet so i could do that this is in h1 i can also if i wanted a div with a class of container i could do div dot container and this will add a class to a div with that class of container that's pretty cool i could also do div with an id of contamin i'm not very creative so i could do container here as well so there's the div with an id of container i could also do a div with a class of container and an id of something special again i'm not super creative here there's an id and a container and what's even cooler is if i undo this and go back and get rid of div and then finish typing this out div is kind of implied here so if i don't specify the element that i'm creating it will infer it as a div so i could also do an h1 with a class of title and then the id of cool title or something like that so it does all of that stuff in line you can also repeat stuff so if i did a ul inside of that ul i could do an li times three and that will generate three lis for me you can do an input with a type of text there's all sorts of these snippets to make writing your html so much quicker and easier it's really worth looking and spending some time to figure out how to leverage the power of emmett to help you generate snippets or use snippets to generate your html code now you can also do this in your css i'm going to get rid of this file so i'm going to get rid of this thing and then i'll open up a css file so so i'm going to try to create a new test css file in here and if i start off with targeting every element for example if i wanted to set the cursor as a pointer notice i type cur and i get some intellisense with emmett abbreviations for cursor pointer i could do a padding so if i type in p that will give me a lot of things in here well this is just kind of regular intellisense but if i finish typing p10 for example notice that autocompletes to padding of 10 or if i do m10 things like that so emit is really really powerful for you to be able to create html css code using these really short code these really nice short codes or snippets and save yourself a lot of time and energy as well so you definitely want to spend a little bit of time just kind of figuring out how to use emmet to work best for you now let's talk about some vs code settings so if you're really kind of interested in what i have set up here and how i have this set up let's go and look at my settings and so you can open the settings by going to this cog wheel over here or you can do command comma or control comma to open up your settings panel so let's start with just the font family so i have in here installed on my machine something called cascadia code let me pull that up for you cascadia code this is a free font by microsoft that is really really nice so you can install this cast this cascadia code font and then you can choose to use it inside of your font family here now just to show you if i were to get rid of this so if i cut that and now come back to my code this looks very different so this is kind of the default stuff that's set up in vs code but i like to have that really fancy cascadia code here and now it looks better so notice also that as i save or update these settings vs code is reloading in real time to show you those new changes which is really really nice another thing i love with my font is i have something called font ligatures turned on and this is an example of a setting that you have to change directly inside of the settings.json file so not just inside of your vs code editor and you see i've got lots that are changed in here but i can set the font ligatures to true and font ligatures are these cool little combination of characters that i really enjoy so let me show you a couple of examples of this you can type double equals now see that becomes one character there instead of two if i do a triple character now it becomes a three barred thing if i do a not equals now this will come together like that and if i do a not equal equals you can see that comes together too you also get a little arrow icon so if you do arrow functions in javascript you can get that as well so this is a personal preference i think font ligatures are really cool but if you don't like the way those look you can turn those off by coming into your settings json and then just turning that thing to false i think they come false by default so you may not even have to worry about it so another thing you can look at is your font size i love how easy it is in vs code to just search for your property see what the different things are that you can change and then change that right here so i've got my font size set to 20. if i bump this up for example to 40 now my code is going to look a lot bigger which is probably not very practical but this is really easy to just change if you're doing a demo or something and you want to be able to show people your code now you can also change your zoom level so if i type in a 4 for example notice this is going to zoom in vs code as a whole so this is going to make everything bigger again if you're doing a demo for example and you want people to be able to see every part of vs code a lot bigger you can do that with your zoom level i'm going to turn this back down to two to make sure that i can see this comfortably now you can also do a command or control and plus or minus to zoom open as well and you see that when i do that you see the change in here so you can do that with your shortcuts or through the settings just like that all right there are tons of different settings in here that you could change one of the ones that i like is a word wrap so what that means is if i have a line of code that goes really really far and i'm just typing out kind of dummy code here notice after i cross this bar it wraps over to the next line so i personally like to have this turned on so that i don't have to scroll horizontally to see the end of it a line of code and you can notice if i turn off on here uh now i have to scroll to be able to see this i personally don't like that so i usually leave word wrap on now you can also set the word wrap column so notice this bar over here is set to 80. if i set this bar to 4 for example this is going to look terrible now if i set this to the word wrap column now this thing is going to wrap my stuff at four characters which is probably not what you want even if i set this to 40 that's still gonna look a little tough there to see so i'm gonna reset this back to 80 and then i'm going to turn this back to kind of regular and uh now again you can see this is wrapping at this line and it has that line to show you what is there all right there's some other cool settings down here if you do um anything with your files over here you can tell vs code to not show you certain files so you can add a pattern in here and i can add node modules for example and this directory should just disappear after i do that so notice node module is not no longer showing inside of that and then i can just undo that by getting rid of this setting here by clicking this x on node modules now that thing has come back and you get a really really kind of powerful ability to customize this thing here all right you can scroll through and and do tons of different settings in here i'll show you a few more as we go through one of the ones that i like is the cursor uh to be blinking and you can have this to be and expand as well so this is just kind of a cool effect where you can see my cursor will kind of expand there i think that's kind of nice and then you can also set your cursor style to a line or a block for example now this thing is a lot thicker on that letter that's actually kind of wild i've never done that one before so you can customize so many things in vs code it's really really nice i would i would recommend just spending some time inside of these settings to really try to get things the way that you think uh work best for you all right that said let's move into extensions and themes and let's start with themes because these are going to be extensions themselves and they can kind of show you how to customize the look and feel of your editor even more so i mentioned that i use the cobalt 2 theme so you can search this and search cobalt 2 and then this is the official theme by westboss and so after you install that theme then you can select it and use it so you can you get a button in here for set color theme you can also go to your magical command palette with command shift p and if you search theme now you can scroll down to the color theme press enter and now you can choose and watch this as i scroll through vs code will update in real time to show you what these different themes will look like and you can see there's a ton of really cool different ways that you can do this night owl is one of my favorites this is from sierra drastner i like night owl a lot and this has a couple of different versions so you have night owl with no italics there you've got this red theme i can't imagine really working with that but it's a cool one shades of purple is a really nice one as well from a mod a wise hopefully i'm pronouncing that right so he created this thing because he's a big fan of purple and i actually think it looks really really cool uh they're solarized dark and these are oh another one i want to show you is winter is coming by john papa i really like this one a lot as well i think this is a really really nice kind of dark theme here so you can search for tons of different themes you can search for the ones i just mentioned night owl here you get that one there and then winter is coming so there's the winter is coming one so if you just search themes in here now you can come and see a ton of different things that you can try out there's a linux set of linux themes in here there's duotone dark themes there's the zeppelin themes that's kind of wild and cool there's tons of themes in here they're really easy to install you just click a button to install and then you go into your settings and you choose which theme you want to be active so i'll let you kind of play around i showed you a couple of my favorites you can go in here and look for a bunch of different ones and go from there now let's talk about some other awesome extensions that you're absolutely going to want to have here's a few that i really like there's an extension called prettier which does code formatting in vs code so you can install this extension and then also come in to your settings and say format on save so this is a combination of using an extension as well as a setting for this and if you set this to true what's going to happen or if you check this what's going to happen is it's going to use prettier and it's going to format my code every time i save so if i kind of mess up some of the tabs in here and i put this stuff like all over the place and it this just looks like really terrible code when i save this now it's going to format all of that stuff for me so the combination of using prettier as an extension as well as the setting in vs code for format on save is incredibly powerful i do this for all of my projects so this is definitely one that's worth having i also use an extension called advanced new file and what this allows me to do if i come and grab the right one so this is the one with dashes what this allows me to do is instead of coming over here and choosing to click to add a new file i can run my new file command so advanced new file if i run that it gives me a drop down to choose which directory i want to put this file in so i could put this in the workspace root and then i could call this test.js and then now that file is created and you can see that over here again i look for any excuse to use shortcuts and extensions to help me do stuff versus coming over and actually clicking on things with a mouse so that's one of the ones that i use a lot myself as well another one i find handy is the better comments extension what this will do is allow me in my code to write different types of comments like to do and it will highlight that different color so if i say something like exclamation that's going to turn this thing red and there's also a star for a green comment and then if you define something as a param it will highlight that or color that as well so i think this is really useful for you to be able to leave code comments and have them be kind of highlighted so that you can really see as you scroll through your code they really jump out at you and you can see what is really useful there so another great feature especially if you're a javascript developer is there's an extension called quoca which gives you a javascript playground and typescript so if i run the quoka command i can do a new javascript file and then inside of here i've got like a live javascript playpad or scratchpad or whatever you want to call it and i can type javascript right inside of here and i can see the output over here as well as the output logged out over on this side as well now this is anytime i want to try out a new piece of javascript this is my go to this is what i use the alternative would be to go into google chrome for example or whatever browser you use and open up the console and type something in here but that's not really convenient when you're already inside of your vs code editor and you already know shortcuts and things and snippets and stuff that you can use inside of vs code so this is what i do quoca is amazing for just a live scratch pad for either javascript or typescript another one that is great is the live server extension and if i search for this this is from ripwickday and this has over seven million downloads it's really incredible so if i typed in like a test.html here and stubbed this out using my emmett snippets and came down and said hello world one inside of this file i can do my command palette and i can do live server and you can open this with live server and what this will do is it will serve this on a real port so we'll start up a server serve this from a real port and i can update this file and as soon as i save now it's reflected inside of the browser as well because of that live server extension it handles all of that stuff for me which is really really amazing you'll definitely want to have this if you're doing any sort of basic html css and javascript stuff installing that extension will make it really easy to run that stuff a couple of other nice ones there's a polar code extension this one allows you to take really sweet looking images of your code so you basically copy in some of your code you can see the example gif here you copy some of your code you paste it in and then polar code will generate this really sweet looking snippet in here for you so that you can have pictures that you can share on twitter or in your blog post or things like that there's also the auto rename tag so if you do any html work again this one is really nice and what this does is if i start to update the title here and make this an h1 notice it's auto updating the closing tag as well so you'll definitely want to have that extension to help you out with some of some of your html stuff and there's also the bracket pair color riser and this one is pretty sweet because inside of javascript this will color your brackets to match each other to show you which one goes with each so notice that we've got a purple color here and then we've got a blue color to show that this one goes with this one this one with this one and this one with this one this is really nice it's kind of subtle but especially when you're reading code and having to do that it's nice to just have it be pretty easy to look at and see really quickly all right so let me just scroll through some of the other extensions that i use that i think would be useful for you as well there's one here called bookmarks this allows you to set bookmarks in your code so if you're working in really really big files or a really big project you can set bookmarks inside of your files and then be able to toggle through your bookmarks so if you have like really important spots inside of different pieces of code you can mark those and then be able to move through them using the commands with this bookmark extension there's also cloak this is a real really nice one if you're working with private credentials and you do screen recordings like i do uh cloak will take a dot env file so if you use env to have your environment variables and they're private you don't want people to see those which you probably don't you can turn on cloak and it will hide those things from everybody that's watching this is really useful as it says here if you're presenting on stage if you're streaming on twitch or youtube if you record screencasts of your code like we do here another nice one is csspeak this allows you to to view the css for a given class or id so you can peak that where you don't have to go all the way over to the css file or if it's coming from bootstrap or something like that you don't have to open up the source files you can kind of see that right in line in your code next up we've got the debugger for chrome this one we will actually have a section on this coming up of debugging inside of visual studio code and we'll use this extension to do that there's this dot env one this is pretty simple but it just gives you kind of a color syntax here for working with environment variables inside of a dot env file so if you've never done environment variables if you've never done env files that's totally fine if you do this one might be useful for you next up is the editor config this is a basic sort of formatting thing for your code that you can use across different types of editors so if you have this dot editor config file you can use this and embed it in your project and kind of make sure that your projects stay with a certain format across different teams and people editing and that sort of thing so this extension enables that ability inside of vs code if you are a react developer this is the most popular react extension that i know of with snippets we'll talk about snippets more in a second for react redux graphql and react native so there's lots of good stuff in there that you can take advantage of all right this is not maybe relevant to everyone but i just wanted to kind of highlight this extension here is for fauna db a great database option that you can use for your applications and i just am wanting to highlight here that there are extensions for lots of third-party technologies as well so whether you use faunadb or firebase or netlify or a ton of different options out there you can almost always find an extension so if you have a product a third-party product outside of microsoft outside of vs code that you work with go and give it a shot to see if there's something out there that you can find import cost is another one that is great for javascript developers this will basically just show you how big your import statements are so if you look at the example image that is not showing here but if they had the example image up it would show you that uh you'll get some text right next to the import statement to show you how big that import is that way you can make sure that you're only importing the things that you really need and not anything extra all right we've got the live share extension down here this one will actually have a section on in a minute we've also got the markdown pdf this is something i'm looking to try out myself to create an ebook where you can type markdown inside of vs code and then be able to export that to a pdf now speaking of markdown just to kind of show you how this works in vs code you get some pretty good support for markdown right inside of here so if i open a markdown file here is the source but then i can also if i open up the command palette i can open up a preview to the side so here's my markdown preview right in line with all the markdown stuff that i see over here so i see source code as well as a preview all inside of the editor now i've used a few different things for editing markdown i've used stack edit which is in the browser but this is really nice because it's in the same place where i write my code and i can see that live preview right there as well so with that extension that i mentioned you can take that markdown and then export it to a pdf for an e-book or something like that all right and i think we've covered the majority of the most important ones here so again just know the extension ecosystem in vs code is great there's tons of stuff there there's lots of different options if you have an idea for something go ahead and search for it it's probably already there all right now that we've covered extensions let's talk about how to customize your keyboard shortcuts and i waited until we covered extensions because some of these things you can just kind of get with an extension and take care of all of that stuff for you so if you hit this settings cog wheel over here in the bottom left you can open up your keyboard shortcuts and as always if you um open up your command palette you could also do this from here so this preferences open keyboard shortcuts will get you to the same place and keyboard shortcuts in vs code are really nice i think this is a pretty powerful thing for you to be able to customize so as you would probably expect they have a list of commands that you can then add a key binding for so add cursor above and then they show you the the shortcut here let's do let's search for search or actually let's do a find so what is the shortcut for find we talked about this earlier it's command f or control f and then you can see there's also lots of different other options with find as well where you can find previous index and so on so this thing shows that this command is going to be command f and you can actually edit this right in line which i think is pretty nice so it's pretty nice so if we um now specify some weird combination of things so i'm doing command alt shift i that's probably not what i want but then i press enter and now this thing has been updated and now i would need to press command shift i to go ahead and find something so let me go ahead and fix this back to command f that's what we really want all right so that goes back to normal and let's just search for another option in here let's see if we if we type select and then add selection to next find match so if you remember we actually used this command command d earlier to select a given word so if you're inside of a word you can use command d to select it and go from there you can also see in here we've got x we've got shortcuts for this is actually the bookmarks extension so that bookmarks extension that we talked about a few seconds ago has its own keyboard shortcuts or commands that you can add keyboard shortcuts as well so some extensions that you install will have commands available some of them will already have key binding set to those some of them won't have key binding set so you'll have to go into the command palette to check those out all right one of the ones that i have customized myself and i kind of alluded to this early on is the advanced new file so when i want to create a new file if i come back to let me close out some of these extensions when i come into a file and i press command n this is going to ask me where i want to create the file and i can say root and then i can say test dot something and that's going to create that file and open it inside of vs code which is a really nice workflow now let me show you what happens if i don't have that set so if i if i just remove this key binding by right click and then remove key binding that will go away and then if i press command n inside of here it doesn't do exactly what i want where it creates this new file but it doesn't have a name and it doesn't it's not in a directory anywhere so i would then need to go and save that file directly so that's why i like having that advanced new file extension and then specifically set to that key binding now i can just update the one that is here so this advanced new file i can just do this and now say command n and that thing should be okay and notice also that when i did that it's telling me that three commands already have this binding so this will allow me to know that there are some commands already have this and i need to double check hey do i really want to do this and then vs code is smart enough to know that this command down here the new untitled file that's the one that i show you showed you that for me is not really optimal so this is a default source and then mine the one that i created up here is a user source so it's going to take precedence over the one that comes default with vs code so it handles the overriding of these commands really well all right so there's my uh new file and then if i trigger this now with command n and notice that there's no delay here this automatically reloads as soon as i update the command shortcuts now they're available for me to use another thing that i want to show you is if we come down here and we'll talk about the built-in terminal here in a minute but if we look at this last one not only does it have a command and a key binding it also has a win now this is basically a win is basically a state that you can use inside of vs code to determine when this shortcut should take place which makes the combination of shortcuts very powerful so let's look up vs code shortcuts and i want to show you just so you can be able to go out and look at these later on for yourself if you need to do some extra research on how to do this so let's search for the when and i'm scrolling down here to the when clause context so you can do some conditional things in here when the editor language id equals typescript so if you're specifically in a typescript file a command might do something specific versus another one if you're on linux or if you're on windows you can detect that way and so on and so on so then you come down and you can see all the different contacts the things that you can use to determine when your your shortcut should be triggered based on that key binding so if the editor is focused if you're actually focused on the editor if the editor has selection meaning you've already selected a piece of text if you scroll down you see the operating systems is windows mac linux there's also an is web because there's a lot of embedded versions of vs code inside of the browser which is pretty cool and then you've got some different modes here we'll talk about debugging here in a second there's so many different options in here for you to choose from this gives you kind of the ultimate ability to customize when your shortcuts should be triggered now notice that i've got these three key bindings here and again vs code is smart enough to know when to trigger each one so because i have this advanced new file as a user source it takes precedent over the default source here and then this command in when the terminal is focused so when i'm actually down here in this terminal will take precedence over that if i'm actually focused on the terminal so vs code already has this ability to kind of take your commands that you define and then add precedence on top of them so now that you know how to customize all those shortcuts and again there's tons in here you can scroll through you can search for what you want and just customize it to your heart's content after you have that or maybe even before you have that it's interesting to know that there are some key map extensions in the marketplace as well so if for instance you come from sublime so you use sublime text for several years you come over to vs code and the shortcuts aren't exactly what you're looking for well the sublime text keymap and settings importer that can actually import settings from sublime and then also basically override all of your shortcuts to match what should have been or what would have been inside of sublime that way you can keep the same shortcuts that you're used to and you can kind of go about your business just like you you had in the past now there's sublime i wonder if there's notepad plus plus notepad plus plus keymap there's that one i wonder if there is atom keymap all the different yep there's atom keymap there and then there's probably brackets as a key map maybe there's not brackets as a key map but you can find for most of those popular editors text editors you can find a key map extension that you can just bring right in and then go about your business just like you had in the past so that is the section on customizing shortcuts the other thing i want to talk about customizing is your snippets so if we look inside of just the javascript file down here i'm going to show you a couple of snippets that are kind of built into vs code so if i type clg notice vs code is now popping up with this snippet here and it shows me what it's going to output so it's going to output a console.log so there's a snippet there and we talked about all the intellisense that vs code gives you so if we do document dot and then get element by id something like that we can go ahead and complete so vs code gives you some built-in snippets and then some intellisense on knowing what functions and things are available but if you want to customize and add your own snippets you can also do that so the way that snippets work is snippets get stored inside of a json file and if we click on the cogwheel and go to user snippets or if we just open the command palette and open snippets as well configure user snippets it's going to ask you which type of language are you working with so you can have global snippets which apply just anywhere regardless of what file you're in and or you can have snippets that are specific to certain languages so if we look down at the javascript.json i've actually got a few of these that i use in my code and i'll kind of walk you through how those work so let's just start off with the the very basic here of the console log example so if i wanted to have a new snippet for doing a console log statement i would one give this kind of a title or a key here and this could be jq console log and then that thing is going to point to or have a value of an object that will have different properties so the first thing is the prefix and this is going to be what is the short code that you want to use to trigger this snippet now this is not super practical i'm just using this to differentiate between the other clg but let's do a prefix here of jq clg for console log and then we'll do the body and the body here is going to be a string so we'll do the body is console and then we'll have the description so if we needed some extra details in here this will write a console log statement so pretty straightforward so after you save that thing now this snippet is ready for you to use so inside of my javascript file it doesn't matter what javascript file i'm in i can type jq and notice i get the prefix here of popping up the intellisense for my snippet and it shows me the description over here and it shows me what it's actually going to write so if i press enter now it actually writes out that log statement now a couple of things we might want to update instead of ending with my cursor over here i might want to actually end with my cursor in the middle so that i can type in the input for that console log so one of the things you can do is something called tab stops so if i do a dot or a dollar sign one here this is saying that i'm going to be entering in some pieces of information and this is the first one that i'm going to enter so now if i do the same thing jqc log and press enter now you see my it puts my cursor there so i can type in my object is what i want to log and then come over and maybe i want to actually include a semicolon and then after i finish entering in the information here i want to go down to the next line which can get kind of interesting so a couple of things let's go ahead and add this semicolon and then if you're doing snippets that have multiple lines you need to put them in an array so you have an array of strings so there's the first string there and the second one is going to be on a new line so we can have that be tab stop two for example so let's try this out again and uh let's trigger the snippet with jq clg press enter type in my object and then tab will take me to the next tab stop now you can have as many tab stops as you want the interesting thing about this one is the dollar sign zero is actually going to be the very last place that you end so after you finish all of your tab stops that are one through x or y or n or however many you do dollar sign zero is going to be the very last snippet so that's going to be where your cursor goes after you've finished all the previous tab stops so let's save this let's do the same this will do the same thing i just want to show you the tab stop of zero there so jq clg and type in my object and then return or tab actually and that will bring me down to this next line so that's a pretty simple example and these can obviously get a lot more complicated here's an example actually another simple example of using environment variables and i do this a lot where if you're using environment variables you have to type out process.env.something and maybe you don't want to have to do that so i created this this extension the snippet that is just env and that will replace it with process.env and then i can type in the actual variable that i'm working with all right and if i scroll up a little bit let's scroll up to the top a couple of the ones that i like here is a used hook in react this may be completely new to you so don't worry if this is new but same thing here it's got kind of the key here the title it's got a prefix it doesn't have a description because i didn't add one but then it's got the body and it has two tab stops so here is one and tab stop two oh actually three tab stops here's tab top three and then tap stop zero goes to the end of the line and then i could return to get down to the next one now here's a great example of one that would uh be really useful and they have one built in to vs code if we type in four there's a couple of different for loop snippets so here's one that comes from vs code itself and then here's the one that i created which is 4r f-o-r-a-r-r so inside of here you can see this is a multi-line snippet because it's got an array and each line or each item in the array is a string and so we we define a pretty standard for loop that uses an array so it says dollar index well we haven't seen this yet we've seen dollar zero one two three four and so on you can instead of using numbers with your dollar sign you can actually give them a name and this will allow you to repeat this same variable in multiple places so what this looks like is if i show you if i trigger this snippet 4r i press enter notice there's multiple cursors now so there's a cursor here here here and here that's because that index that i probably is what you're going to use it for is repeated in several places because we gave it a name so if i type in i now it's going to replace that in every location which is really nice and then i press tab well now if we look back at the snippet now we've got our array tab stop and that's used twice too because it's named so now we can type in my r that's going to be the name of my array and then i can tab over again and then i come down to the end of my snippet so this is a really fun way or not i mean it is fun it is cool but this is a really practical way of being able to use that same value in a couple of different locations here's another example of that one of the things that i use a lot in vanilla javascript is the document.getelementbyid and usually typically the id of that element is the same name variable name that i want to call it inside of javascript so i use this snippet to grab that value here and then reference it here as well so it's going to use the same thing so let's go ahead and trigger this snippet with git id and this is going to write that whole thing out and i'll say my cool dom element and notice that completes at the end as well and then i tab down to the end of the line because that's where it ends all right i've got a few in here for an event listener and then for me especially inside of doing a fetch request i always have to do a fetch and then surround it with a try-catch to handle errors and then log out the air get the data back from the fetch if i want wanted to so here's an another example of of me just thinking about something that i write all the time that would really help me by having a snippet i could just do that right in here so if i run this snippet it goes ahead and writes all of that code for me i can tell it i want to get the data from coolapi.com and then tab and then now i've got all that stuff taken care of now i can just go ahead and handle the response so i would say snippets are one of the most powerful features inside of vs code anytime you see yourself writing a bunch of code over and over again and it never really changes you might think about or a lot of it doesn't change you might think about how to use snippets or define snippets inside of your snippets json file so that you can save yourself some time and effort later on all right now that we've talked about settings and themes and a bunch of different aspects of vs code i want to talk about what previously was an extension if we search in here the settings sync extension now this is a really cool extension that came out a while ago where you could download this extension and it would save all of the customizations that you've done inside of vs code into a gist inside of github and what i mean is it will take all of your configurations your snippets your shortcuts your settings your extensions it will take all of those things and then save them basically in a file and then you could use that file or share that file across different instances of vs code so that if i went to another computer opened up vs code i could sync my settings settings sync here and then i could have all that stuff ready to go so let's let me open up my github and then i'll open up my gist to show you what i'm talking about so i scroll down to jest and then come down here to cloud settings now this is where the settings sync extension will save all of those things and if i open this up you'll notice i have a few different files so i've got cloud settings this is just for like metadata of when the last time i updated and what version i think i was on for that extension and then i've got a file here for all the different extensions that i use actually i think this is an uh not the correct one let me open up this one this has all the stuff so inside of my extensions.json this lists out every single extension that i had installed notice notice this is a pretty big file so all of my extensions would be ready to go all of my custom key bindings if i had some which i do here for mac all those custom key bindings come over the settings that i've overridden with vs code the snippets that i've created we talked about a lot of those snippets here for markdown as well and python all those things that we've talked about so far you want to be able to use on different instances of vs code if you have to go to another computer so up until recently the setting sync extension was the way to go to be able to do that but now this is something that is built into vs code so let's come in to settings and i'm going to go actually i've got a tab open here and if i look in this bottom left i've got this icon here for my account and this says settings sync is on and one of the things i'm gonna do to show you how this works is search for setting sync and then turn this off and i'll turn this off now and notice inside of vs code this is what you'll see when you open up your settings window you'll see this button here for turn on settings sync now what this is going to do is vs code is basically going to manage all this stuff for you behind the scenes and make sure that it does the same thing that we just talked about with this third party extension but built into vs code so if i click on turn on settings sync it asks me what things i want to actually synchronize and this is yes my settings my shortcuts my user snippets my extensions my ui state so i'll select all those and i click turn on and then you'll either have to log in with your github or your microsoft account now i've already logged in in the past so this is basically kind of auto completing that login process you will be taken to github have to log in with your github credentials and then you'll be brought back here and you can see this says that setting sync is turned on if i look at i don't need those details there but if i come over to now my little window here and look it says that i'm logged in with github and this thing is turned on which is pretty nice now i can also if i look at the search for settings sync again as well and come down to show sync data there's a little tab here that it will open to show me the recent synchronization that has happened as well as the machines that are synced with this setting or with these settings so if i had vs code on multiple different machines i would see in here which ones are synchronized i could refresh this to get a new list i could edit this name so that i could be more specific about which one i'm working with and then i could also turn off settings sync on different ones so if i didn't want all of my things to be synced across different instances of vs code i could turn that off on some of them and keep it on on others and notice here that in the activity uh this shows me that 35 seconds ago 35 that these things were updated and it gives me just a pretty cool view of what all is going on in here all right so again previously you would have had to jump for another extension now with this built-in setting sync you can do this right inside of vs code not have to grab a third-party extension and be good to go with making sure that all of your things are stored across different instances of vs code now i took a second on here to bring up another instance of vs code i've actually got the vs code regular edition the stable edition open is what we've been working with and then now i've got open the vs code insiders edition as well and this thing has our settings sync turned on as well so if we look at the show synced data tab you can see it's been doing these synchronizations and you can see on both sides there's two different machines that have been synced there's the vs code which one is this let's make this a little bit bigger so mac number one that's the current and there's the insiders mac over here so those things are synced and what's cool is if i come in and search for theme and then go to toggle my theme and i want to change it to something uh what crackpot contrast sure let's do that and press enter notice it changed over here and then if i scroll back over it should change on this instance of vs code as well so notice it took a few seconds but that came through really really cool and then i could change this back to cobalt 2 and then this should be able to now update over here in a few seconds as well and you saw that come through so the settings sync extension is super super powerful it's really cool because now real time you can see these things change and make sure that you never miss any of your settings in vs code all right now i want to take a look at debugging inside of vs code this is one of the most powerful and probably underrated features in vs code so i'm going to open up this this project here which is a vanilla html css and javascript project i'm going to open this one up and i actually added a couple of test files here that don't have anything in them i don't need so i'm going to delete those and then i'm going to open up my html file and with that go live extension that we talked about earlier i'm gonna open this with a live server so this will open it at port 5500 and send me to the index.html page now what this demo is is the ability to take a color and then lighten and darken it so if i enter in some sort of color and here i can then lighten or it looks like that type that in wrong should be d so here's my red color i can darken that color or i can then take that color and lighten it down to basically a white so this is vanilla javascript and i want to show you how we can actually debug this so let's open up our javascript file and let's just look at one of these functions here this toggle button so when we click on that toggle button we're applying and removing some classes to do the styling on here so notice the color changes and then this little piece in the middle changes color as well as moves over to the right or the left depending on which side it's toggled to so i look at my debug tab this little bug and play button here and it's got a run and debug button here and it's going to ask me this is kind of a new feature inside of vs code where i can now choose where am i going to run this thing while i'll run it in chrome and it went ahead and created a configuration in here of where this thing is going to run so i'm going to say this is going to run at 5500 because that's where it is running now so with that in place once i press this button it's going to open up that application to 5500 and now debugging is enabled so that i can debug right inside of vs code so notice i've got this menu button up here none of these things are really active because we don't have breakpoints set and we aren't paused for debugging so what this looks like is inside of vs code to the left of the numbers i can now add breakpoints so there's a little breakpoint there and when i click this toggle button it should then trigger that breakpoint inside of vs code so we'll click this now it goes away from chrome comes over to vs code and hits right at that break point now if you're new to debugging this may be a lot but the alternative to this is typically people will just kind of do console log statements instead of true debugging but true debugging is incredibly powerful so with this thing paused at this line now some of these buttons here are enabled so i could play and this would just say all right go ahead and continue as you were and it goes to darken now let's click it again instead of play we can come down and we can step over so we can go through line by line and see what's going on notice that skipped that else and then now that we're at a function that we have this reset function that comes down here instead of skipping over that line we can actually step into so step n2 will go inside of that function and go through or allow us to go through line by line here so i could go through and go line by line and then i could continue when i was ready but one of the things i want to show you is that you can inspect variables in here so if we look at our script actually i can see all of the different elements that i have created inside of my javascript inside of this script inside of this javascript file so if i look for this input color for example i can scroll down and i can see the input color and it shows me what selector that thing is and then i can look at here's all the different properties and functions associated with that so you can see i've got all of these in here as well as the functions that i've created so i can inspect all of these variables and then you can choose one of those variables and tell it to watch for that thing so if i say watch for the toggle button here's my toggle button and if i click the play in here and then i click this again i come back to my debugging and then i click this toggle again now it's going to show me right off here since i'm watching for this variable now i see it right now and i can see that it doesn't have the class of toggle so i'll go ahead and play and then if i come back and i toggle this thing again now we should see that it has the class of toggle so this is actually an interesting way to i could check for dom elements to see if classes are being applied as opposed to let me make sure i play this again as opposed to coming into inspect and then going into the element itself and looking inside of there i could see this inside of my watch so overall debugging in vs code is very powerful it's one of those features that is highly underrated and very very useful for you so that is an example of debugging kind of vanilla javascript i also want to show you an example of debugging something in node as well all right so i've got a new application open this is design and build a chat app with socket i o and node.js so you can actually grab this code on github if you're interested and there is a video series on youtube on how to build this as well but with this stuff here i made sure to install the packages and i cd into my part 8 directory which is really where i want to be because that's the final step of this project so if i open up the debug tab here and let me make sure that i can open this server.js because it told me i needed to open up a javascript file and then i come to debug and let's say run and debug and then i'll click node i didn't really have to do anything extra but now this thing is ready to go and if we open up our browser to localhost 3000 we should see now this application is up and running and it actually works so this thing is running our application now we should be able to set a debug point and do the same sort of thing like we did before so let's do a debug breakpoint on the message handler so when a message actually comes through let's set a breakpoint and let's trigger it and then come back over here so let's try to type out a message hey this is james and press send this now hit that break point and we can do the same things we did before look at variables set watches i didn't talk about this but you can see the call stack this shows you the history of the functions that were called and then i had the ability to step in step through all those sort of things as well as just go ahead and click the play and it will go ahead and send that message so just wanted to add on here a small example of what it's like to debug an application that uses node not just small javascript but the cool thing is that vs code makes that really easy for you regardless all right we've mentioned this a few times but vs code has a built-in terminal you've actually seen this a little bit right inside of vs code that i want to talk about as well so i want to say that a lot of or some people don't prefer to use the built-in terminal in vs code they prefer to have a separate window for their terminal i'll tell you that my personal preference is that i really enjoy having the terminal built right into vs code so that i i can do everything that i need to in my editor and not have to worry about other applications so as you would probably expect you can do everything inside of this terminal that you would in your regular terminal so i use an application called hyper that's what i use for my terminal and if you're on mac you'll have like the built-in mac terminal if you're on windows you might have you might have powershell or command prompt or git bash or things like that but this is my terminal and it uses zsh instead of bash so zsh is actually the default shell on my computer so yours will pick up your default shell and i think this is zsh has probably become the default shell on mac in the last couple of months but regardless you'll see which shell you have here to be able to use and you can select your default one if you need to change it but this is going to open up and have basically the same experience that you would have inside of your regular terminal which is really really nice now a couple of things i want to show you on here is you can have multiple instances of your terminal you can set them side by side which is kind of cool i don't really use this myself and the reason is that i end up having multiple tabs inside of my terminal but not side by side so what i mean is let me kill this one if i do the plus over here this is going to do a new tab so you can see now i have this drop down between one and two and so this is how i usually work with mine but then i did some shortcuts on here to customize this and make this a little bit easier to work with so i customized my shortcuts to be able to use the same way i would use up here if i have two different files the control and tab to be able to toggle through them i have that set up as a custom shortcut for my terminal as well so now i can tab through these and not have to worry about losing out on space by having them side by side but if you have enough space on your computer and it seems to work out well you can do a split and you can also have multiple of these so three four five you can kind of get crazy with this and it's probably not very practical at that point but it's something that you can do now you also have this little button to go ahead and expand this all the way up which is kind of nice there's also control and command and up or down will kind of increase the size of this or decrease the size of this by a little bit to make it a little bit bigger or a little bit smaller so i happen to use that one a lot as well now you notice on this delete over here if i hover on kill terminal it it says command w that's not a built in command that's one that i customize for my experience as well that way it will match the command w or control w on windows that i use to close files up here i can close tabs just the same inside of my terminal so again i've done some customization to make sure that this works exactly how i would expect and the other thing i think you should know is that control and tilde will toggle open this terminal so we mentioned early on that i use command or control b to close that side panel i also do control and tilde to open and close the terminal that way i can have a lot of space for my code if i need the terminal i do control tilde and then if i need the sidebar i do command b getting used to those shortcuts is really really useful all right and then if i come into the settings in here as well you notice we have lots of settings or a handful of settings for the terminal as well all right so if we search terminal and then i'm going to click on the terminal category here all right if i scroll down and start to look at some of the settings associated with terminal keep scrolling down let's get to some of the fun ones one you can customize what your shell is so if you want to customize that based on the operating system that you're on you can do that so let's look at there's a cursor style so we can have the block or a line and notice this becomes a lot thinner you can have a cursor width so i could change this and make this a lot bigger five alright so and i think actually the one is kind of interesting you can also have this cursor blink so similar to how we had our cursor acting inside of our code now this thing will blink when i have it focused on i'm going to scroll down and grab a few more of these settings you can change your font family and font in here and actually i need to update this to cascadia code because i had used and this may need to go inside of quotes because i had used fear code in the past and now i'm using cascadia code although i think i'm getting a little bit of an odd thing there so let's check back to fear code and that goes away so i'll just leave fear code there you can change the font so if you wanted the font size and your terminal to be a little bit bit bigger or smaller you could do that as well so very similar to how you do inside of regular text font weight of bold line height letter spacing if i did a 10 for letter spacing this will space things out a lot probably not what we want but you get the ability to customize those things right inside of here which is actually pretty nice and i think there is a terminal position or location default location so this this controls the default location of the panel which includes the terminal the debug button and so on and this can either be at the bottom right or left of the workbench so if you wanted to put this on either side you could do that as well it looks like we've still got our debugging session up so i'm gonna go ahead and kill that so anyway inside of your built-in terminal one i would recommend knowing how to toggle that open and closed so you only have it open when you need it know that you can create multiple instances of your terminal by adding the plus or by setting them side by side you can close them you can make this full screen close that back down here and once you get used to kind of navigating that and working with it alongside of your code i think you'll really really enjoy it the way that i do all right so we've got our debugging section is out of the way we've got the built-in terminal out of the way now let's take a look at some of the get integrations so inside of here we've got the source control tab and this is actually telling me that i've already got a file that has changed so let's open up i'm going to open up a different project let's open up a recent let's go back to that quick colors one and uh yes this is actually asking me if i want to kill a terminal session yes i'm okay with that and let's come back in here and notice that this part is red if i do a get or not red but yellow if i do a git status notice it's telling me that some things have changed so all the things that i could do down here so if i did a get a net and actually maybe that's worth doing so let's go back out here let's go into our delete delete me folder and let's do a make dear of test get and then i'm going to open that thing up so i'm going to open up the test test kit and let's just see this inside of vs code so what i would probably do if i wanted this to be a git repository is i would run a git init command well in vs code you can actually do that right inside of here so if i come to the source control it says do i want to initialize this repository uh yeah let's go ahead and do that and that will basically run this get a nit command so then i could come in and add a file so test.html or something and use our bang to get an html file and so i would come into the terminal run a git status i would see that this file needs to be added i would do git add test html git commit and so on but i could come in and see this as well and notice that not only do i have the ability to stage these changes or add them i also have the ability to add a commit message and revert this file if we look at this kind of backward squirly arrow i can discard those changes as well as open the file and see the differences and this is really cool so let's do a couple of things let's go ahead and stage this file and then we'll go ahead and commit this and say added test.html and uh do the checkbox here all right so that thing has been added now let's add in a title uh working with git and we'll see that this file has changed again and now notice if i click on this i see a very cool diff to show me exactly what's changed so vs code i think is is one of the best diff tools being able to see the differences visually in different in files that have changed vs code does a great way of just kind of laying these out and showing you what's changed which i think is really neat so from there i could go through that same process let's stage this thing and then updated the test.html file all right so with that in place i'll click the check and we're good to go now one other thing that uh vs code allows you to do now that they are or microsoft bought github there's even better integration here where i don't have this actually created in a repository i don't have this created as an actual repository in github so one of the things that i can do is scroll down to the publish to github command this is really neat because right here i can say publish to github it can i can choose between a private and a public repository so if i do a public repository it's asking me which file should be in there my index or my test html yes and this is going to say publish to github it's already published this is a github repository if i come over to my github now and search in my repositories let's pull up the full list of repositories here now we should see this test get now this has always been or has been for me in the past an issue where i would have to come into github create the repository and then go through these steps now these things are taken care of from inside of vs code so this repository is created now i can push this code to that repository and i guess we need to add our remote and we'll add the remote from github and then we'll choose this repository that we just created and we'll name this as origin and that should go ahead and push all that code out all that code is just one file but push that file out to and now if we refresh that repository we see that stuff got added up here so from inside of vs code i can do my basic get workflow and then i can also create repositories inside of github instead of having to to go to github directly this is really really powerful and i want to scroll back over to my project here if we look at i've got some things that have changed i've got a launch.json this is for that debugging stuff that we checked out and then i've made some changes if we scroll down and i could look at these individually if i wanted to i could scroll up and see the app css see the things that have changed there as well i'm not going to do anything with those changes because i don't need to right now but you have the full ability to do all the things that you're used to add commit push clone pull you can check out different branches you can see i've got the branch selected here i can create a new branch i can choose a different one if i wanted to do all that stuff right inside of vs code now one thing i do want to show you on top of that is vs code has some amazing built-in support for git but it also has extensions that can help you as well and get lens to me is the most powerful extension out there you can look at let's open a file and see this so if i open that app.js and then open up the get lens extension i can see the file history so what the different commits were if i select a line i can see the history based on that line and the different commits that were made with that i can look at how many different branches and contributors and remotes and stashes and tags and things that i have also if you look at this text over here that is get blame text which comes from this extension which will show me that i edited this file three months ago or this line three months ago in a commit that had a refactoring code as the commit and so not only does it show you in line over here if you hover on that now you get this extra detail and you can go and actually click on the commit click on the person if i wanted to and it opened up actually it opened up an email on another monitor but i can see a lot of different uh information about the commits the history i can see the same thing down here and then i get lots of options to open those files to show the commit and the search commits view to open the commit and github all these different things this is by far the most powerful extension for working with git inside of vs code i highly recommend checking it out and then on top of that's on top of already the really amazing built-in features inside of vs code all right the last thing i want to show you is one of the coolest and most powerful features in vs code and that is the live share extension so let's come to extensions and let's search for live share and i think you'll be blown away if you've never seen this before of what it does what this does is it allows me to share my code live with someone so that we can have like a live peer programming session remotely we could be across the world we could share code we could talk through code we could do all these things right with this live share extension inside of vs code so you want to make sure you have that extension installed and then i'll type in the command palette live share and i'm going to scroll down to find the start collaboration session so when i do that i'll need to log in with github i'm already logged in in this case so i can just copy this link so it copies it for me or i can copy it again and i'm going to come over to my other instance of vs code and i'm going to trigger this with live share join collaboration session so let's join this and i'll need to sign in here as well so i'll sign in with my github account with my james quick github i'll go ahead and authorize that thing you'll need to go through this process as well it'll redirect me back to vs code and i say all right that's good to go and then i'll need to actually trigger this again so it actually grab here is the session that i'm trying to join i'm pasting this from this other instance of vs code over here the one that i started it on and so i'll press enter in here and uh active terminal session yes i'll kill it i actually want to turn that off so let's search for terminal kill vs code is going to need some permissions on my computer to make this work i also want to change that setting for the terminal to not prompt yeah confirm on exit so i want to turn that off okay now you can see i didn't have this quick colors project open on this side it was only open on the other instance of vs codes let me grab that so here here the code is and i can toggle around i can move my cursor and notice that inside of here this is my cursor on the insider's edition and here's the cursor from the person in this case this instance that created the share session so i can see this real time and i can follow the person as they navigate through code so if i open up a new file this will can if i choose open up the new file here as well and the way that works is with this pin so if i use this pin i can follow this person around as they scroll through code and change files notice that scrolling and changing files and i'm not even doing anything so one person could kind of teach and show and walk through code while the other person just follows you can turn that off you can both both work on code at the same time you can share a terminal you can do all sorts of things with vs code liveshare this is such a cool extension to have enabled for you to do peer programming with someone across the world or someone that's maybe on the same computer as i'm doing in this demo regardless of how you use it this is one of the coolest and most powerful features inside of vs code you should definitely check it out it's very useful for being able to do peer debugging or code review sessions it's flat out amazing all right i just want to do a quick recap here and just kind of talk about how i think and most or many people think that vs code is the best the most popular the most powerful editor for lots of different things but specifically for web development is where it will really really shine we covered lots of different features of vs code we looked at downloading the stable edition the insider's edition and the difference between those two we looked at the layout and how to customize it and really optimize the view in vs code for you as a developer so that you can write code as fast as possible another thing we talked about getting into speed is how to use those shortcuts you want to keep your hands off of the mouse as much as possible keep your hands on the keyboard so learning those shortcuts in vs code is really really crucial knowing how to toggle open your menu bars and how to navigate text quickly and shortcuts for opening and closing and saving files and things like that is really really going to save you a ton of time and then we started to get into a lot of the customization aspects of vs code and there are lots of ways to customize it which is my favorite thing about vs code it's built with electron it's built with html css and javascript so you can make changes and immediately see those things take place so some of the things we looked at are just some of your built-in settings things like your font family i use cascadia.js i used to use spherocode you can get those free on github if you search for them and install them and then i use font ligatures to be able to have those fancy characters for arrows and different things like that looked at font size and zoom size and there's a ton of different features or settings in vs code that you can customize and the cool thing is they make it really easy for you to customize them as well we also looked at customizing your key maps of being able to for you to define what you want your shortcuts to be so i think vs code has a lot of great built-in shortcuts but if you have ways that you want to customize that you can certainly do that too in addition to that once we got into extensions you can see that they have keymap extensions that you can download and port in key maps from other editors like sublime or notepad or things like that so that you can keep those shortcuts that you're used to and then we covered a list of really useful extensions ones that i use every day the live server extension is one that i do literally use almost every day the advanced new file extension the color uh pair the color the bracket pair colorizer extension all of these that we walk through are really great they're ones that i use all the time we looked at themes i used the cobalt 2 theme there's winter is coming and there's night owl by sarah drazner there's a ton you can just search for drain or dreams themes and really customize those to make them your own and then we got into some of the deeper features in vs code being able to do debugging right inside of your editor not having to go to the browser doing break points and walking through files we did that in vanilla javascript or front end javascript as well as node vs code just makes this really really easy and then we moved on to source control integration of or working with git inside of vs code it's got great built-in tools for working with repositories locally for working with remote repositories in github and then we talked about the get lens extension on top of that to really supercharge your git workflow and then lastly we took a look at the live share extension which allows you to write code real time or share code real time or walk through code real time with someone across the world wherever they are in the same editor you can see each other's cursor you can follow each other around stuff like that so that is really really impactful for code reviews and teaching and learning uh working with someone on code so all in all vs code is the best editor that's out there for web development and for a lot of things i highly recommend it i hope this crash course helps and thanks for checking out the video