10 Must Install Visual Studio Code Extensions

Key Takeaways

hello everybody kyla here from web dev simplified where we make the web easy to understand and accessible for everyone in this video I'm going to be following up on my previous top 10 visual studio code extensions video and making a second part where I go over all the extensions that you guys recommended in the comments down below but I really liked as well as new extensions that I've found since I made that original video so if you haven't seen that first video make sure you go check that out and now let's get started the first extension that I want to talk about is settings sake settings sync is an extension that saves your visual studio code settings extensions preferences essentially everything about your visual studio code environment it saves it and post it on github inside of a gist on your account and it's really easy to set up if we scroll down here all you need to do is hit the upload key which is shipped all you so we just hit shift all you and that will open up your github page and it will ask you to create a new personal token so you do is you just generate a new token and turn your password here hit confirm and from here you just put a description of what the token is so in my case I'll just call it Settings sync and what you need to do is you need to make sure you check this gist box so that it can creat adjust with all of your studies in it there you just click generate token you take the token that it gives you click the copy button and then you can just close out of your browser here and up top it says to enter your personal access token so all you need to do is paste in that token that you just copied hit enter and then it'll upload all of your settings and here we go we got it a message saying that code settings have been synced uploaded to this just right here and it shows us all the different extensions that it added files that uploaded things that it removed and everything that had changed since the last time you synced and if you want to download settings all you do is hit shift alt D and it'll download the settings for you this extension is absolutely amazing for anyone that has multiple different computers like for example a work computer and your personal computer that you want to sync your studies and extensions to in my case I use it for my work computer as well as my first name computer and I also use it to sync my settings that I use for recording so that I can use my reporting settings when I record and then I can shift over and use mine on recording settings when I'm not recording the next extension I want to talk about is a super simple but incredibly useful extension which allows you to view SVG files as an actual image as opposed to just SVG text so for example I have this video logo SVG file and when I open enough all I see is the actual SVG which doesn't tell me what this actual file looks like when I want to render it instead of a browser or anywhere else and in order to view this with this extension all I need to do is right-click click SVG viewer view SVG file and it'll pop up what the actual SVG file looks like inside of a browser for example you can configure the settings on this so that you can make it so this prop up window will automatically be opened as soon as you open any SVG file which is what I normally do when I'm using this extension this is great when you're using SVG files to load in images which is a very common thing nowadays for web development the next extension I want to talk about is rest client rest client is an absolutely massive extension that includes tons of support for sending requests to any REST API out there it is absolutely amazing and works very smoothly to postman if you've ever used postman before the benefit of using rest client over postman though is that postman is external to your editor while the rest client is built-in to your actual editor which makes it so that you only need one application open in order to send these rest requests let's look at an example of what this can do I have over here a dot rest file so you can use a dot rest or dot HTTP file and this is where you can put your different rest requests in my case I just have a simple get request to this URL and you can do any form of format that you want you could use a curl request you could use a standard format of requests and what a how postman does it so if you just click the send request button that comes right above it it'll send a request to that API and it'll give you the response over here with all of the different headers as well as the actual body of the response that you want it which is perfect if you wanted to have more than one file inside of here or more than one request inside of this file just separate it by three hashtags I don't even go down here unless I just wanted to get all users instead of one user I can now click send request on this one and now I get a request with all the users inside bit this is an absolutely amazing extension and if you look here at the actual documentation as you see there is tons that you can do instead of here and I can't cover all of it in this video but if you've used postman and enjoyed it or you've built any REST API ever I would highly recommend down the arrest client because there is so much easier to use than postman since it's built into the client and you can even save these files and share them with your teammates upload it to github or wherever you want to do with these files since it's just a file inside your editor which is much easier than a file that you save from postman for example the next extension I want to talk about pairs perfectly with the rest clime extension we just talked about and that is paste JSON is code it works exactly as you would expect and it takes JSON and allows you to paste it as code in various different programming languages in our case I'm going to be pasting this into a type script file so on the left here I have this user dot ts file for our user object that you can see we have generated over here with our previous extension the rest client so all I need to do is highlight this and copy this user object and I go into my user TS file hit ctrl shift key to pull up my command here and you see I have pasted JSON as code as one of my recent really used so if I hit enter there we go I can enter the top-level name of my file so in this case we have a user object but user I hit enter and it generates all the code and all the types dynamically based on the information from the JSON so as you can see we have a number that's an ID an ID that's a number name that's a string and this company has been created as its own company object down here as you can see same with our address has been created into its own object and you can do tons of different languages other than just type secure for example if we wanted to do c-sharp let's say we had a user stay sharp class we come in here we did the same exact thing paste JSON is code call it user and there we go now we have a seastar version of this file and has all the different imports all different properties that we need and this is amazing for getting general boilerplate code assembled for an API that you're consuming or that you in creating yourself if you want to create a client for it it's not a hundred percent perfect because it just takes the names from natural JSON but it is an amazing start into what you need to create an actual client for your API the next extension I want to talk about has a deceptively long name but it's incredibly simple what it does is the es7 react Redux graph QL react native snippets and essentially all this extension is is a collection of a ton of different snippets for all those different frameworks and languages talked about above and I use this in any react project that I have for example one of those snippets they use most often is when I'm creating a new react component so let's create a new component here inside of here if I wanted to create a class component with prop types all I would do is type in our CCP which stands for react class component prop types of a handler it generates all the information I need it generates the name of the class from the actual file that I created it sets me up with prop types imports everything that I need and gives me a basic render station that I can use inside of here for one of the functional component instead I could do our FCP and it'll give me the exact same thing but with a functional component instead of a class component there are tons of different snippets as you can see from here just anything that you could think of related to react es7 graph QL etc has a snippet in here that'll make it so much easier when you want to create a bunch of boilerplate code I highly recommend this for anybody created a react project another simple extension that we could talk about is the import cost extension this is another great extension when you're working with any heavy front-end project or any node project that involves requiring or importing many different node modules this project essentially gives you the size of the different pieces that you're importing into your project right next to your import or require statements if we go back into our new component here you see that when we import or react it's seven point six kilobytes and prop types is 1.3 kilobytes and this is incredibly useful for when you start importing different projects for example we want to import gift in here which is a validation library we can import that and now you can see that that's seventy four point four kilobytes so we may think do we actually need to import this or can we import just pieces of it instead of the whole thing in order to reduce the size that were imported into our project this is really useful for when you're trying to optimize the size of your web development project or your back-end project in order to create a faster user experience for the end user the next extension is another really simple extension and it's called indent rainbow indent rainbow is very similar to the rainbow brackets extension that I mentioned in the previous video except for instead of coloring your brackets it colors your actual indentations based on how far indented you are this is incredibly useful when doing indent based languages such as SAS Hamel Jade pug whatever it is that you're using that uses white space to determine how your code is laid out rather than actual curly brackets to determine your code for example this sass file over here it's much easier to read when you have this indentation coloring because I can see Oh everything in this green indentation is a child of widget container everything the purple is a child of widget and so on and it makes it much easier than if you had no coloring to determine things and you can get lost inside of the indentation the next extension is another small yet useful extension called to do highlight this extension highlights any to do style comments instead of your code so they're easy to see when you're scrolling through your code this is perfect because - duze can be easily forgotten since they're grayed out like most comments are and you easily scroll past them when you're going through a file just show an example this I have a JavaScript file here that we can just demo this on so let me just create a comment call it to do and as soon as I write this to do file you see that it is highlighted to this very bright yellowish orange color and I can just write something in here to do later so I know I need to do this later this also supports other types of - dues such as a fix me so you put a fix me who you see it highlights this play and you can even add your own custom rules for what I should highlight and shouldn't so now it also comes with a command which is the best part of this if you just run this command to do highlight list highlighted annotations and you say if you want all for example it'll show you all the different files that have it to do or fix me or any other configured comment that you want to track and it'll show you what line it is you know even let you jump to that line inside of the file this is perfect for when you're getting ready to commit code to master or you're getting ready to push a pull request to a github and you can check oh is there anything that I marked to do that I haven't done yet you can run this and you say oh I forgot to change this one thing I forgot to get rid of this console log in the code and so on I find myself using this all the time and it's incredibly useful for catching those small things that you wrote to do later and never actually went around to doing another a small extension that's incredibly useful is the auto rename tag extension and this does exactly as it says you go into an HTML file for example if I scroll down here if I want to change this div to be a span normally I'd have to change the first tag and the second tag with this extension anything I do to the first tag changes the second tag which means I don't have to update both the opening and closing tag I only have to update you to the opening or closing tag and it'll update the other one for me this is really a small extension but it is incredibly useful for when you just want to save a little bit of time and just go through and change your HTML even quicker than you couldn't before the last extension on this list is prettier or any code formatter that you like I've shoes prettier because they have a very good formatting based on config files as well as integrates very well officials to do code out-of-the-box prettier is super nice because you can use different config files such as the printer config file you can use the editor config file or you can even use the built-in visual studio settings to change different config file use for how you want prettier to format your code you can then set it up to format on save if you'd like and you can also publish these different config files to your github repo or to your project repo so that anybody committing to your project will use the same exact formatting for all of their code for example if I go into my app list I HTML file here all you need to do is use alt shift F and it will automatically format your code based on the studies you supplied and Mike Lai's this is just the default settings for prettier and it will format it exactly how you want your set needs to be so you could put in your editor config files or even go to the preferences and change the prettier configs from there to make it so that your code is always consistent throughout all the files and all the different developers working on it so I hope you guys enjoyed this quick video looking at 10 more Visual Studio extensions that I use all the time and absolutely love if you guys have any suggestions for other extensions that I missed in this video or in my previous video make sure to leave them down in the comments below and thank you guys very much for watching this video have a good day