VS Code Tutorial – Become More Productive

Key Takeaways

have you ever watched a tutorial that uses vs code and thought how do they do it so effortlessly the answer often lies in mastering the tools not just the code vs code is more than a text editor it's packed with features like intellisense built-in git and terminal but harnessing its full potential can feel daunting this course demystifies that process learn to enhance its Aesthetics navigate with lightning fast shortcuts integrate top extensions and employ over 100 tips and tricks Chris EV developed this course he's a developer Advocate at digitalocean and founder of scotch.io hey there this is Chris Sev with better Dev here and have you ever looked at somebody using vs code and said oh my gosh how in the world are they doing that and they're moving things around and everything's flying around really really fast those are 10x developers and every 10x developer knows how to use the vs code to the absolute maximum capability and that's what I love about vs code is that there are so many ways to make it your tool to be a 10x developer there's settings there's fonts there's themes there's workflows extensions and all of the built-in amazing features like the terminal so I've been through it all I've been through Sublime Text Vim all those editors webstorm and I've landed on vs code as being the awesomest coolest most productive editor and that's what this course is about is how to make vs code AS productive as possible how to make ourselves as productive as possible using vs code and creating our own workflows and that's what this course will do it'll teach you how to make vs code work for you specifically so let's get into it we're going to learn a lot about all the built-in features all the things that we can add to vs code and we're going to make ourselves a little bit more productive so this course is called productive vs code so I thought you know what let's show off a productive workflow before we get into the larger part of the course this is kind of just a preview to see the kind of tool set and super powers and skills you'll get by the end of this course so here I have vs code let's say we wanted to clone a repo down from GitHub we can do command shift p open up our Command palette and say clone and we can clone clone from GitHub and I'm going to get the productive vs code site which is the website for the productive vs code course and I'll save this to my Batcave folder this is where I put all of my working stuff select repo once it clones I can open it in this vs code instance and here we have our next JS project which is the code for this website and if I close the sidebar open up package Json you can see down here that there are dependencies so we need to install them I'm going to install them a quicker way I'm going to do command shift p install right here and throughout this course you'll see how much I use the command palette and try to keep everything going from the command palette so it's all keyboard shortcuts okay so that installed now we can npm run script and we're going to run the dev script because next.js uses the dev script to start up so I'll run that and you'll see localhost 3000 is where our app starts cool so we've been able to install we've been able to clone we've been able to run a script let's go and actually do some changes here site hero let's say we wanted to bring in use state we'll use a snippet there message is there and we'll go here so that's cool we have that let's have site header let's make some more changes and we'll say console.log hi everybody okay that's cool but now let's say we wanted to commit this code up to GitHub we've made some changes across two files let's go see how to do this we can open up our git panel right here and you can see that the package.lock has changed the site header and the site Hero has changed I can click here and say okay what happened here let's see I added this console log okay that's fine what happened to site hero right here I added this use State okay cool so let's say I don't want this use State I can just say undo here discard that change I can add these two files right here and say super cool stuff because that's how all our commit messages go right and I can commit that and now I can push that to GitHub all from my command palette git push right here and we'll push that up to GitHub now what did we change the site header I think cool so I can also say you know what let's go see this in Chrome in GitHub so I can right click right here go to online Link and we can go see our changes right from within GitHub and it gets right to that line in the productive vs code site repo so all of that was done from vs code we really didn't leave it right we were able to clone install run make changes commit all that good stuff use Snippets all within vs code so that's kind of the workflows I'm talking about in this course I really want everything to be as streamlined as possible and I've spent a lot of time figuring out the best ways to use vs code to be an efficient tool I hope that was helpful let's get into the course let's get to it so to get us started we are going to go to code.visualstudio.com just to download vs code and get it installed so that we can start running it it is available on Mac it's available on Windows Linux I'm going to be working on Mac so whenever you hear me say command you're probably going to want control on Windows if I say option you'll probably want alt so once we have vs code installed and we have it here this is the screen that you'll see when you start it up it'll look just like this and what we'll have here is the welcome screen so you can actually turn this off down here show welcome page on Startup and we'll have it set on for now and here the getting started section is actually really good to go through customize your setup they have you go through themes coding in any language switching from other editors opening a project folder very very cool guide and getting started is a really fun thing to go through when you're starting with vs code in this course we're going to go through everything that these three cover so you don't have to but it's really fun to go through and one that I recommend you go to is boost your productivity over here under redefine your editing skills open interactive playground and that will open the interactive playground to the side you can close out getting started here and just scroll through this and kind of get a lay of the land because it's cool you can actually type into these sections right here and see what's going on it's a really fun interactive on boarding again not totally necessary if you are feeling like you have the four or five minutes to go through this go ahead if not let's push through and we'll learn about all of this stuff in this course first up let's talk about the UI of vs code so I just want to get us both on the same vocabulary so when I start calling things out and moving things around we both know what we're talking about so to start us off this is the vs code interface down at the bottom here we have the status bar this purple thing right in the middle we have the editor and we'll get more to that in a second over on the left we have the activity bar and this is where a lot of your clicking is going to happen so the activity bar has a bunch of different things in it so let's go through them one is the Explorer and as soon as you click that icon this opens up your sidebar and the sidebar is now filled with the Explorer here I can click the find right here or search and that'll open up search into the sidebar I can click this get icon and we can open up git into the side Part Source control right here the debug is right here with a little bug cute little icon and we have it right in our sidebar and we have extensions in our sidebar as well and we can search through those and if you expand the sidebar out a little longer you can get these nice icons so overall this is going to be your activity bar and your sidebar there you'll do a lot of the work you have in and we'll go through each of these in depth throughout this course if we open a folder right here let's talk about the main part where you'll be typing the most let's open up this productive vs code site and I'll open up the whole folder now if I go ahead and click on package.json right here you can see that this is our editor so this is where you're going to be doing all of your typing you have your sidebar over here that can hide and show whenever you need it just keep on clicking those icons here you have all of your text here is the tabs so we have one open let's say I wanted to keep that open and I'll open up the readme right here that is the tabs right here right here we have what are called breadcrumbs so you can actually let's go into an actual file let's go into this index.js right here the breadcrumbs actually show you what's going on in the file so you're in the pages folder right here you're in index.js the file and here you can actually see all of the different things that you're in so you're in the home function there's not really many functions in here but once there are you can actually click this and see all the different things in a file so breadcrumbs is really useful and let me shrink this over here and over on the right here we have the mini map which you can click and drag just to see how long your code is and if there are any errors you can see like a little red line in there really helpful and I personally really like to have it so overall we have the status bar we have the activity bar we have the sidebar we have tabs and our editor and the last thing here and let me close these out is the panels and they don't really show right now I'm going to open up the terminal with Ctrl tilde and the panels are what show on the bottom right here so we have the terminal we have problems tab output tab ug console but I imagine you'll spend most of your time in vs code in the terminal and in the debug console for this area down here and we'll talk about those more in this course so there's a lot of really fun little hidden things around vs code and the biggest one we haven't even talked about yet which is going to be the star of next video is the command palette so overall I hope that was a good introduction to vs code's UI there's a lot going on but don't worry we'll be going through all of it and making sure we understand and know how to use every bit of it in this video I want to talk about the number one essential tool to using vs code and that would be the command palette now this is so essential that this is going to be encompassing the entire course you really need it for the entire course to follow along with everything that we're going to do and it is also essential to productivity and this being productive vs code the command palette is front and center so you might be asking okay well what is the command palette Chris where is it so it doesn't show up at first but to show the command palette it actually shows you right here show all commands shift command p and if you're on Windows that'll be Ctrl shift p or command shift p which I'll say a lot in this course so command shift p and I'll just do it a couple times just to get in the habit command shift p Escape command shift p that will open up the command palette and the command palette is pretty much your command center for vs code it's going to show up right at the top here and anything that you can do in vs code is going to show up here so like let's say I wanted to open up Explorer focus on folders view that would open up the sidebar here I could even hide the status bar toggle status bar visibility I could hide the activity bar and that's why it's so important that we know what all the things are called because I'm going to go through and hide and show a lot of things based on how we're working for that video so the cool thing about the command palette is that anything that you can find in the commands up here like let's say file open recent open folder edit find in files replace in files and you can see the keyboard shortcuts right there you can do from the command palette so all the all these things here here here here here all of it can be done in the command palette and that makes a super efficient because we don't leave the keyboard so I could even open up the terminal and that'll be toggle terminal anytime you want to hide or show something it's usually under the toggle command and let's see we did git clone already in one of these videos we did get push and if you wanted to check you could just type in git and then move your mouse up here and scroll through all of the commands that you can do thanks to the command palette we could even open up a new file file new file right here and we'll name it hello.js and then here I can say command shift p snippet and I can insert a snippet we can go down here we'll save this for each Loop right here and now we can say my array is called items item and console.log item so that's really cool that we can use the command palette to do Snippets we can move things around we can say toggle breadcrumbs right there and that hides the breadcrumbs you could even toggle the tabs toggle tab visibility there and now it only shows the single file that's open you won't see anything else but one file you can do the minimap pretty much everything here and there's going to be a lot more work to be done thanks to the command palette so in this course you'll see me say command shift p or open your command palette and that's a prompt to open up your command palette and type in something there so we'll open up activity bar back we'll bring the status bar back we'll bring the breadcrumbs back and finally we'll bring back the tabs toggle tab visibility there we go so we're back to normal keyboard shortcuts are going to be a big part of this course and the command palette is a big part of that so stay tuned you're going to hear that a lot let's get used to it because it's going to help you on your coding Journey a ton the first thing that we're going to do to make vs code look good is to install themes now themes are really cool that's the first thing I reach for to understanding how an editor works and themes is a great segue into seeing how vs code does extensions so if I go to docs here and I go down to user guide the extension Marketplace extensions are a way that you can extend vs code's functionality through a Marketplace of extensions and we are going to do a lot with extensions we're going to be adding on a theme in this video we'll also be adding on icon themes in this video and there's going to be so many extensions that we're going to install to vs code what we can do here is in the extensions link right here this is the extensions Marketplace and you can actually type in theme and see all of the themes that are popular you can sort by relevance you can sort by downloads all that good stuff here so you might be wondering okay how do I install one of these themes let's click on the winters coming Theme by John Papa we can scroll down we can see a preview of it that looks cool just blue color we can go up here and click install and we'll give this prompt and says hey do you want to open vs code from this website we can say yep open vs code and now you'll see the extension here where you can actually click install but I want to show you a different way I don't usually go to the website go to the extension Marketplace from inside of there I don't do that because we can do all of that from the convenience of vs code itself down here on the side we have the extensions sidebar right here so once I've clicked extensions we get a list of all the popular extensions 26 934 ton of extensions really strong and robust Marketplace and community so these are the popular ones I can type in theme Here and you can see the download 7.7 million for the material icon theme atom1 dark theme and we can click these and the website actually pops up right in here we can see previews of them here here's winter is coming that we just saw so let's go ahead and install one of these we'll click install for winter is coming and then we'll enable it so that actually enabled it changes our entire theme for vs code and it shows right there in the command palette so let's say we installed another one GitHub theme right here one million downloads let's install right there cool there's a couple different ones that we can choose from and if you actually click down here you can see a preview of all these that dimmed one is really nice light if you're feeling like a light theme I personally have tried and haven't been successful at switching over but what I want to talk about is these are all the themes right so the goal of this video is here's how you install themes and let's talk about how we can enable them and then we can talk about finding really fun themes in the future so let's go to our Explorer and let's open up if you don't already have a folder open or you haven't cloned anything down from GitHub go ahead and do that and then you can go up here to file open or you can go into the command palette command shift p open and I think it'll be down here under file open and you can see that command o right there so you can do command o so there's a lot of different ways we could open up a folder so go ahead grab a folder get it open here's index.js and here's what it looks like with this theme what we'll do is see how we can change themes next and to do that handy dandy command palette so I'll say command shift p and say theme and you can change the preferences color theme here so I'll click this and now you get a whole list of all the built-in ones and the ones we just installed through our two extensions and what's cool is we can actually preview them just by pressing down or up and just click through all of these there's tomorrow night blue super blue solarize dark there's just red monokai which I'm always a big fan of and here are the GitHub themes we just installed so feel free to look through the extensions in the marketplace here feel free to install them and then when you want to install and change one and enable one command shift p color theme and press enter and then you can just click through these and let's say you wanted red and I'll press enter right there let's actually stick to one that I'll probably use on a day-to-day basis currently I am using monokai Pro and that's at https monica.pro but that is a paid theme so I don't really want to recommend it here just check it out you're for yourself but a good one is these GitHub dark ones the dimmed one I like a lot so I'll keep that next up what I want to do is icon themes so we can change the overall theme for this whole thing but we can also go into extensions and type in icon theme and here are all the icon themes I can click here and this actually is going to change out what we see in our Explorer for the icons and if I go here that'll replace these arrows they're kind of boring but there are some js icons here the little brackets here so I'll go back into extensions install so we can click here enable material icon theme right there and now if I go back to explore you see the folders actually have icons now instead of those arrows and to do this you can also do this from command palette command shift p icon theme enter and then you can click through and see the preview over there as well and we'll stick with material icon theme that's actually what I use on a day to day all right so there's a lot in this video but it sets the foundation for everything we're gonna do we are able to install extensions through the extensions panel and we'll do a lot of this we are able to change our theme which is step one on having a good looking vs code and we were able to change out the icon theme so already we look better than the default vs code setup so moving forward I didn't want this to be about like hey here's the top 10 themes that I recommend this is more about hey this is how you install themes which are extensions this is how you install icon themes and this is how you switch them out but from here the world is open to you you can go over to Google and say best vs code themes 2021 and all of these links are going to show you some fantastic themes you can install them you can try them out and you can find one that fits perfectly for what you like hey everybody this is Chris Sev here today in this video I have 20 vs code themes for you 10 which are more of the popular themes you've probably seen around and there are 10 lesser known themes which maybe you haven't seen so let's get straight to it we are in vs code we have the default theme enabled right now really decent theme it's got dark it's okay so let's start moving through the best themes and we'll sort them by number of installs or I guess you could call that popularity the first one that we're gonna have is if we go into our Command palette with command shift p we search for color theme we can search for one dark Pro and I believe this is probably the most popular vs code theme most installed and for good reason it the good looks it has great colors everything kind of Pops a little bit better if I scroll down you can go to one dark flat where it's a little bit less prominent colors and there's darker which gives it a bit of a darker background it's a great theme but again one of the most installed so if you want something else maybe something a little bit more unique let's keep moving number two is Dracula so I'll go to color theme Dracula it has a purple tint to it very nice theme very popular um really unique in it actually exudes Dracula and nighttime the number three theme is let's go to color theme atom one dark very similar to one dark Pro I think does great with the symbols and colors of the symbols scroll down does great with just markup in general so very good theme again it does look like one dark Pro and probably a pretty common theme so let's go to the next one we are going to look at GitHub theme these are GitHub inspired there's GitHub dark but if GitHub pretty well you probably are expecting the light version and this look at that so bright it is probably the light theme that I would jump for if I wanted to go for a light theme very nice there's dark dimmed as well and light default so definitely check those out good themes the next one is by John Papa it is winter is coming this is a cool one because it gives a blue tint and it's just fun overall if we go to dark blue you can see that there's a blue tint in the background blue all over here my problem with this is that some of the symbols aren't as legible as the other themes we've seen so far they don't pop like this export default function next video it's all the same color so great theme if you want that blue hue to it next up is by Sarah drosner the theme is called night owl again very night inspired theme as its name suggests it's I think it inspired the John Papa theme winter is coming that came before it with that blue background so there's not now light a very good theme really cool especially for night time next up monokai Pro this is one that I have been using for a while let's install it I didn't have that installed we'll enable it monokai Pro and the cool thing about monokai Pro is that if I go to color theme monokai Pro there are different filters as they all had but there's a blue one octagon is purple-ish spectrum is darker and ristretto is a little bit of a brown tint hard to tell but monokai Pro is a paid font so just keep that in mind if you are interested in it it is one of my favorite fonts next up is by Ahmad awais shades of purple you've probably seen this around very iconic very purple uh really fun theme a little bit much on the purple for me and again not too many differentiators for most of the symbols since they all are using this light blue or the orange so we'll move on from there we'll go to West boss's theme Cobalt 2. Cobalt 2 is very yellow blue themey I like it again not the biggest difference here is of the symbols so for me not my go-to but fantastic theme definitely check it out and then 10th of the most popular vs code themes is going to be material theme and I think I did that wrong color theme let's go for material theme and there are all sorts of different color styles there's ocean darker lighter pale night so definitely check all those out I think a lot of those are pretty similar in my book aside from the background the symbols which all the words they blend in together so not my favorite there alright so that is the 10 most popular ones that you've probably seen around the web but the next 10 maybe you haven't seen and I'm actually my daily driver is in this list of 10 for 10 lesser known vs code themes so in this batch number one or number 11 overall is going to be pale night very similar to the night themes in the first 10 you get that purple you get that blue cool here's synthwave which is number 12. I really like this one it's a little bit too much of a pop on the blues for me the contrast is a little strong but really fun with the colors the orange the purple the red and the light blue number 13 on this list is Nord Nord very nice muted theme if you want a muted theme that's just gets out of the way and gets you to coding but for me again not too much differentiation on these symbols so let's keep moving number 13 number 14 is color theme panda so this one with that pink theme Panda really cool colors here I dig it a little bit strong on these symbols right here with that light teal-ish but overall I like the pop of color a little bit more than the previous Nord so very nice next up number 15 is Tokyo night again another night theme there's actually a lot of night themes on this list so cool night theme again purple and blue dark inspired number 16 here is rain glow a lot of different colors in Rain glow let's see a lot of different colors in Rain glow so definitely click through the cool thing about vs code is you get this live check theme preview overall pretty good colors I think a lot of them don't really have the contrast of the symbols again so let's keep moving all right this next one is my daily driver so far and I really like it I've been using it for about two weeks now color theme is moonlight and if you look at Moonlight 2 it's muted it has that nighttime theme but I do get a little bit of differentiation on the symbols so you can see there's a purple here instead of having all that be the same color you get the orange the green there's just enough differentiation for me that I think it's really easy to read the different values so Moonlight too very nice the next one is number 17 Horizon so here's Horizon you get a different color scheme than we've seen before Less on the blue side more on this red kind of maroon color really nice with the purples good theme next up is bearded theme there's a few of these bearded void Earth love the naming here altica Oceanic solarize so really good colors there I like how they're a little bit more muted except for this Vivid one Arc eggplant that one's really nice actually AOL storm also really nice black and gold yeah Storm's not bad I like that one maybe I'll move that one and then the last one we have on the list is a fun one it is going to be called cyberpunk and you definitely get that cyberpunk feel you got that neon green you got those purples and a little bit of that pink in there and if you go to the extension page they do a great job of showing it off especially with the borders you get on that command palette with that green let's try it out command palette oh we don't get those oh that's intellisense let's go see there we go really nice colors and borders there super fun so there you have it there's 10 of the most popular that you've seen before probably and 10 of the Lesser known themes and all together 20 fantastic vs code themes I think I may switch to that bearded theme eolstorm Maybe see you in the next one while themes was the first extension that we installed fonts is the first setting that we're gonna change so there's two big ways to adjust vs code the first would be extensions here in the extension sidebar the next will be settings so we're going to go into our fonts settings and change out the font so let's go here to our Explorer let's open up a file so that we can get a nice file to preview our font changes so fonts is something I'm pretty opinionated about I've gone through many fonts and try to pick the best to my liking so I have a couple of recommendations and then I can show you a list that I'm going to drop in the description below where you can actually click through pick the one that's best for you and install it and I'll show you how to do all of that in this video so the two that I always like to recommend if I go into Chrome here is Cascadia code which is a free font by Microsoft I'm personally a big fan of kind of the shorter stouter sort of coding fonts and these are all going to be mono spaced fonts which means each character takes up the same width as the other characters and monospace fonts are traditionally the best fonts for coding so Cascadia code is one of my favorites it's currently my daily driver code is also another great free font if you go down here they have a really cool preview here and what they also show you is what are called ligatures and some people love these some people hate these I personally really like them in my code and I'll show you how to turn these on in this video but ligatures is essentially when you say like not equals it creates a brand new icon based on what you just typed and I'll show you how that works if you want the links are down below you can download these from these GitHub repos you can install them on your computer and then you can go over to vs code and you might think okay so if we want to change our font settings we would probably just go into the command palette just like Chris has said this whole time I'm sorry to say this is one of the few times that you're not going to go into extensions you're actually going to go into settings so I'm going to do command shift p type in settings and you can open up the settings in a Json format or the UI format and we'll do the UI format and we can talk about how the Json Works in a second so here are our settings and this is the UI version of it so what that means is there's a really nice like little tab sections over here where you can click through and figure out which setting to change but also we can go up here to search settings and we'll type in font and family so if I scroll up here font family editor font family this is what's going to change our font so I can go in here and say Cascadia code and the reason I put a quote around it is because there's a space here so if there's a space I like to just put the quote around it just like vs code did right here for Courier new so as soon as you type that in you don't even have to do anything like save or click a button it just automatically takes place you go back to index.js and see the change here so automatically you see the difference here we can actually take this and drag it out to the side and if you drag this to the side you can see the Dual column right here so I'll put that over there and if I remove Cascadia code right there I'll just cut that out it immediately changes you can see the change on the left and I know this isn't as clean as the previewing themes was but this is what we have in vs code for changing fonts and settings so I'll paste in Cascadia code again and what I can do here is actually type in fire code I have that installed as well fire code and see that change happen over there so fire code and Cascadia code are pretty similar Cascadia code I think is a little bit chunkier and then if we talk about my favorite paid font that would be operator mono and that is a paid font so I don't like recommending it too much in these courses there is operator mono so a little different definitely play around with these you could even if you wanted to here's Comic Sans not the best for sure for coding but you can do it so definitely go through your list of fonts and settings and see what you like the best and here is a website that I like to show off if you are looking for the perfect coding font for yourself and who isn't right this is a great website by CSS tricks called coding fonts and you can find it I'll put a link down below coding Dash fonts.css-tricks.com and you can click through all of these great fonts Cascadia code my favorite here's cost ligatures italics variable and all of these you can click through see which one you like and once you find one you like there's a link here to download it find out how to get it this one is paid let's see a couple other favorites jetbrains mono I see a lot of people liking lately Mono Lisa is good where is that goofy one comic code I think you like this one comic code is Comic Sans in monospaced format so it is technically good for coding since it's monospaced if you like that comic new great resource to click around and find out which coding font you like the best and then go get it install it then you come back to vs code and you can change your setting out here under editor font family I'll just put Cascadia code here so I switch between Cascadia code and operator mono a lot depending on the day so those are fonts and that's how you change them in the settings and just to reiterate how you get to settings command shift p settings and we'll click the UI one and then you search for font family and I'll put these instructions down in the description below so there we go there's Cascadia code right there but there's some other font settings that I want to change and I'm going to split this out to the right again cool thing about vs code is you can do panels side by side like this so a couple things I want to talk about for settings while we're already here in fonts this is the next step to making our vs code look really good is font size line height and font ligatures so these three things put together will make this look way better so font size I like to go to 16 for myself play around with what you feel is best and then next up let's go to line height so I'm just going to search for line height and the thing about line height isn't really calculated off of the font size so you can't do 1.5 times the font size because look at that you actually have to enter in a number so I personally like my font size to be about 1.6 times the font size sorry my line height to be 1.6 times the line height so we're going to go 16 times 1.6 that'll be around 26 so let's say 26 right there and it gives it some nice spacing right there so compare that to the zero that it was by default everything gets crunched a little bit more you can even bump that up to 28 if you like so play around with what you like right there the next one I'd like to talk about is ligatures now this is a make or break thing if you don't like it don't turn these on if you do like it give them a try and use them in your code so if I search for ligatures right here the search in the settings is very powerful so get used to it ligatures editor font ligatures the way to turn these on is you go to edit in settings.json and this is the Json version that I talked about earlier so if I click editing settings.json all of our settings actually is here in this Json file so everything that happened here in this UI version actually translates to this Json object right here and I'm going to say true right here and you get this nice autocomplete and we'll talk about vs codes autocomplete intellisense in a future video so I'll turn that to true we have turned font ligatures on so let's give it a try const is equal let's say is equal to hello is equal to hello so it doesn't look like that really changed anything right there so actually I didn't save this file so let's save that and immediately you saw the equals change there so if I change this to false and press save you notice the change right there and if I did not equal to and I did true right here there we go we get ligatures so if you like them use them if you don't no worries the last setting we have for fonts that is really important I think is right now we have a font size right here but if we wanted to change this we would have to go over here and say font size in our settings and change this right here but what we can do and this is something that most people don't really have turned on because it's by default off I personally like to have it is mouse Zoom so Mass wheel Zoom right here you click this on and then you can hold Ctrl and zoom in and out with your mouse so you can change the font size on the Fly so Mouse wheel Zoom is a very helpful setting to also have so that was a lot in this video we have covered fonts we have covered turning fonts on using the settings and font family we have covered going into codepen and trying out a couple different fonts for yourself and we have covered a few of the font settings like line height font size font ligatures and mouse Zoom so we are on our way to having a good looking vs code and then soon we'll get into the productive part of it where we can get into our workflows these are my favorite coding fonts and to help us out here I have a coding Dash fonts.css-tricks.com website which is a microsite that CSS tricks created and I think it does a fantastic job of showcasing all of the coding fonts we have access to so if I go here you can see all of the different fonts that are coding fonts which are mono spaced fonts which means every character is going to take up the same amount of width so that it is uniform lines so let's get to it what are my favorite coding fonts I've tried really all of them and given them a shot but these are my favorites so number one on my list that I think is the best coding font out there the downside is it is paid is operator mono so operator mono I love the funness of it and for me I personally lean to the shorter fonts not the kind of taller fonts and a good medium size on the width so they don't take up too much space on their lines and I think operator mono strikes that balance perfectly and it also brings in a little bit of Personality with characters like the f I think looks really cool the T has a good character and just overall nice personality in this font now there are a lot of fonts on this list that are good middle of the road fonts but these are my favorites that I'm pointing out because they have personality so number two of my favorite coding fonts which is a great alternative a free alternative to cat operator mono is Cascadia code Cascadia code also takes that shorter approach about the same on the widths a little bit bolder but a very fantastic coding font number three on my list is the first font that introduced me to ligatures and ligatures are where you type in like equals equals equals and it combines it into one character you can see it right here current theme equals dark personally I like them not all people like them so it depends on your workflow but I like them so I can turn them on and you can see over here on the right side it says ligatures check italics none variable none so keep that in mind when you're picking your coding font if you want ligatures and fire code is down here a little bit taller than I'd like a little bit taller than Cascadia code and operator mono but it does come with ligatures and fire a flot look at that cursive on the comment really cool right there it may not be your style but I think it's really fun to look at and just make sure we're aware of it if you want to have a fun font all right number four on this list is inconsolata and I hope I said that right it's a little bit thinner than the other fonts and a lot older I believe and this is my pretty much first coding font so it has a special place in my heart and I still think it looks fantastic compared to operator mono Cascadia code a little bit thinner which I like and about the same Heights and widths it was kind of hard to pick number five on this list because the other fonts are very similar to this and now looking at it while I'm recording this video I'm not sure it's my number fifth choice but it does have good personality a little bit thinner a little bit of like a serif feel to it but it is a cool font so if you like this style of font definitely check it out number six seven and eight are kind of the gimmick approach fonts here's Comet code which is Comic Sans in code form and here's comic new a little bit thinner a little bit less tall and here's comic Shands which actually looks decent I think of all the three so if you want to pick a Comic Sans type font maybe you're using it for presentations just a fun gimmick or if you want to try as your daily driver comic Shands is a good one and honorable mentions these are the ones that I think do really well but they didn't make the top five because I don't think they have enough personality I think they are great fonts but just didn't get into the top five so these are going to be consolas let me see consolas another good font similar to Cascadia code that I like PT mono right here a little bit bigger wider source code Pro right here San Francisco mono and Roboto mono those are my honorable mentions I think those are great fonts if you want to check them out and you might be wondering okay well Chris they're starting to kind of blend all in together I would definitely say give them a try on your machine on a daily workflow try to give it a day or so and see if you do like it and switch between them on the Fly you'll notice that you'll start to get your style like for me I have a shorter and not as wide medium width type characters that I like if you go and start looking at the other ones like lotion you'll see the big differences in fonts and you're like okay well this looks nothing like the other ones that Chris pointed out that's because it's not really my style or preference there's Mona Lisa which I know a lot of people like a little bit too wide for me monoid which is way too tall and a little bit too weird for myself recursive also a great font but definitely check out the site click through see what you like Ubuntu Mano Victor mono I know that a lot of people just have different preferences for different languages as well so if you want to check these out I'll put a link to this down below while we're still here in the make vs code look good section I want to pass on five different vs code settings that I use to make my vs code look a little bit different than the default now these are starting to get into a little bit of an opinionated sort because of these are the defaults that I like to use so just check these out maybe you like them maybe you don't it's all good if you don't let's get into it the first one here is editor tab size and you can see it right here or you can start searching for it right here so tab size I primarily work in JavaScript these days so I default this to myself but what's really cool about vs code is that if you are in a project vs code can actually detect the indentation so if you're in a project that has spaces at four for a tab size then it actually just says okay I'll just keep using before so if you actually click editor detect indentation that is by default on and that goes to the setting we just changed which is tab size and this also goes to insert spaces so should pressing tab actually insert spaces right now vs code defaults to true and I think that's a good default to keep detect indentation so if we go all the way back to tab size right here two is a good default for JavaScript and that's pulling off of the JavaScript style guides that you can follow Airbnb is probably the most popular one the Airbnb style guide I'll actually link to down below if you want to check that out but do whatever is best for your code and for your language another thing that's really cool about how vs code handles settings in this UI version if you change anything from the default it actually highlights it so that you always know what has been changed from yours to the defaults all right next up let's go to setting number two that I want to talk about that is going to be rulers so let's go to rulers and this is something that you have to edit in the Json file so I'll click that and it actually creates this array right here and I'm going to say 80. so there we go I have 80 as a ruler and let me show you what that is you can actually see this is using the four spaces indent and you can see it down here spaces is four and that's because it said oh the Json file has four I'll just use the four so that's good to see so I'll put a ruler at 80 and let me show you what that does I'm going to bring settings back here and I'll go back into my file now we have this line right here at 80 characters so if I start typing out and get to 80 characters right there then it actually doesn't do anything really it's just a visual guide that says hey this line is past 80 characters maybe it's getting a little long maybe you want to see if you could break this apart and that's just me personal style guide I like having things less than 80 characters it makes code far more readable look at that one a little bit too long but overall if you keep code to less than that 80 it'll be nice and readable so I like to leave the ruler maybe you can do a ruler at something less I've seen people do rulers at 120. anything's valid it's all up to you another trick is if you are on a line you can go down here you're on line 12 column 86 so you can actually see how many characters you're at and if you highlight some stuff you can see how many characters you've selected down in the status bar fun little tip right there okay so let's go back into our settings that was setting number two setting number three is render indent guides and this one is on by default so just make sure it's on what it does essentially is that it every indent has this line right here so if you think that's a little bit too busy you just go over here turn that off render indent guides and go here and now look how clean your code has gotten so personally I think it's helpful especially for longer files where everything is spaced a little bit far away like you don't know where this main goes to but if you have the Indian guide on by default you go here you can click it and you can notice where this is aligned to so that's again all preference appearance wise turning it off definitely makes it look a little bit cleaner the next one I'm going to bring settings back to the side right there is word wrap so this is setting number four word wrap is not diff editor we're going down to editor word wrap we can turn this on and notice how it actually brought this down into one line so that it doesn't expand beyond the column right there and this is again personal preference by default it's off so your you can scroll to the side like this or you can have it on just depends on what you like I personally just leave it on and on top of this you can actually say word wrap at column right here and this is going to take this setting which is set to 80 so word wrap column is 80. so if you go here it actually breaks on the 80 ruler so another really fun one to have and speaking of fun I am actually going to set this back to on speaking of fun I want to show you one of the maybe most useless but most fun of the visual settings here's our cursor I just made it giant let's go to cursor blinking so this is setting number five cursor blinking is blank by default and if you click here you can see it just blinking I can go to smooth and click back over and you see how it changes just a little bit how the cursor blinks and phase is pretty similar to smooth actually but this is the fun one and maybe if you're doing a conference talk or a tutorial or something like that and you want to show off hit it expand and you give this fun cursor maybe a little annoying but super fun either way and solid just doesn't blink at all so me personally I do smooth or phase I'll keep smooth there we go so it has a fade I think phase has more of a fade in actually there we go so we'll keep phase for that all right so that wraps up the five settings I think you should take a look at for appearances let's keep moving along in the course so this section is called get to know vs code if you already know the vs code UI then feel free to skip this section but there are a lot of little hidden things around the vs code UI because there are so many features packed in that you have seen a button before a million times but maybe you don't know exactly what all the little things do the side panels terminal the problems panel all these little things are fantastic when you add them together to make vs code these are all of the base features the foundational features that make vs code workflows and everything that we're going to do fantastic so I highly recommend checking these videos out check up outline on the sidebar there if you do think you know most of the vs code UI you can feel free to jump ahead to my favorite section the keyboard shortcut section but this is also a fantastic refresher or a fantastic introduction into getting to know vs code's UI and starting to learn all the features that we can put together to make ourselves more productive in vs code there are probably two really big places where we're going to spend most of our time the first is the editor which is this big area right here where you'll be writing all of your amazing code bug free of course and over here on the sidebar is the Explorer so if I open up the Explorer into our sidebar you'll see I'm starting off with zero folders zero files in he