VS Code Editor Customization Guide: Tips & Tricks for Personalizing Your Visual Studio Code IDE

hey dear folks welcome back to our Channel I am Harish Kumar and today we are kicking off a brand new series that has been one of the most requested topic on this channel we are daping deep into the world of customizing Visual Studio code for web development over time I have received many comments asking about my vs code settings extensions and themes so this series is for you before we get started if you are as excited as I am about this series don't forget to hit that subscribe button and ring that notification Bell so you won't miss any of upcoming episodes trust me you won't want to miss what we have store in this series before we proceed I'm happy to share with you that I have just finished writing an ebook entitled JavaScript a comprehensive guide from es 2015 to es 2023 it is a eBook that covers all the important things about JavaScript if you are interested in VJs react or any other JS framework it is very essential to know the basics of JavaScript it starts with simple things and goes all the way up through more advanced approaches making sure that you know JavaScript inside out here is a preview of what's inside the ebook the table of contents shows that it contains all new features and methods introduced since es250 similarly you can also find a list of new features introduced in es 2016 and so on included are all major new features in each ecmascript versions from es 2015 to es 2023 you will feel comfortable handling any JavaScript project after reading through this ebook the book includes stepbystep instructions along with clear examples to ensure you are well prepared your worth as web developer increases when you improve your JavaScript skills whenever you encounter a problem or need assistance with any JavaScript project you can always refer back to this ebook for guidance wait no longer grab your copy of JavaScript a comprehensive guide from es 2015 to es 2023 start your journey to JavaScript Mastery now all right let's get [Music] started have you ever looked at someone else code editor and thought wow that looks amazing well that's exactly what we are going to achieve today so today we are going to customize vs code editor that inspires and enhances your productivity so let's get into this this is the fresh installation of Visual Studio code edited so very first thing I'm going to to zoom the window because here it phone size looking very small and I'm not sure if it is clearly visible in the video or not so to zoom this let's open the settings of this vs code so to open the settings here I'm going to press in the keyboard control comma and if you are on Mac then your key combination is going to be command comma here it is the graphical interface of settings I do not use this graphical interface instead I do most of the settings in the Json file so to open the Json file click here this small icon and here it is settings. Json and here I'll say in double Cotes window do Zoom label is equal to 1.8 and save this and here it is and I'm sure it is now clearly visible in the video and it's done now we are ready and let's close all of these now let's start with the easiest and the most noticeable customization that is themes themes are going to change the color scheme and overall appearance of your editor vs code comes with many building themes and they are very good let's see some popular ones so go to install theme I'll click this icon which is a Marketplace for extensions and at the moment no extensions are installed so let's start with the themes so here the most popular themes are one of the material themes this one you can see it has downloads near about 3 millions and this is also the most popular it has near about 2 Millions downloads you can try this another popular theme is braa this one it is also very popular near about 5.8 Millions downloads and another very popular is the pale Knight CL this one it is also very popular near about 1.4 million installation these are the very popular themes but my favorite is GitHub theme and this one and you can see it has 9.1 million downloads so let's install this now it is installed and immediately we get the option to switch theme you can change the theme from here or we can change it from this gear icon let's click this and here here color themes and from here we can search GitHub and you can see this GitHub themes extension comes with many themes collection the GitHub dark GitHub light GitHub dark themed GitHub dark default and like so but here I'm going to use the GitHub do so let's open our project to see color scheme of the code and here I have open the davel application and the vs code and now let's go to PHP file and here you can see how cool the color schema looks in this theme next let's install the file icons right now you can see this is how the default icon looks I'm going to install the material theme icon this one and it is installed immediately it gives this option to select the them icon so here let's select the material theme icon now in the Explorer window you can see the theme icons are changed and it looks very nice as compared to default icons another essential aspect of customization is the font the right font can make your code more readable and stylish here I'll show you two phones which are mostly used and you can try any one of them so one is the P code and second one is jet brains mono this one both of these phon are very popular and used by many developers you can download this phont from here and install it on your system and then update the font in your vs code editor and to install this here is the link how to install let click this uh from here you can download this font and these are the steps to install according to your operating system this this is for Mac this is for window and this option is for Linux in the same way you can also install the F code in on my system I have already installed the P code so let's change the font in the BS code editor so in the editor let's open the setting so control comma and from here let's open the settings store Json now from here we will set the editor for family so editor dot font family this is the default font family by the BS code editor and here I'll add FAA code like this it's I also like little bigger font siite so here and say editor DOT phone size 15 and next editor dot line height 40 and you can immediately see the difference the line Heights are increased next I want editor dot letter spacing and that is05 now let's open the any PHP file to see the difference it looks nice and very easy to read and now I also want to enable the font ligatures in in case if you you do not know what is theages in the browser let me show you the some examples in this SP code let's scroll down and right here these are the legates for example this triple equal to will look like this so let's say enable this and see this in the editor so editor dot for legates through and now from here you can notice the difference in this arrows if I disable this here the arrows are look like this and if I enable this the arrows are like this our next step is key binding so previously if you have been using the sublime or atom text editors so making the switch to vs code might feel a bit different at first because you have to remember the all new keyword shortcuts of this vs code and we do not want that so to solve this problem we are going to install a new keymap extension and here if you have previously worked on Sublime editor then here we will search for Sublime keymap and here is the first extension this one subline text key m map and another one is atom key map because I have switched from atom to PS code so I'm going to install this atom key map and now all the keyboard shortcut of atom editor is applicable right here in this editor for example from control Black slash we can close this activity bar and our next setting is also about this activity sidebar so when I'm working on any project I always keep this close so when I'm opening and closing this side part you can see this code is moving and I don't like that that's why I want this activity bar in the right side so for that here I'll say what PCH dot sidebar location right and here we go now it's on right side now let's see another very cool extension and I'm sure you're going to love this so let's click this extension icon and here we will search for tole this one as name suggest it is very helpful to dogger your settings let's install this and see and if you scroll down here is the key binding example let's try this so I'm going to copy this one and because this is the example of key binding so we need to open the keyboard preferences so control shift p and here we will search for keyboard shortcuts preferences this first one and here from this icon will open key bindings do Json this for from this toal extension let's copy this and paste it here now in this example you can see the key is F4 and the command name tole and this command will work when the editor is focused and this is the settings we are going to switch for example the mini map this one and the status are this one so you may want to enable this or hide this so from keyboard if you press this key F4 and now you can notice the mini map and the status bar is gone and if we press F4 again both of these will appear so when I'm working on the code I like very minimum things on the window so I want to hide this in mini map the status and this activity bar so I want to hide all of these so I will pass these all settings in this toggle so we can toggle it according to our need so here I'll say workbench do activity bar do Vis new and right here I this to set for so this activity bar can be toggled and this bed Crumbs are also not very useful to me so I want to write this as well so here I'll say bread crumbs dot enable grp and here I'll set this hols now with F4 key I can hide all of these things all these things are gone and we can call it back when we need it and most of the time I keep it hidden and we can open this find gate debug and extension with the help of keyboard shortcuts so if I hide all of these and with the keyboard shortcut control back slash we can toggle this and control shift e will open the fins control shift F will open the workspace search and control shift X will open the extension how cool is that next let's customize this title bar I'm here in the to so here it is looking very different for mac and windows it may be looking different I want to customize it as well so in the settings here I'll add another setting option window do titlebar style custom and this will ask to restart this vs code so let's restart this and here we go now you can see the the menu bar options are right here and from here we can navigate these files now right here it has current working workspace we can customize its text also so for that here I'll say window do title and now here you can see the huge option we do not want all of these so let's remove it and now if I over here you can see we have option for active editor short which is going to display the current open file name so if I copy this and paste State like this one current file is settings. Jon so it has displayed it right here and second option is the active editor medium which going to print the reality path of the file so let's print this one so let's open the user model and here you can see app model user now let's see the next setting so right now we do not need these so let's close this now let's open the file explorer now here let's open any file let's say users. PHP now look at this tab the user.php is in italic font that is because this user.php is in preview mode so if I open any other file let's say EnV it will going to open in the same window where user.php was open double click or write something in this now you can see it is no more italic and now here if I open any another file it will open in the new tab and again this env. example is in preview mode here let's open again another file and it will replace the env. example I do not want that instead every time I open any new file it should be open in the new tab so for that here I add a a new setting workbench dot editor dot enable preview fors and it's done and now this time if I open any new file it should be open in the new tab great it's done let's see next so when we open a new window it shows this small window instead what we want we want it should be in full screen so to enable this feature here we will add a new setting window dot new window dimensions here will say inherit and now let's open your window and here we go it will always open in full screen close this let's try one more time open new window and great full screen next is this welcome page I do not want to see this welcome page every time we open vs code so let's disable this so here I'll say workbench do startup Eder none and now if you open the your window we will no longer see welcome page I think this is enough for today's lesson in the next episode we will dive into more super cool extensions that will supercharge your coding capabilities so stay tuned for that thanks for joining me in this episode I hope you are as excited as I am about this series if you found this video helpful give it a thumbs up let me know in the comments what customization you have made in your vs code editor until next time happy coding see you in the next [Music] video

Channel: QiroLab

Views: 1,941

Keywords: vscode customization, vscode tutorial, vscode themes, vscode extensions, vscode settings, vscode keyboard shortcuts, code editor customization, programmer productivity, developer workflow, visual studio code

Id: RDP8rlqtiP0

Length: 21min 50sec (1310 seconds)

Published: Fri Mar 01 2024