Visual Studio Code Crash Course

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 James q quick 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 IE   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 j s. So electron j s   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 dotnet 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 get 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   stable edition. That's what you see here, the  stable build. And then there's also the insiders   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 insiders edition   for months at a time and never had any issue. 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 insiders 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 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 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. 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 set up.  So it's 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   will also 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, replacing this with something else,   that 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 gonna 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 breakpoints 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 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 form 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 to theme.   So if you want to go ahead and look at this  yourself, you can go to the extensions tab,   you can search cobalt two, 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 mind 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 Ctrl B on  Windows. And for all the shortcuts that I   mentioned going forward command will be on  Mac and Ctrl V 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 Ctrl 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   Ctrl V to toggle this open all the time. And then  you can take that one step further. If you hover   over these icons, you can do Command Shift II  to go directly to the Explorer, or you can do   Command Shift F to go directly to find her, or  the search and replace, you can do Command Shift   G, actually, this one specifically is Ctrl, Shift  G, so Ctrl, 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 to file 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 pain 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 to file   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 there'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. Alright,   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 Ctrl, 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 toggles in mode, and  was in 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, 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 will 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 mini map 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 mini map on just because I don't want   to take up space in my instance of VS code. But  you can leave mini map 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 mini map 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   that 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 justify content, but  that's not really the point. So inside of here,   I can do a replace of one instance or 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.   Easily inside of VS code. Alright, so I can run  this and do 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 can search for  center, for example. And everywhere I have center,   not something I probably want to do, I can replace  this with right, you can see all the instances of   where that is. And you can even by file by file,  say alright, and this specific file until when   just replace all of the instances of center with  right and 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 right. 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 Ctrl 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 Ctrl 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 Ctrl 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 Ctrl Shift and  tab to go and see that pop up as well. So Ctrl,   tab and Ctrl 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 or to search files to open them. So   if I want to search for my app j s, 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 close 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 Ctrl W to close   a file. And then I can toggle through that using  these Ctrl tab and Ctrl 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 you're you'll be and the more  productive you will be. Alright, so a couple of   other things I want to share with you is just how  to 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 can 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 Ctrl and then home and end to do   the same sort of thing. So home an 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 and 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 texts 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 Ctrl C and then Command or Ctrl 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 And then I can 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 and those sorts of things. And   then, if I go down to the second parameter, I can  read through this documentation is 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 Emmet,   which is built into VS code, but Emmet is its own  thing. So if you look up Emmet snippets in here,   you can go to Doc's dot 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 Emmet 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 an 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 contam. Not very creative. So  I could do container here as well. So there's a   div with an ID of container. I could also  do a div with a class of container and an   ID of something special. What again, 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 can 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   allies 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 Emmet  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 pointer, notice I  type cu R and I get some IntelliSense with Emmet   abbreviations for cursor pointer. I could  do a padding so if I type in p that will   give me a lot of things in Well, this is just kind  of regular IntelliSense. But if I finish typing   p 10. For example, notice that autocompletes  to padding of 10, or if I do m 10, things like   that. So Emmet is really, really powerful for you  to be able to create HTML, CSS code using these   really short code, these really nice shortcodes  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 setting. So if you 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 comments 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  the 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 a font ligatures turned  on. And this is an example of a setting that you   have to change directly inside of the settings  that 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 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, so 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, you can also change your zoom level. So   if I type in a four, 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.   Alright, 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 crossed 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 a line of code. And  you can notice if I turn off on here, 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 four, 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 going to look a little tough there to see.   So I'm going to reset this back to 80. And then  I'm going to turn this back to kind of regular   and now again, you can see this is wrapping  at this line and it has that line to show you   what is there. Alright, there's some other cool  settings down here. If you do 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. Alright,   you can scroll through 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 to be blinking. And you can have this to be   an expand as well. So this is just kind of a  cool effect, where you 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, work best for you. Alright, 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 to theme so you can search this and search   cobalt to and then this is the official theme by  West boss. 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 v. 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  Sarah dresner. I like nite owl a lot. And this   has a couple of different versions. So you have  night owl with no metallics there you got this red   thing 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.   There solarize dark and these are 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 duo tone, dark themes,   there's zeplin themes that's kind of wild and  cool. There's tons of things 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  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 and 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 can call this test dot j s. 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 puram, 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 Cuoco,   which gives you a JavaScript playground and  TypeScript. So if I run the quokka command,   I can do a new JavaScript file. And then inside  of here, I've got like a live JavaScript play pad   or scratch pad 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 the 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. quokka is amazing for   just a live scratchpad for either JavaScript or  TypeScript. Another one that is great is the live   server extension. And if I searched for this,  this is ritwik day. And this has over 7 million   downloads, it's really incredible. So if I typed  in like a test dot html here, and stub this out,   using my Emmet snippets, and came down and  said, Hello, world, we're 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 polo 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 Polo 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 tags. 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 some of your HTML stuff.   And there's also the bracket, pair colorizer.  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. Alright, 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  really big project, you can set bookmarks inside   of your files and then be able to toggle through  your bookmarks. 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 bookmarks, 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,   cloak will take a dot CSV file. So if you use  dot E and V to have your environment variables,   and they're private, and 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 onstage  if you're streaming on Twitch or YouTube,   if you record a screencast  of your code like we do here.   Another nice one is CSS peak. This  allows you to to view the CSS for a given   class or ID. So you can pick 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 E and v one. This   is pretty simple, but it's just gives you kind of  a color syntax here for working with environment   variables inside of a dot E and V file. So if  you've never done environment variables, if you've   never done dot E and V 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 editor.  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 graph, qL, and React Native. So  there's lots of good stuff in there that you can   take advantage of. Alright, 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 fauna dB, 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 costs 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 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.   Alright, 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 E book 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.  Alright, 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.   Alright, 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 the settings, cog  wheel over here in the bottom left,   you can open up your keyboard shortcuts. And as  always, if you 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 fine, we talked about  this earlier, it's Command F or Ctrl, F.   And then you can see there's also  lots of different other options with   find as well where you can find previous  and next 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 pretty nice. So if  we 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. Alright,   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 use this command Command D earlier to  select a given words 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,   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 have to go  into the command palette to check those out.   Alright, 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 in 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 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 these commands really well.   Alright, so there's my 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 win. 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  contexts, 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, many, 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 shortcut 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 is a user source, it takes   precedent over the default source here. And then  this command in one, 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 precedents 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 all 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 had in the past.   Now there's sublime, I wonder if there's notepad  plus plus notepad plus plus key map, there's that   one, I wonder if there is Adam, key map all  the different Yep, there's Adam key map 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 a 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 dot 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 cog wheel 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 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 shortcode 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 dot log.   And then we'll have the description. So  if we needed some extra details in here,   this will write a console log statement. And 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.or $1,   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 jq C log and press enter,   now you see my inputs, 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 finished 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 semi colon.   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 tap stop to for example. So let's try   this out again. And let's trigger the snippet  with J qq 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 tabs, labs 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 finished all the  previous tab stops. So let's save this. Let's do   the same this We'll do the same thing, I just want  to show you the tapsnap of zebra there. So jQi   uclg, 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 of will 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 dot E and V dot something. And  maybe you don't want to have to do that.   So I created the sixth this this extension, the  snippet, that is just n v, and that will replace   it with process dot E and V. And then I can type  in the actual variable that I'm working with.   Alright, 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 use state hook and 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 tabs up. So   here is one and tabs. Two are actually three tabs,  tabs, here's tabs out three and then tab sub 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 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 for AR, fo AR AR AR. 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 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 dollars, 01234, 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 the same  variable in multiple places. So what this looks   like is if I show you, if I trigger this snippet  for our 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 to because it's name. So now  we can type in my R, that's going to be the name   of my range. 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 dot get element by ID.   And usually typically, the idea 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 get   ID. And this is gonna 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. Alright, 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 surrounded with a trycatch,   to handle errors, and then log out the air, get  the data back from the fetch if I want wanted to.   So here's another example 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 cool API, COMM 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 defined  snippets inside of your snippets JSON file,   so that you can save yourself some time and effort  later on. Alright, 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 setting 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 just inside of GitHub.   And what I mean is it will take all that 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 sync here.   And then I can have all that stuff ready  to go. So let's let me open up my GitHub.   And then I'll open up my just to show you  what I'm talking about. So I scroll down to   just and then come down here to cloud settings.  Now this is where the setting 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 not the correct one. Let me open up this one.   This has all the stuff. So inside of my  extensions that JSON this list out every single   extension that I had installed note of  this, 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   overwritten 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 setting sync is on. And one of the   things I'm going to do to show you how this works  is search for setting sync and then turn this off   and 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 setting sync. Now what this is going   to do is VS code is basically going to manage  all of 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   built into VS code. So if I click on turn  on setting sync, it asked 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 settings 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 we   can also if I look at the search for setting sync  again, as well, and come down to show sync data,   there's a little tab here that 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 can also turn off setting 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, 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. Alright, so   again, previously, you would have had to jump for  another extension. Now with this built in setting   st you can do this right inside of VS code and 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 setting sync turned on   as well. So if we look at the show sync 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 st and what's cool is if   I come in and search for theme and then go to talk  On my theme, and I want to change it to something.   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 two. 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  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 gonna 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 going to open this with a   live server. So this will open it at Port 5500.  And send me to the index dot 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 in 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 of changes color as well as  moves over to the right or the left, depending on   which side it's toggled to, by 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 run it in Chrome.   And then 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 breakpoint. 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, pause at this line. Now some of these   buttons here are enabled. So I can play and this  will just say Alright, go ahead and continue as   you were and it goes to dark. And now let's click  it again. Instead of playing, 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 skip that else. And then now that we're  at a function that we have this reset function   that comes down here, and instead of skipping over  that line, we can actually step into so step into   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 reading. 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 toggled   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 can 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. Alright, so I've got a new application  open. This is designed and built a chat app with   socket IO and node j s. 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 eight 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  j s, 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 breakpoint. And we can do the same things we   did before look at variables that watches didn't  talk about this. But you can see the call stack.   This shows you the history of the functions that  were calling. 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 No, not just fill 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 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 our 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   can do everything that I need to in my editor  and not have to worry about other applications.   So as you would probably expects, 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 might have PowerShell, or Command Prompt  or Git Bash or things like that. But this is my   terminal. And it uses z sh instead of bash. So z  sh is actually the default shell on my computer.   So yours will pick up your default shell and  I think this is z sh 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 to. 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 that 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 2345   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. And then  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,   we'll 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'll   notice on this delete over here, if I hovered  on kill terminal, it says command W, that's not   a built in command, that's one that I customized  for my experience as well. That way it will match   the command w or Ctrl 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   until they 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 Ctrl until  they 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 until day. 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. Alright, so if we search terminal, and   then I'm going to click on the terminal category  here. Alright, 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 in 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  here code there, you can change the font. So if   you wanted the font size in 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 checks, 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 there, 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. And 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 close. 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  fullscreen 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. Alright, 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 Git integration. 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   gonna open up a different project. Let's open up  a recent let's go back to that quick colors one.   And 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 git, 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 git init. 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 dir of test Git. 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? Yeah, let's go ahead and do that.  And that will basically run this Git init command.   So then I could come in and add a file, so  test dot HTML or something and use our bang   to get a, 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 squirrely 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 dot html. And do the checkbox  here. Alright, so that thing has been added. Now,   let's add in a title, 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 one of the best diff  tools, being able to see the differences   visually and different in files that have changed  VS code is 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 say just  thing and then updated the test dot html file.   Alright, so with that in place, I'll  click the check. And we're good to go.   Now, one other thing that VS code allows you to  do now that they are 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, a 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 published 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 to get now this has always been or has been,   for me in the past an issue where I would have to  come in to GitHub, create the repository, and then   go through the 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 Git workflow.   And then I can also create repositories  inside of GitHub, instead of having 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 can 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 poll, 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 lends 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 j s, and  then open up the Git 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 blamed text, which comes from this extension,   which will show me that I edited this file  three months ago or this line three months ago,   and a commit that had 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 Open up an email on   another monitor. But I can see a lot of different  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, on top of already the really amazing   built in features inside of VS code. Alright,  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 login 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 jamesy  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 need  to actually trigger this again. So it actually   grabbed 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 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 quit colors project   open on this side, it was only open. On the other  instance of VS code. 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 insiders 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 could turn that off, you could   both work on code at the same time, you can share  a terminal, you can do all sorts of things with VS   code, live share. 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. And 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.  Alright, 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  insiders 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 texts 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 j. s, I used to use fear code, 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 get   into extensions, you see that they have key map  extensions that you can download and port and 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, 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 things I use the cobalt to theme,  there's Winter is coming. And there's night owl by   Sarah dresner. There's a ton you can just search  for dreams 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 breakpoints   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   walkthrough 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, 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.

Channel: freeCodeCamp.org

Views: 465,682

Rating: 4.9549685 out of 5

Keywords: vs code, visual studio code, how to use vs code, vs code crash course, vs code customization, vs code extensions, debugging in visual studio code, debugging javascript, vs code themes, vs code settings, settings sync vs code, vs code git, vs code source control, git in visual studio code

Id: WPqXP_kLzpo

Length: 92min 35sec (5555 seconds)

Published: Wed Sep 23 2020

Reddit Comments

[u/[deleted]]

Why would you teach people to make vscode crash? ;-)