My VSCode Theme and Font Setup

hey what's up my name is chris and welcome to coding in public today i want to do a very short video but one that's been much requested and that is my vs code theme and font setup now i've done a video recently on extensions in vs code so if you're interested in that i will leave a link in the description but i'm just going to focus on these two in this video i'm going to first of all show you my theme and then give you some other free options because the one i use is paid and then i'll show you the the font that i use as well now you can see here i've got a project open that we did earlier this week on the channel and the reason i'm using this one in particular it's this typewriter animation that you can create is because it's got a style sheet html and javascript all in the same file so if you're interested in that you can check it out but that's why i've chosen this one so i can show you the font especially and how the theme interacts with those three different types of code so you can see up here here is how it displays when it comes to css here's how it displays when it comes to html and then javascript down here and you can see i've got some other things going on with my font like this right here these ligatures and this triple equals down here does not equal zero i'll show you how to do all that in a moment first of all when it comes to my theme i'm going to go ahead and open my sidebar here and show you that my theme is called monica pro and you can try this out for some time i think it's about 10 pounds or so if you want to purchase this and i'll show you that in just a second here but in addition to the actual extension itself they also have icons that come along with it as well which you can or cannot use whatever you want to do now like i mentioned here is how you buy the theme so you can buy for vs code or sublime text and they give you different kind of descriptions of what it looks like and all this kind of stuff talk to you about that and then let's see you purchase it right here and yeah it's about 10 pounds and you can buy a license they basically give you a code you enter it in and you're good to go like i said you can go ahead and try it out for free for some time and so that'll give you a really good sense if you like it or not and it comes included with multiple variants as well so i'm going to go ahead and hit command shift p on my mac and click color theme you can see here not only do i have classic and dimmed and all these kinds of things but i can also switch between these now let's actually switch back so you can see what this looks like i'll open that back up and then as you start to just move it actually shows you what these look like one after the other so these are the four that come with the pro version i use this octagon one which is kind of a purplish hue but there's some other options as well and then there's this one which is more of a brown flavor and then there's like i said there's a few others that come with it all right so that's the one i use but there are a couple that i also really like that are free and i've got them installed already just to show you what they look like so one of them is called night owl let me actually just arrow down to that and so you can see it's a lot darker here but it's that same kind of purpley hue and if you don't like italics you can use the one without italics as well now the other one is called cobalt 2 and i think that would be up here that's by west boss and you can see this is more of a blue color the thing i really like about this is that all the different sections of your code stand out a lot because the colors are just really high contrast between each other there it is in javascript html and then css up here both night owl and cobalt 2 are free and you can just grab them from the extension store in vs code now i also mentioned that i want to show you my font and it is a font by microsoft called cascadia pro and they actually say that is the default font for visual studio code so you may actually already have this or not visual studio code just visual studio but you can also grab it from here and it's free to use they have a code version they also have a powerline version so that you can actually include a lot of those ligatures that i'll show you here in a moment not only do they have italic they also have cursive as well actually let's come back up i think it's right yeah here we go now there are a bunch of different options you can see all the different character sets they have so there's a ton in these these typeface itself but if you want to grab the most recent one you just come down here and click on this releases and then you can download it straight from here just to install on your computer like you would any other font now you'd use a normal font for your code editor and then for your terminal you would use the powerline font i'll show you that here in a moment now if i come back here the one thing i want to show you is how to install the different ligatures that are open and possible you can see here i also have the cursive form rather than just the plain italic so if you're like what are you talking about let me move back over here and let's switch back to my octagon theme just because that's the one i like and i'll close the sidebar so you can see here i actually have a cursive font here and then i also have like i showed you below some special ligatures some special symbols basically and this is the same as saying this and if i move them together then they switch into that ligature so it just makes it a little bit more clear when you're typing those out you can see here this is does not equal like this with type checking this is just without type checking here's a triple equal and you can see it makes it real long and easy to read so those are some of the things you get when you turn on ligatures now the way you use this font is install it like any other font on your machine and then open up your your settings in vs code and then uh you're going to want to click this right here at least that's what i like to do just to work in the json and i'll show you this in kind of two different levels so first of all this cascadia code itself is what i use for the actual body font for all of my documents i like a nice line height as well just to make it easy to read and then i've got a powerline font that i use for my terminal that again comes from cascadia code that includes a lot of the things that you'd be used to if you use like zsh and things like that if you're interested in a video on setting up a terminal let me know and i'm happy to do something like that in the future now like was mentioned over here if you want the cursive form of the italic you can use this right here and you'll notice that this also gives you access to all the ligatures if i come over here that's exactly what i've done so by adding this i've both turned on ligatures and i've also said hey this is the exact kind of form of this font i want you to use so there it is that's my setup for both the theme and then also the font that i use in vs code now this may change over time i'm sure it will uh you know how we are we're always changing around things but i hope this was helpful for you if you have any questions feel free to leave them in the comments and i will catch you next time thanks for watching happy coding

Channel: Coding in Public

Views: 55,510

Keywords:

Id: 5uETTXxVj8s

Length: 6min 15sec (375 seconds)

Published: Fri Mar 11 2022