Customize Iterm 2 with ZSH and Powerlevel10k | ZSH Tutorial

in this video we're going to take a look at how to customize the terminal experience on your mac and the first step we're going to take is by switching out the default terminal for item 2. so make sure to download item 2 you can go over to item two's website which is item2.com click the download button and install it like you would any other application now this is a mac os application so this video doesn't apply if you are a windows user okay so the next thing we want to do once we've installed that is go over to this link which i will leave in the video description but this is a link to guest by kevin smith's and what we're going to do is we're going to take the terminal that we just downloaded and we're going to make it look something like this so let me actually go ahead and open up item so if i open up item it looks something like this at the moment which pretty much looks like the default terminal but what we're going to do is fancy it up a little bit and install some themes and make it look like this now some important points to highlight here is you can see that we've got a little bit of a separation between the current directory that we're working in so we've got that like block around the tilde directory or the block around the test directory which is the current working working directory we also have vcs so we can see what um branch we're working on if we if we're working in a git repository now if you don't know about git yet then this probably doesn't make any sense to you yet but when you start working with git then you will understand what it means to be on your master branch or to have a dirty or a clean branch and all of that all of those tools will be provided in our version or in our command line once we've installed uh oh my csh or oh my z shell and then the themes that we see here so something else that's quite cool to to take note of is that once we're done with this we'll also have syntax highlighting so we'll be able to see if a specific command isn't going to run because it will highlight red or it will highlight green so if there's an error it will be red great so even here's actually another example power level 10k uh or power level 10 000. so this is i just got some icons in it so it just looks a little bit better we've also got the time that we ran a specific command if we want to have that much information in our terminal but usually that's the first thing i kind of remove i don't like that feature anyway so now that we know what we're aiming for the next thing we want to do is just scroll down to how to install the first step here is to install item 2 which we have already done from this website there is the ability to install item using brew so whenever you see a command a brew command that just means you need to run you need to install homebrew on your computer first so once you've got homebrew installed on your computer which you can install with this command then you can run all these brew commands and then brew is really just a package manager that allows you to install other applications onto your computer so this command would do the same thing that this button does right it would just install the software for you so uh yeah if you want to go down that road please do but i'm not going to talk about it in this video so the next thing that we want to do after installing item 2 is to use or install oh my z shell or oh my csh so oh my zsh is a package by robbie russell if you want to read more about it there's a link over here but i'm just going to simply copy this command this call call and we are going to paste that into the terminal and that will install oh my zsh which takes a few seconds so once that's done you should have a screen that looks like this where you've got oh my z shell and if you type clear you'll notice that the terminal actually looks quite different so now we've just got an arrow and a tilde we don't have all of the other information that we used to have before a command which was like my full username and everything so the next thing we want to do is swap out themes so when we ran this command that command should have also created a z shell rc file which is a config file that we can use to configure our shell so what we want to do is open up this config file and i'm just going to copy that and i'm going to go over to my terminal and type in open and then that command i think you can even open this with vs code if we type in code and cshrc and that will open that up in vs code so now you can edit this file with some syntax highlighting now the first thing we want to do here is uh whoops i didn't know that that was going to go that small yeah so the first thing we want to do is we just want to change the z shell theme to be agnostic so let's copy this and oops go back to that theme there and paste over uh robbie russell and make it agnosta so now that we've done that maybe let's just put the editor on a different screen so we'll pop that over there but now that we've done that we need to close the terminal so we need to close that and we need to make sure that we quit it properly so it just needs to be completely dead and now when we open up item again we should have a very different looking theme now your theme might not look exactly like mine i've actually customized my color scheme so if we go to item preferences profiles and colors there are some color schemes or color presets that we could have used uh so there's a bunch of different options here but i've actually made my own custom option which i called flat colors and it's flat dark which by the way if you are looking for this color scheme it is on my github repository so if we go to github.comwatch so if you're looking for the same flat item colors as me i will leave a link to this github repository which was made by me and uh yeah you can get the same color scheme that i was using before and all you need to do is actually download this file here flat item colors and uh import that into your item preferences so download that file and then just import it with that setting okay so now that we've got that out of the way the next thing we want to do is continue on with the installation here which is power level 9000 or power level 10 000 and what we want to do is copy this command but this command is going to require that you have git installed on your computer so if you don't have git installed on your computer just yet you want to go over to git's website download and install this like you would any other application and then you can come back over to the instructions and then you can copy this command and you can paste that into the terminal and this is going to run for a couple minutes actually because it's going to install an entire theme so i'll be back when it's done so once that's complete it should have created a folder on your computer in this specific location here so users quentin oh my zsh custom themes power level 10k so you can actually try and look for that directory if you want to and see what's in there but i'm seeing as i know that it's there what i'm going to do is go over to my cshrc file again which we had open in vs code over here and what we're going to do is we're going to change the theme instead of from agnosta we're going to change it to power level 10k so let's paste that in there and now if we go back over to the terminal something we're going to have to do now is just close this terminal again and we need to make sure that it gets completely quit so i'm just gonna quit it completely down there and then we'll open it again and now that we've done that it should have opened up the power level 10k config wizard so this is going to ask me a few questions and this is probably going to go on for about five or six minutes but it's just going to ask me does this look like a diamond so i'm going to say yes does this look like a lock i'll say yes does this look like a debian logo which i don't know what that is but it's asking if that's a swirl so i'm just going to say yes it does so it's just trying to configure it and here is where we get the first bunch of options so we've got prompt style so this will determine what your command prompt actually starts looking like and you can choose option one to have this on the right hand side of your prompt down here but i'm gonna go with option three because that's what i most used to my eyes are kind of used to seeing that blue and that green section there like that so i'm gonna say option three and now it's gonna ask me do i want to use unicode or as c so i'm gonna say option one unicode uh now it's again just asking a little bit more about the format of these things so we've got time here on the right hand side this is usually the first thing i remove so i'm gonna say option one for i don't want any time so this is just gonna give me how long it took for the command to run so option one then i will just choose option one here this is the angled separator and they all pretty much look the same so i'll say one then i'm going to choose option one here for the sharp edge but there's also a blurry edge or a slanted edge or a rounded edge but option one looks the best then again these are options for the tails so what we want this end item to look like and i'm going to just say flat so it's flat on this side and it's flat on this side so we'll say option one prompt height so this is going to determine whether your prompt has two lines or if it has one line so i'm going to choose one line then we have prompt spacing i'm going to choose compact i don't like the sparse option then we can determine if we want icons and how many icons we want in our command line so there's the few options or few icons option and then there's many icons so i'm going to go with option two for this one just for the tutorials i guess we can see how that looks then for prompt flow i'm going to just choose option one concise enable transient prompt um to be honest i actually don't even know what this setting does so i'll just say uh well i'll say i'll say yes transient prop mode um okay i guess i'll just say disable instant prompt yeah i'm just gonna go with one okay then the next option here is do we want to overwrite the current configuration file so the reason why i'm getting this question is because i've already had power level 10k on my computer before if you've never set this up you probably wouldn't get asked this question but i'm going to say yeah let's overwrite that and now it's asking us do we want to apply changes to the cshrc file now that's very very important because it's going to make some changes to a file that we already have open which is this file over here so i think it's probably best that we just close this file so that we don't save over any of those changes and now let's say yes let's apply those changes to the cshrc file and so now all of our changes should have been saved we've gone through the config and yeah uh now we've got the terminal that looks something like this so let's hit clear at this point it's also worth noting that if you don't like the way that your terminal looks you can always um run that configuration again so if you go back to the documentation you can just run this command p10k configure and that'll run you through the questions again through the wizard of course i'm just going to say quit because i don't want to go through that again but i did remove some settings here on the right of my terminal so if you want to do the same thing what you might want to do is just open up this z shell config file again the zs zs hrc file so let's just copy that and let's open that up with vs code so i'll type in code and then add that command and that should open this file up in in github and if you scroll all the way down the next thing this will tell you or the thing that'll this will tell you right at the bottom of the file is if you ever want to create a custom configuration then you can just open up this file here so you can copy that file name and you can go back over to the terminal and you can type in code and then add that file name and that should open that file in vs code which i actually already had open and then what i did was i went to this write element section and it actually had a lot of options in it like there were plenty of options in there so i just took all of those out and saved and that just means that nothing should ever appear on the right of my terminal so if we close this i don't have any time stamps or anything like that okay so now that we have gone through some of the hectic configuration stuff um let's take a look at some of the slightly easier things some other things that we might want to do are auto suggestions so this is where you start typing and then it will auto complete the command for you that's a nice one but we have to follow instructions on a different site and then something else we can also do is syntax highlighting and this also requires brew so if you haven't gone to brew or brew.sh and run this command you need to go run that it does take a while to run this because it installs brew but once you've done that you can run this command here brew install sh or install zsh syntax highlighting and that will install syntax highlighting onto your computer and once that's done we just need to run this command here which will add a source to our z shell file and that should supply syntax highlighting as as an option for our terminal so if i clear you can already see that that's working so when i type clear you can see that that turned green if i type in code then that turns green if i type in an example of something that's not going to work like if i just start making up my own commands like dell you see that that doesn't that doesn't work that's red so syntax highlighting is quite nice to have now that we've done all of this stuff in item some of the other terminals on our computer might be broken just in terms of the icons right so if we go back over to visual studio code if you open that and you go to new terminal and you open that up you might have little block icon things in that terminal or if you open up your default terminal on your mac you might have little blocky things there so what you need to do is you need to set the font for that to be meslow so you need to go into preferences settings and then let's just look for settings json and vs code and that'll pop up eventually and we need to just change the value for terminal integrated family now if this isn't an option in your settings json file you can simply type it in or you can if we go back over to the documentation in the same guest there is a section here on font family installing a patch font there we go and there are settings down here for visual studio code right so what you need to do is just copy one of those values and paste it into visual studio code but none of these are the actual correct font the correct font that we have to put in here is meslow lgs let me just paste it in meslow lgs nf so if you save that now that will fix the terminal in visual studio code and you can do the same thing for your default terminal on your mac if you ever decide you want to use this again that's also going to have the same issue so you just want to go to preferences and then text fonts and you want to look for the font that we were using which should be meslow lgsnf and when you save that um that will fix your default terminal as well so you just got to make sure that you set that fund family in all your terminals um if you're ever going to use any of the other terminals i hardly ever use them because i spend most of my time working from item and that is all i have for you in this video and i'll see you guys in the next one

Channel: Quentin Watt Tutorials

Views: 153,501

Keywords: Quentin Watt, Tutorial, How to, Web Development, git, command line, cli, customise terminal, iterm2, powerlevel10k, syntax highlighting, console, powerlevel9k, z shell, zsh, oh my zsh tutorial

Id: D2PSsnqgBiw

Length: 19min 4sec (1144 seconds)

Published: Fri Jun 12 2020