VSCode setup for a productive coder in 2023

hey there everyone hitesh here back again with another video and in this video I will walk you through with the perfect vs code setup now this video is not just about other videos or almost similar to like that that hey I tell you the list of the vs code themes and maybe vs code plugins and you can just install them and forget about them now this video is not like that in this video I really want to show you that how you can utilize your superpower as a programmer and can install as few as possible plugins and can make still great utilization and great productivity things from the vs code now I certainly believe that certain plugins helps you to increase your productivity but certain plugins are also responsible for lacking down your vs code eventually with the large projects you are going to feel like that the vs code is lagging it's slow it's not that much fast and the fault is installing thousand different plugins that you are unnecessarily installing and there is no need of it you can just do all these things with the settings of vs code and only handful of plugin are required which will truly increase your productivity and are also going to be great when you change your system from Windows to Mac to Linux or maybe on the GitHub code spaces wherever you go these plugins can easily come along with you there's a small set of it and there's a lot of customization I 100 believe that nobody should directly just plug and play and click and install the plugins until unless they know what they're doing and can they replace these plugins with their own customized settings and the code this is what exactly I have been always advocating and in case you remember I actually was there on the live stream of official vs code channel on Microsoft and there also I mentioned this thing that hey don't install thousand plugins work out on customization of each thing you will enjoy vs code a lot more than that this is exactly why there is a cult following of vim and the neovim because there's so much of customization this is going to be a controversial statement that this vs code is almost like the modern era or for Gen Z of the Vim or the neovim I know this is going to get a backlash on me but that's okay what I'm recommending is don't just go out of the box go ahead customize the things make it your own vs code so in this video I'll walk you through with the themes the plugins and how I make my vs code as as productive as possible and what plugins and themes and what all the things that I use so let's go ahead and get started with that this is going to be a pretty fun Journey so come along with me now first this is my vs code and as you can see I have a project opened up this is just a basic project that I was teaching in yesterday's class so there is nothing too much uh there if I go ahead and use the controller you can see the controller is going with that and this is how it looks like by default I can hover on the right side and I get a mini map as well which is also customized one now notice here I customize things a lot there is no plugin for minimap or this everything I customize the things directly from the vs code setting all right so let me show you that now first you might have note is that I actually use a customized font in that not only this font sometimes I go ahead and by the way I hope you know the settings of this that you can go ahead and change the setting for everything Ctrl shift p or command shift p is the thing and go ahead and search for the setting file there is a user setting and the default setting Json file I'll go ahead and open the open user setting first so this is my setting I go ahead and keep on changing the things I'm using a Mona Lisa font which I paid for you don't need to do that you can use any phone sometimes I actually recently not recently just two days ago I bought another font comic code and I paid around 12 dollars for it I bought two versions of it one version comes for six dollar I found it interesting and this is how it looks like a bit quirky uh but I'm still testing out that in the tutorials is it nicely visible is it giving fun to user or is it giving pain to user so do let me know in the comment section I would love to see that so the first setting that I want and I always use is change the font uh I stare the screen almost all day long and I want the font to be customizable I know a lot of people don't invest in their phone and think how buys the phone I do and I love that I actually appreciate the people who are working on bringing us the fonts which are programmer Centric there are a lot of others like feeder code and lot bunch of them feel free to try any one of them but all I recommend is give it a try that's the most important thing now coming up on the theme part which theme I'm using now I definitely use themes and I've used themes in the past as well but every single time I actually come so far away from the theme that telling you that this is the theme you can install and you will get exactly my look is not possible I love to cast customize my team I love to change the token colors and everything I know you don't know it but I'll walk you through that how you can customize things and themes on you now the best way of getting started with the theme is install a theme which you already love but it is almost there that you find your true love there so you can do a customization let me walk you through that how you can actually go ahead and utilize this so this is the vs code official documentation and you will see that syntax highlight guide as well as tokenization you want to focus a lot more on the tokenization because this actually introduced you the language grammar language grammar simply means when you create a try catch blog or this code indentation block or maybe things like console the variables other things which are default in the language like if a statement if keywords what a language could be there this is all your grammar and your tokenization and you can go ahead and learn about them and change a lot of things like how your variables should be declared how your string should actually the colorization should happen so they give you a whole lot of things that how you can design and work with that now I highly recommend you to do this because this is not just important for creating a new theme but it actually helps you to dive deep into the language grammar as well how the JavaScript is designed how the C plus plus is designed how the Java is designed what are the tokenization of it it actually opens up your so much of your mind that you'll absolutely love and enjoy it so right now I am actually on this theme which is quite far it is almost 100 almost 100 but he has 70 80 customizable I'll very soon publish the theme I use certain settings like for example on the top whichever the tab is highlighted it's easier for the teaching purpose so I pay a lot of attention on that detail so here we go I have a lot of details which tab is highlighted so that user doesn't face any problem while learning so this is the basics of it now further on when I move further the first setting that I do is configure my Min map now in order to do so all you have to do is just open up the settings once you have done the settings go ahead and look for a Min map just search for it and you will be able to see all the mid map settings for example I do my Min map scaling at 2 because this is already too zoomed out so scaling is two and the scaling is nothing that how much of the values that you see if I go ahead and change this to something like three this will be a lot bigger so if I go ahead and do this this is already consuming too much of my space so I think the two is good enough for me you try yourself now I also go ahead and simply hide it automatically that actually saves a lot of space on my real estate on the screen I do that as well and also on top of that I actually hides a lot of things so here notice this I always uncheck this it says render the actual character on a line so if you render the actual character it only not only consumes a little bit or or more of the memory which I don't like but there is no point of this it's already unreadable uh I don't know if you can read it but I cannot so I go ahead and change this that hey don't render the actual character save some memory and bandwidth there and just give me the patterns so already looking at this I know that this is one method here this is one method here if there is any errors it automatically highlights the red so this I found a far more better setting than doing anything else like that now another thing that I actually use a lot is uh the Snippets so this is one thing which I highly highly recommend to every single one is there is a lot of time that you actually work on lot of things for example let's go into this controller this is a delete user controller and I love to use this a lot and I don't know how how I was living before this plugin here is the plugin known as pieces now I am a big big fan of pieces these days I don't know how I was living before the pieces it is so much productive and organize everything for me so this is the first plugin that I keep always intact the advantage of this is it's it's always available to me and the best part is I can just after installing it I can right click and just save everything to the pieces so if I go ahead and simply say hey share this via the pieces link if I want to share it with anybody if I go ahead and want to just simply save this to Pieces it will automatically go ahead and save it to the pieces best part about it now what I like on top of this is the flow that is the best part I know a lot of people will comment down and say I can find it in charge gbt the flow man the flow you are not going to find the flow in the chat GPT let me show you I can click on the pieces and I simply can search all of my saved material I've just started using it so there is not thousands of it only the usable one of them which I constantly use I can just open it up and check out that hey what did I used for this guy here in the typescript so this is my app right react native configuration I can just see and just check it out and I can just see and read all the descriptions whatever I have saved where is the shareable link all the details are available to me right in the vs code I don't have to leave the vs code that is the best thing I love and here notice here there is a middleware about the next JS if I go ahead and open up the JavaScript there's a mongoose connection string I can just go ahead and just bring it back into my code file so easy I don't have to do 1000 things and a circus of going on to the chat GPT or searching out on the internet stack Overflow no need to do anything so this actually increased my productivity so I'll always keep the pieces yes there is a default softwares available for this that I can try and work on with this but I found myself using it more in the vs code AS compared to the official there's setup and the software so I enjoy it more here yes I use the software a lot but I'm using these days it's more in the vs code itself and by the way recently uh I saw that tweet that now it's available in the python notebooks as well so yeah they are they are on to a very much spree of just making it available every single place okay so this is all the basics now let me go ahead and move on to the extension pack if you go ahead and see the extension pack I receive a lot of extension from the companies as well they they say hey don't just mention it on the YouTube yet we are not ready so I try them a lot but I'll walk you through which of them are always available in my vs code settings so that you can also get this now the first one that I absolutely love is actually the indent so indent rainbow is one of them so if I go ahead and look on this indent rainbow this is one of the best plugin that I have used so far it actually helps me so much to do a lot of productive stuff for example if I go in the user controller you can already see that there is so much of the code which I can easily understand where is the indentation how it is going on which color and it is super useful when you are working something like yaml files and Dockers or maybe something similar to that so it's super helpful I always don't always keep it with myself never have found a single place where I I find it not useful not only that there is also a helper guy which actually helps this plugin to perform better and I'm pretty sure a lot of you are aware of it known as prettier yes but you have to do the settings a little bit of the prettier based on what language you're using and it is enabled or not so you have to go ahead and try this out but again you can do a lot of these settings and everything directly out in the vs code so if I go ahead and look at this in the very bottom of it I can just check on the prettier click on it and notice here the code output and all of this is available to me so I just use it like that but you can go ahead and do command shift p and write prettier so notice here the prettier settings uh Maybe indentation no prettier so I just use the prettier settings directly there so it works out of the box there is nothing too much to worry about on that side okay moving on to another favorite of my plugin is something which I use a lot and it helps me I love the way how it actually works so there's something like a to-do highlighter uh the best part about the to-do highlighter is it is customizable you can write more of the strings for example let me show you that I actually have couple of more things which I use in my course and recordings for example we'll discuss this in the next video for example we'll discuss this or will not discuss this this is your assignment you can actually use this to do highlight and add more keywords again the settings are same they have mentioned this quite a lot in here as well that how you can actually do this there are some examples as well of the highlighting to do keywords and all that you can try this out in case you want to this is one of the things which I absolutely love so to do highlight is one of the plugin another one after prettier we have this to do to do highlight and there are a lot of them I just use the first one by Liu and this works out of the box and I definitely have some of this thing customizable for me but I actually use this a lot now one of the next plugin is going to surprise you a lot for example and by the way do you know that you can actually just double click anywhere here and create a file in the root just double click and you'll just get this now let's just say you're working on react.js or maybe there's a file available already with the name of react.js so we'll just open this up before making this video I was just trying this out right now there is nothing in it now I always recommend that plugins needs to come and go as you're working on some project maybe you're working on angular maybe you're working on python maybe you're working on something else and I'm pretty sure a lot of you have this code Runner which is always available in your vs code it consumes so much of memory if you are not utilizing it maybe you're working in react or a node project why that plugin is there you can always reinstall it so you are just bogging down your performance of vs code as well as your system so I highly highly discourage you to do so make the plugins and make the things coming go in and some of them are always constant that you always work with them like the to do highlighter or maybe pieces these are my productive tools but not all the things so that is why you don't see code Runner here but if I'm working on maybe C plus plus and the project is C plus plus so I'll just definitely have installed it in my system now you also might have seen that some people who work in react also use a lot of react snippet for example there is react native functional export component something like this yes I'm about to get rid of this very soon and I want to show you how I'm going to get rid of this now if I go ahead and do this this actually gives me a boilerplate code nice there is no problem in it but here's the thing now I have another plugin installed all which can help me to get away from it very very soon now this is the snippet creator that I'm using it's wair Consulting this is what I'm using now this is far more different than the pieces pieces actually help you to save these Snippets every single place in your vs code in your in your pieces original software this actually helps you to use the Snippets and create a vs code shortcuts for it so just like I was able to do all of this by simply saying that hey I want to react native functional export component I can go ahead and use it but can you notice here that I'm also using 100 different such shortcuts which are in their vs code I don't know what they are doing there I don't need all of them I just need a handful of few which I use I don't use thousands of them I just use a few of them so what you can do is you can just simply go ahead and select all of this that hey this is what I want to have and save and I can just go ahead and command shift p and I can just go ahead and say that hey I want to create a snippet once you go ahead and say that hey if you want to create a snippet just give it a language so I'll just go ahead and say JavaScript and what is the name of this snippet so this is simply react native export snap it for me the name can be anything and then what should be the prefix which is going to trigger this so I'm going to say that hey this will be RN export so you can name it whatever you like I love this RN export and then simply if you want to give and provide some description that's great otherwise it will automatically use the snippet name so that's it now I have this snippet saved this is locally in my vs code notice there is a difference if vs code goes away this will also go away so I highly recommend to also save this into your pieces so that next time you need you can just bring it back from the pieces that's always great just save this and now I can use RN export add an export oops looks like I didn't save it properly so I can go ahead and use RN export so probably let's do this one more time so probably didn't saved it all right so let's try that's why I'm saying that I'm trying it right now react native functional export there we go so we'll just use it or we'll use the different one react native functional export with the styling yeah that's the one let's try this one more time so I'll just save this again and this time we'll just command shift p and we'll say we want to create a snippet this will be JavaScript and will be saying the snippet inclusion and we'll say snippet name so we'll just say or N Dash export will be my name the trigger will be our NX port and probably I use it export before recording the video so that's why it's creating a problem so I'll say something like my RN so that probably will be helping us and then I'll just save it so all right now it should be working fine so I'll just say my r n it's not working probably there is some issue with that that's why I'm saying it's about to replace but I tested out while before recording this it was working fine so this is really a great snippet I'll just check out why it is not working because as certainly we can see that it's not working as the time of recording again I don't have any affiliation with any of these Snippets I'm just telling you what I use and what's working for me and that is one of the reason that I'm still not sure that can it replace 100 of my vs code Snippets I'm still using the react native Snippets so I'll just say react Snippets something like this so there we go I still have this installed as you can see this is still installed but what I'm concerned about it gives me so much more that I'm not using so I just want to use only the ones which I'm using again these come and go for example these days I'm using a lot about the Tailwind so obviously the Tailwind snippet is installed but I don't keep it installed always I always make it come and go some of the plugins which are always there also includes something known as live server so as you know by earthwick day so this is the one which is always there because anyhow I'm actually utilizing something for the web development so I always keep this one up on top of that I also use Postman you might have already seen that and a lot of you might be a thunder client fan and yes I am too but I actually use Postman a lot because it provides me the login Feature A lot of my work and which I do with the colleagues is already in the postman and it gives me the postman out of the box and here I can see and grab all the features all of my collections directly in the vs code so that is why I use it a lot of professionals also use Postman because already a lot of work is in the postman so why not to just bring it up again this doesn't mean thunderclient is bad it's equally good but this actually makes a lot of sense for my workflow so I use Postman up here as well on top of this I also use Docker as you might have seen this here so this is the one it actually allows me to have all the Registries all the images that I have not only this it actually gives me a visual of all the networks all the volumes that I'm creating I'm working on it I have right now removed it so that I don't accidentally expose anything so this is all the plugins and features that I use again the core sense of making this video is to make you as much productive as you can and don't install 1000 different plugins just because a new video has arrived or somebody have shared in the Reel that hey install this plugin no you don't need it if you need it then only get it and that's why so again giving you a quick list of all the plugins and everything that I use I actually use a customize theme I always customize my minimap first I use indent rainbow yes I have actually made notes here so I use indent rainbows I used to do highlighters and prettier these are my go to have and then on top of that the plugins that I always install is these days pieces Postman and the docker so these are the thing which always are there live server and after all of this the things actually keeps on coming and go for example the code Runner you might have seen a lot of people recommending it all the time no you don't need it so for example there is a code Runner if you are working on something then only go ahead and install it I do install it from time to time but if I'm working on JavaScript there's no point of installing it I'm running it all the time with the node with the command line so don't over burden your vs code it's a great plugin but you don't need it all the time and then on top of this sometimes I'm trying out new plugins as well one of the more plugin I would like to highlight as a bonus as well for example ah there is this uh new plugin which is for the JavaScript uh this is known as code Ninja code ninja yeah console ninja my bad uh I'm also using this as you can see this is also installed but there is one thing which is bothering me a little bit it works only and only when there is a package.json file and there's a configuration so what it does it actually helps you to just have the output of the console log directly here as you can see this is where the console log highlight is automatically coming that what will be the output but what I really don't like about it is it doesn't work in the core Javascript file if this would work in directly the Javascript file without the package.json and npm modules I would love to use it it's so much good for the teaching purpose but right now all it is doing is it works in the react projects and the node projects and all of that I would love to use it and sometimes I do use it but as of now I'm just playing around with it so it's helpful great to have but I'm not dependent on it that much if it works in the core Javascript file without npm package or something I would love to use it for the teaching purpose so much useful but it doesn't sadly work so anyways I'll still update you more on all the plugins and settings and how I use all the things make sure you actually go ahead and read more about the tokenization this is the most important part of this video that you learned about the language syntax highlightings grammars and all of this so this is all so hope this video has helped you to understand the productivity game with the vs code and I think you have enjoyed this go ahead and try all these out the postman the pieces it's so much productive and helpful all right that's it for this video and I'll surely catch you up in the next one

Channel: Hitesh Choudhary

Views: 52,123

Keywords: Programming, coding, vscode, vscode setup, vscode plugins, best vscode plugins, pieces for developers, pieces.app

Id: SVm2vjcCyZU

Length: 23min 20sec (1400 seconds)

Published: Thu Jun 29 2023