5 Ways to Customize VS Code

i've spent tons of time learning about every different way that you can customize vs code from your theme to your font to extensions to settings to shortcuts so if you want to take your vs code from this to this stick around for the video all right we're gonna dive into all of these different facets of customizing nvs code this is one of my favorite uh features of vs code is just how customizable it is how easy it is to customize not just that you can do a lot of stuff but that you can do it easily as well so we're going to talk about the theme that i use that you can see in here i get lots of questions about that the font that i used in one of the fonts that i've used in the past how to get these fancy do i have an example of this the fancy font ligatures here this little arrow here i'll show you how to get that we'll talk about some of the extensions that i use some of the things that you can use some of the settings that i have and the shortcuts so if you want a kind of full in-depth look into vs code and all of the different features not just customization that comes with it i have a course on udemy link below but my friend code stacker jesse from the code stacker channel on youtube which you should check out for other vs code content he has released his vs code superhero course that is going to walk you through so much more than what i do in this video everything you want to know about vs code he has listed in here you're going to get uh videos uh the ebook if you if you buy the bundle deal there's so much stuff in this course and he was nice enough to give me a 40 off coupon exclusive discount code that's in the link below so go and check that out if you want to become a vs code superhero in the meantime let's go ahead and get started here so the very first thing i want to cover here is the theme and this is again a question i get lots in youtube comments hey what theme are you using how do you get those colors all that sort of stuff so that's gonna be the answer in this video and uh really quickly what this is is the cobalt 2 themes so if you open up your extension tab and we'll talk more about extensions here in a second the cobalt team cobalt team the cobalt 2 theme was created by westboss and it's really built on kind of these like this blue and this yellow color and they work so well together i just love this theme i've used this as a default for almost the entirety of my vs code career if that's a thing but however long i've used vs code i've almost always used the cobalt 2 theme i absolutely love it people ask me questions about this all the time as well so uh to show you how to do this if i were to uninstall this theme and i can do this really quickly uninstall this thing now this gets really boring in your extensions to installing extension you just go to install and we'll have a section here on extensions specifically but in this case this is just about the theme now if you're interested in other ones a couple of the other ones i love uh the night owl theme this is by sarah drasner the shades of purple theme by ahmad a wise we could pull that up that one i love too and the last one is winter is coming from john papa so those are some of my favorites uh you can install them pretty easily check them out and really customize and give yourself a pretty cool look and feel to your editor and i'm going to go ahead and set my theme back to cobalt 2. cool so that is my theme now next up is my font so let's look at a section of code in here let me get rid of all of these extension tabs let's look at a section of code and this piece of code comes from actually a video series on the auth xero youtube channel which you should check out and in that series we build an authenticated to-do app with next.js airtable and all zero so if you like the content that i do on my channel uh go and check out the all zero channel too because i'll be doing a lot of content there so just looking at the code here you see uh some of these fancy font ligatures i'll show you where that is in a second but uh maybe you notice that this font just like looks a lot different than what would be the default one as it should so the font that i'm using in this case is we can just search for this font family is cascadia code so you can come into your browser and you can search for cascadia code and this is a free one by microsoft so you can go and you can follow the instructions on uh the github uh repo here you can download cascadia code and then you simply just say inside of font family that's the one that i want to use now i do want to show you another one which is fira code this is another free uh free one that uh they have instructions on this github repo as well so you can do you can set or install that one on your machine and then go in and set your font and then notice this will look a little bit different here i have been using cascadia code i always want to say cascadia.js i've been using cascadia code for a few months now and i absolutely love it so this is the one that i think i'm going to stick with and the last part of this is that i've got my font ligatures turned on i don't know why this is why would i edit i don't know why this is not edible editable in the regular settings but font ligatures in this case is turned on so i've got this set to true so font ligatures again will take these two characters those two and it will combine them into this one arrow and you have things like the triple equals or the double equal stuff like that i just think those are cool sometimes they're a little confusing for other people who have never seen them before but i think they're great so all right so uh that's kind of like how you customize like the pretty aspect of vs code your theme your font adding font ligatures if you want to now the next aspect of this is similar it's installing extensions but it's not just installing extensions for visual things it's for actual functionality in here so i'm just going to scroll through and show you some of my favorites in here the auto rename tag if you rename the start of um of a tag in html it'll do the bottom one as well i've got one for better comments this allows me to give let's see if i do a comment up to do it highlights it orange that way if i'm scanning through my code i can really see that thing pop bookmarks to set bookmarks in your code as you jump through them the cobalt theme you see here debugger for chrome for debugging what else do we have some snippets that's a great way to customize your setup in vs code as well is install a snippet extension in this case this one is for react and i use this one all the time the rfc will do a react component and sub that out for me that one's really nice and then i also wanted to share like whatever specific um technologies you work with you can probably find an extension to work with those things inside of vs code as well so i've been doing a lot of work with fauna db recently if you do anything with github there's that graphql to support like graphql intellisense and coloring uh there's what else that i want to show there's a netlify one that i have installed here so all in all like with that section of extensions any technology that you work with check to see if this code has an extension for it and they might and then you might be able to leverage it there the live server extension this is one i use all of the time live share extension is amazing so this is really where the power and beauty in vs code comes from is by having these extensions where you can add pieces of functionality as well as design or visual aspects to your vs code as well just scroll through search look for whatever you're interested in or whatever you work with you'll probably find something that will help your workflow and really customize vs code to be the most powerful for you all right next up we've looked at this just for a second but under the gear icon and then settings or command comma or control comma mac versus windows you can find all of your settings so this is where i set my font family you can set the font size you can set a zoom level so if i take this up to four this is going to zoom the entire thing in really quickly and the thing i like most about vs code is when i make these changes vs code is built with html css and javascript using electron so as i change these things they instantly take place and you can kind of see what changes there i always thought that was really really amazing honestly i think that's one of the coolest things about vs code i've got settings for auto save for your cursor style so i think i actually moved it to line but i want to go back to uh blocks so there's actually i don't like that that's a little bit too thick of a block so i'm going to change that back to a line here and this looks a little bit more like what i expected i think that was a little too big all right and then just scrolling down one of the useful ones in here is this excludes section which will allow you to exclude certain types of files inside of your file explorer so this is probably not what you want to do but if you wanted to ignore all um let's see js files you could put in a pattern like this notice those js files don't show up so i'm going to make sure i get rid of this and don't say that because i don't i do want to see my javascript file since i do a lot of javascript development but that is one of the cool things that you can do so there's all different types of customization capabilities inside of here inside of your settings the one thing i do want to show specifically is the title bar or the window title up here so there's all these different things all these different kind of built-in variables inside of vs code that you can use and what you can do is where do i oh here right here so right here i'm showing the information or i'm choosing the information that i want to show up here so the first part is dirty now what that is is if i type into a file notice it adds this little circle to show that the file i'm on is dirty meaning meaning it's had a change that hasn't been saved since it shows inside of the individual file i actually don't know that i need that i might remove the dirty and again this is just me just kind of playing around with this okay and then it says the active editor medium so if i come into a regular text file this shows me the page that i'm on if it comes come back to settings it shows me that i'm in settings all right so that's kind of kind of useful there the next one is i'm using a separator here so this is just kind of i think the built-in separator is just a dash or two dashes there we go and then it's got the root name so one of the things that i might want is the not just the root name but the root path so if i wanted to know exactly what uh directory i'm in now you can see it's uh code demos authenticated to do app with next.js airtable and all zero so and i think i want that a little bit more and yeah i think that's good for now so this is just an example of just how powerful your customization can be with your settings inside of vs code again there's tons of stuff in here go and give it a look and you'll find different things that you might want to customize all right the last piece that i want to show is the shortcuts so your keyboard shortcuts and this is really nice because vs code comes really jam packed with tons of shortcuts and i spend lots of times using lots of time using shortcuts myself so not only do you have to not only do you have the ability to use the built-in shortcuts you have the ability to customize them as well so i do want to show like one specific example of this and you could customize this to your heart heart's content but uh the new file in here so i have an extension talking about customization called the advanced new file extension and what this does is gives me a way to create a new file if you look in here if i do command n now it's going to ask me which directory i want to create this new file in if i say workspace root and then type in test it's going to create that file and then open it for me now the reason this is really special for me is i can create the file in the directory i want without having to go to my mouse and then right click and say add new file or click up here blah blah so the one thing i did customize on this is its uh key binding is not default defaultly not defaulted to command n it's actually ctrl shift n or something so the default command in or control n on windows is set to do a new untitled file and what that will do if we unset can i unset this one let's see if we reset this key binding up here it goes back to that thing so if you look at if i do a command n that's going to create an untitled file but it's not saved anywhere so then i have to go and save it and that's just not a great experience for me so what i did is i just customized this advanced new file where i want it to be if you double click and then command oh not command enter actually let me get rid of that let me try it again so command n is the is the one i'm going for so now it's set and now i can do my command n up here so you can customize your shortcuts as much as you want you can also download or install extensions for key maps so if you like the the shortcuts inside of sublime you can get the sublime key map there's one for adam adam adam adam i don't know why i said adam but the atom key map so if you like adam as an editor you can grab all of those too so if you have actually here's a really weird one uh the vim shortcut so if you really want to go wild and use vim you can use the vim shortcuts in here as well i don't know i guess it's just this one up here so anyway if you wanted to take this and be really wild you could do that too so those are all the different ways that you can customize your vs code you can set the theme cobalt 2 is what i use shades of purple night owl winner is coming those are some of my favorites you can set the font i use spherocode for a while now i use cascadia.js enabled with font ligatures you can have extensions for anything almost that you want any sort of functionality you go in and customize your settings and you can do your shortcuts so that is a lot that you can do with vs code again if you're interested in doing the vs code superhero course by my friend codestacker or jesse from the codestacker channel there's an exclusive discount below so otherwise question of the day for you what is your favorite way to customize your vs code and maybe what theme and font are you using let me know in the comments below in the meantime thanks as always for hanging out and checking out the video and i'll see you in the next one

Channel: James Q Quick

Views: 681,813

Keywords: vs code, visual studio code, vs code customization, vs code extensions, vs code font, vs code font ligatures, vs code settings, vs code shortctus, visual studio code extensions, web development, visual studio code tips, vscode tutorial, best vscode extensions, visual studio code themes, customize visual studio code, vs code plugins, hottest visual studio code themes, top 10 extensions for vscode, vscode tips and tricks 2020, vscode themes, vscode

Id: yvXHM2NByh4

Length: 14min 7sec (847 seconds)

Published: Thu Oct 15 2020