We make the wet easy to understand and accessible for everyone.

In this video.

I'm going to be following up on my previous top 10 visuals to your code extensions video and making his second part right go over all the extensions that you guys recommended to the comments down below that 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 set in sync.

Sudden Sink is an extension that saves your visual studio code settings, extensions, preferences essentially everything about your visual studio code environment.

It saves it and posted on Get Hub inside of a just 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 of you.

So we just hit.

She thought you and that will open up your good help Paige, and it will ask you to create a new personal token.

So you do.

She just generated token and turn your password here.

ID confirmed.

And from here, you just put a description of what the token is.

So in my case, I'll just call it settings, I think.

And what you need to do is you need to make sure you check this just boxes that it can create a just with all of your studies in it.

There you just click, generate token.

You take the token that it gives you click the coffee button, and then you could 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 it.

Enter and then it'll upload all of your settings.

And here we go.

We got a message saying that Coach settings have instinct, uploaded it to this just right here, and it shows us all the different extensions that added files uploaded, things that it removed and everything that had changed since the last time.

You saint.

And if you want a download settings, all you do is hit shift all deep, and it'll download the settings for you.

This extension is absolutely amazing for anyone that has multiple different computers like, for example, work computer and your personal computer that you want to sink your studies and extensions to.

In my case, I use it for my work computer as well as my personal computer.

And I also used to sink my studies that I used for recording so that I can use my recording sentence, my record, and then I can shift over and use my non recording studies 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 SPG files as an actual image as opposed to just SPG text.

So, for example, I have this video logo spg file, and when I open up, all I see is the actual SPG, 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 spg fewer of US BG file, and it'll pop up with the actual SPG file looks like inside of a browser, for example, you can configure the settings on this so that you could make it so this proper window will automatically be opened as soon as you open any SPG file, which is what I normally do when I'm using this extension.

This is great.

When using SPG files load in images, which is a very common thing nowadays for Web development.

The next extension I want to talk about his rest.

Client Rest client is an absolutely massive extension that includes tons of support for sending request to any rest A p I out there.

It is absolutely amazing and works very similarly to postman if you've ever used post pain before.

The benefit of using rest Client over postman, though, is that postman is external to your editor while rest client is built into your actual editor, which makes it so that you only need one application open in order to send these rest request.

Let's look at the example of what this could 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 request in my face.

I just have a simple get request to this.

You are.

Oh, and you could do any form of format that you want.

You could use a curl request.

You could use a standard formatting request somewhere how postman does it.

So if you just click the center plus button that comes right above it, it'll send a request to the A P I.

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.

Morning, request inside of this file, just separated by three hashtags.

Then we go down here.

Unless I just wanted to get all users instead of one user.

I cannot click send request on this one.

And now I get a request with all the users inside it.

This is an absolutely amazing extension.

And if you look here the actual documentation, as you see, there is tons that you could 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 a P I ever I would highly recommend down the rest client, because there is so much easier to use than Postman says.

It's built into the client, and you can even save these files and share them with your teammates uploaded to get hub 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 Client extension we just talked about and that is pace.

Jason is code.

It works exactly as you would expect, and it takes Jason 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 typescript file.

So on the left here I have this user dot t s file for a user object that you can see we have generated over here with our previous extension.

The rest climb.

So all I need to do is highlight this and copy this user object and I go into my user dot t s file hit control shift key to pull up my commander.

And you see, I have paced Jason as code as one of my recently used.

So if I had entered there we go.

I can enter the top level name of my file.

So in this case, we have a user objects I'll put User, I hit enter and it generates all the code and all the types dynamically based on the information from the Jason.

So, as you can see, we have a number.

That's an I D.

On idea.

That's a member named 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 could do tons of different languages other than just high spirits.

For example, if we want to do see sure we had a user c sharp Claris, we come in here.

We did the same exact thing pays trace on his code.

Call it user.

And if we go now, we have a C start version of this file and has all the different imports all different properties that we need.

And this is amazing.

Forgetting general boilerplate code assembled for a p I that you're consuming or that you're even creating yourself.

If you want a credit client for it, it's not 100% perfect because it just takes the names from the actual Jason.

But it is an amazing start into what you need to create an actual client for your a p I.

The next extension I want to talk about has a deceptively long name, but it's incredibly simple.

What it does is the E s seven react re ducks graphic.

You'll react native sniff it.

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 reactor project that I have.

For example, one of the snipers they use most often is what I'm creating a new reactor components.

So what's created new component here and inside of here?

If I wanted to create a class component with proper types, all I would do is type in our CCTV, which stands for react class component, proper types.

If I enter 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 proper types, imports everything that I need and gives me a basic render statement that I can use inside of here wanted a functional component.

Instead, I could do R F C P and really give me the exact same thing, but with a functional component instead of a class.

They're tons of different snippets.

As you can see from here, just anything that you could think of related to react.

Yes, seven graphic you'll, et cetera, has a sniff it in here that will make it so much easier when you want to create a bunch of boilerplate code.

I highly recommend this for anybody created Iraq Garage.

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 and project or any known project that involves requiring or importing many different noted modules.

This project essentially gives you the size of the different pieces that you're important into your project right next to your import or require statements to go back into our new component here.

You see that when we import react, it's 7.6 kilobytes, and prop Titus is 1.3 kilobytes, and this is incredibly useful for when you start importing different projects.

For example, we want it in court.

Yep, in here, which is a validation library.

We can import that, and now you can see that that's 74.4 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 you're back in 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 in debt.

Rainbow Indian Rambo 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 in Denver based language is such a sass, Hamel J.

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 SAS file over here is much easier to read when you have this indentation coloring, because I can see Oh, everything in this green indentation is a child of would your 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 as another small yet useful extension called to do highway.

This extension highlights any to do style comments instead of your coat so that they're easy to see when you're scrolling through your coat.

This is perfect because two DUIs can be easily for gotten, since they're great out like most comments are, and you easily scroll past them when you're going through a file to show an example of this.

I have a job script file here that we can just demo this on so you just create a comment call it to do.

And as soon as I write this to do follow, you see, that is highlight is very bright, yellowish orange color.

And I could just write something in here to do later.

So I know I need to do this later.

Is also supports other types of two DUIs.

Such a fixed Me, You fixed me.

You see the highway's this way and you can even add your own custom rules for what I should highlight.

You 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 you want all of them, 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 will show you what line it is even let you jump to that line inside the file.

This is perfect for when you're getting ready to commit code toe Master, where you're getting ready to push a poor request to get hub and you can check.

Oh, is there anything that I marked to do that I haven't done yet.

You could run this, you say, Oh, I forgot to change this one thing.

I've got to get rid of this Consul 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.

Doing Another small extension that's incredibly useful is the auto renamed Tank Extension.

And this does exactly as it says.

You go into an age Timo file, for example, if I scroll down here, if I want to change the stiff to be a span, normally I would have to change the first tag and the second tag with this extension, anything I do to the first keg 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 tank and 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 could before.

The last extension on this list is prettier or any code for matter that you like.

I choose prettier because that has a very good formatting based on convict files as well as integrates very well officials to do a code out of the box.

Prettier is super nice, because you can use different CONFIG files such as the Premier Convict, how you can use the editor convict file.

Or you can even use the built in visual studio settings to change different convict values.

For how you want prettier format your coat.

You can then set it up to format on save if you'd like.

You can also published these different CONFIG files to your get help brief O or to your project report so that anybody committing to your project we use the same exact formatting for all their coat.

For example, if I go into my place dot html file here, all you need to do is use olt shift F, and it'll automatically format your code based on the side of your supplied.