Best VSCode extensions in 2023

hi everyone in this video I'm going to talk about the most popular IDE in 2023 vs code and I'm going to just show you what extension and tooling I'm using in vs code that make my life much easier so let's just dive in and talk about all those extensions so I also have a file open here and this file is just to just demonstrate some of the things that we do and if you want to know more about this repository I'm also going to just share the link to the video that I was talking about ksuid nanoid and uuid and comparison between them but the whole idea is to talk about extensions here and if I go to the extension and look at the enabled one so I have Auto open markdown to begin with Oppo Auto open markdown is basically whenever you're going to open an MD file the first thing that is going to do is just open the preview for you so your life would be much easier and instead of just going and checking the preview sometimes annoying but most of the time I really want to just look at the preview so if I go to my project and I open readme the moment I open it on the right side I'm gonna get the preview so this is very handy and it's very useful at least for me the next one is better comment so better comment is going to give me more visualized comments in my code base so when I'm going to write comment for example if I'm going to use exclamation mark question mark or just using to do or prams like The annotation then I'm gonna get different colors so it's really easier to understand and it will be more human friendly so if you can use better comments as well the next thing is code spell checker code spell checker is actually a very interesting one because it's going to going through your code and just look into every spelling error that you have and it's going to fix it well it's going to just show your error message and then you can fix it obviously spelling errors are not code errors it's good to have a tidy and correct spelling code before you just push your commit so let me just quickly check this one for you you can see now it's going to find the problems and if I highlight it like here and then go to Quick Fix it's going to give you some also recommendation yes I want to be this one and here I want to just change it to value and now we have a better understand now we have a better spelling in our code base and if you know that we cannot change something for example KSU ID is KSU ID so I'm going to right click here actually not right click just go to the Highlight Quick Fix so if I'm not gonna update it I can just say add it to my user setting or workspace setting so it's not going to just complete time now we have colorized so if you're writing CSS and if you're styling it would be very nice to see the the color of whatever you change with like RGB or string or rgba automatically in your ID so you don't have to really check it so this is going to give you exactly the code under your value so if the value is red so you're going to see it as a background red and that that is actually interesting if it's if you're going to write a lot of like a CSS code obviously Docker is darker so it's going to make your life much easier you're going to just show you if there is any errors or something so you can use the docker for visual studio code this is going to be very useful eslint is eslint I don't really have to talk about eslink but if you're going to use linting in your project you must have this extension installed and as you can see we have almost 24 million downloads and this is going to be very actually make your life easier we have Explorer exclude exclude and it's going to hide whatever files that you don't want to see for example if you're working with a typescript or JavaScript or even go anything you can just hide some files so if I go to my Explorer and if I don't really want to see node modules or vs code all the time so I have two options I can just go and hide it completely from uh visual Visual Studio code in a setting or I can just hide it for only this project so all I have to do right click add hidden items so I'm gonna just hit an item node modules and now I'm going to press ok now I don't see it is hidden and if you can see if you go to the vs code click here you can see so we were talking about the spell fixing the spell or ignoring the spell for the case your ID it's there and also if you just don't want to see node modules now node modules also here so you can just Commit This dot vs code and then it will be shared between everyone in your team that are using it so you can just use this method as well then it's kid blame so if you want to know who was the last person who just changed one line of code you're going to use git blame so if I'm in a git blame and be here you can tell me exactly two months ago I was just updating this line of code and it was my commute etc etc and then we have git history so it's gonna really going to give you a lot of Rich data about your history of the file and that would be very useful and you can see extra icons here so you can just also click on them and see the history now the next thing is GitHub theme that's the theme that I use sometimes and if you want to use it this is also very popular so it has seven million download and you can just use the GitHub theme as well and we have also a git lens so you're gonna make sure your git is supercharged so you're gonna have extra feature and extra things in your vs code for the kit and Version Control and I would just suggest if you are if you are using git which would be most of the time the case this is going to be very important and useful as well to have and then because I write go code I have go um official extension from the go from the go team at Google so I have uh go also installed I also write a lot of terraforms so I have terraform or hashicorp terraform if you don't use terraform you don't really have to use it or if you don't write golang you don't have to use go but these are very important one for me as well that's why I have them here and then the next thing is import cost basically whenever you're going to import something in JavaScript it's going to tell you how big is the import or how much how big is the import in terms of the cost or the size and as you can see the example here they're going to import low Dash and it's 70 kilobyte and then it's going to just change it for example to low Dash and that unique ID or unique and then you can see now it changed to a different things and if I go to my index.js now I can see for example if I'm using nanoid is this size and then the uuid has a different size and KSU ID again you have different size so it's very important and especially if you're looking in the bundle and you make sure you want to use the bundle size is very important which is most of most of the time is the case then this is going to help you to have the smaller or make sure you'll be more cautious about the size of your bundle then we have indent rainbow basically it's going to give you a color when you indent your code so we have the lines and also we have the colors the colors is just good for the visualization if you have a lot of indentation you can use it and if you don't have that much of indentation which should be most of the time most of the time the case but you never know because you the code that you're gonna check out is not always your code or it's not for example from your team so it's good to be able to visualize the indentation and follow the code much easier so it's called indent rainbow the next thing is intellicode so it's going to give you for example Visual Studio intellicode and just provide AI assistant or assisted development feature for python typescript JavaScript so it's really going to make your life a little bit easier not so much sometimes annoying sometimes not but it's gonna add values and make sure like and just suggest some sort of like code if you're going to write typescript or JavaScript and also a support Java as well but that's a different conversation and then we have intellicode API usage again that's pretty much the same thing it's going to give you more suggestion and and something around along those lines we have make file tools because I'm using make file this is also going to give me extra feature and flexibility if I'm going to use when if I'm going to write make file and in terms of the syntax highlight and all of those things make files are gonna this extension is going to make my life much easier we have markdown preview is another one and the one the first one we were talking about is just automatic this one is actually you need to click on the preview it's going to give you the with the bright background and is exactly what does it look like in a GitHub before like you just turn on the dark mode the next thing that I use is output colorizer basically if you go to visual studio code and then open the terminal one of the one of the tab you have is output and it's going to make sure the content in output tab is actually colorized and is much easier to read okay moving on I'll go to the path intellisense path intellisense is when you're going to import some packages it's just going to make your life again a little bit easier we have peacock so peacock is going to give you a like you just add like a color around your IDE so in a nutshell if you're working with a different projects and then it's sometimes very difficult to know okay which uh which Visual Studio code is which project and it's going to make your life easier so if I just do this one command shift p and if I just search for peacock and I can just for example choose one of the colors so I'm going to choose random colors now I know for example this color is going to be this is specific project and if I'm using a different project and then I can use for example let's let's just go to green so if I have two tabs so if I have two projects open then I know the green one is Project a the orange one is Project B and I can also choose different colors based on whatever I want so I can customize it in any way I want so peacock is going to give me like that flexibility so I highly recommend it if you're going to work on a few projects at the same time the next one is another peacock that we have so this peacock is actually a theme so it's just a color theme nothing more I like it and I use it sometimes the next one is polar code so be the polar code is very interesting so you you want to just create a snippet take a screenshot so with this one you can easily do it so you can just highlight your code on the right side you can see it will just give you the screenshot and then you can share the screenshot with others and if you're much into the sharing code and Snippets then this is going to be very useful for you as well the next thing that I use is Powershell because sometimes I write Powershell code and I found it like just for the syntax highlighting and also it's kind of just fixing if I have some errors sealers it's just going to make my life a little bit easier so this is also the other one and print here is the other one that pretty much if you're using eslint protea would be another library that can make your life much easier the next thing is project manager with a project manager you can just have all the projects you have in one place and with one click you can switch to the next project so you can see it here from here you can just add project to the project manager and next time you don't have to go and open it through the terminal or just go to the file and then click for example open files or something so everything will be on the left side and would be much convenient if you're going to use it so the next thing is shell format with the shell format is going to support like this extensions and these file types and mostly are about like the syntax highlights and if I'm doing live for example again as silly mistakes is going to really help me before just all the time testing my code so this is also another extension that I use if I have to just work with these files then I have to do highlight and to do highlight is going to show me list of what it can highlight the to-do's and fixmest so if I go to my project and if I go for example to ksid and KSU ID if I have fixed me you can see it just changed the color and if I go to nanoid if I have to do it's going to just highlight it basically for me okay moving on I have to do three so if I have a lot of to-do's and fixmes and all of these things in my project it's easier if I see the list of them so and in order to see the list basically I click here once I install the extension then I can see them everywhere in my project so I have in case you already have a fix me and it's just have the label of example of fix me and in nanoid I have a to-do and if I click that it will take me to the line okay so that's that's interesting if you're working on a very big project and you need to check them all the time and then I have turbo console log so the turbo console log is very interesting if you're using JavaScript or typescript quite a lot and you need to do the console log you know the pain so every variables that you want to do it for debugging or any other purposes you just need to type it you can have a snippet but the easier one is to install turbo console log so all I have to do is to highlight what or stay on a variable and then to control alt and L and as you can see it will generate this line of console logs it will tell me that's the file name that's the line name that's the variable name and that is the variable itself so I'm going to just do it one more time Ctrl alt L Control Alt L it will just do it for you whatever you are you just make your life much easier so then we have typescript hero type script hero it's just another one that will make your life a little bit easier with the typescript if you're going to import a lot of libraries it's going to sort them and remove unused one if you have removed the code and you forgot to remove the import it's going to clean it for you basically typescript hero is going to just make your life easier very specifically with the Imports sort them and do the or remove the unused one and then we have vs code icons which is gonna just would be very nice for visualizing so on the left side as you can see when it's applied we have some sort of like icons on the left and it'll be better for visualization and then the last two is wire it and I use via it to organize my package.json scripts and Via it is going to help me with the syntax so I use wire it as an extension here as well and the last one is yaml syntax so if I'm writing yaml file it's also good with the detecting errors or indentation styling issues on the yaml file so with this one a lot of problems would be sorted as you know yaml file are not going to cause problem until you run it and then you realize that okay there is not enough indentation there's a problem here you're gonna just know everything before you go and use the file basically here are a list of extensions that are used in vs code mainly for typescript and JavaScript it's just one or two of them I use them for golang because golang comes everything under the official extensions but with the JavaScript and typescript everything's are available as I have shown here so you can go and download them and just probably make your life as to some degree easier and better so if you like this kind of videos please don't forget to share like And subscribe to the channel and I'm gonna put more content soon thank you so much and I'll see you in the next video

Channel: Dev tips by MoHo

Views: 189,087

Keywords: vscode, vscode extension

Id: DNf6Bu7z4vw

Length: 17min 4sec (1024 seconds)

Published: Fri Jan 27 2023