All right, everyone.
Next up, we're going to see some popular extensions that you should have
installed in your score or you should at least know about them.
All right, So let's start.
Let's open up the extension panel and let's type in the deal here.
Hit enter.
And PDA is basically a code for Amanda, and it's going to help you
to format your code.
So what this means is let me just support install it and I will show you.
So this really supports different languages like
JavaScript, TypeScript and C++ and a lot more.
So I just install it and let me just enable it
and let me show you how it works.
So let's go to Settings.
By using the hotkey control, comma or command comma.
And here in this settings you need to search for I meant
hit enter and you will see some options here.
So this format and service by default disable on your base code and
you need to post up uncheck this option and you can see the editor.
The default form attack in my case is set to prettier.
And then the obvious this will be none.
So let me just keep it at none.
And let me show you.
Let's go to my HTML file and let me just an indent everything.
So let me just increase that size here.
Let me just increase it.
Perhaps.
Hazel And you can see this document is not parliamentary now,
but let me just change everything.
But before changing, let me just save this file.
So I'm going to file and I'm going to hit the save option.
And you can see nothing is changed, right?
So instead of going to file and see if I can simply use
the hierarchy controls here, but this, I are done.
Because to show you that nothing is going to change,
even if I'm going to save it as it is.
And so now we need to go to settings and from here
we need to select the default format as prettier.
So we iulia the address and make sure you enable this format on save option.
Let's go back to our in next start and file and let's head the save option.
So let's let's do it by going to fight and save.
And you can see, though, our file is not formatted right.
So this is a very nice extension.
This helps your code to look nicer and looks more professional.
So this is the first extension, right?
Let's move to the next one.
Next we have that light. So extension.
So here type in lights world and hit enter.
So this lives away extension basically
is going to create a live web page for your index dot
estimate file that you are walking with so it will show you.
Let me just demonstrate how it works.
So let's install it.
And if you're working with this and Steadman's uses
in JavaScript, despite, then this is going to be very helpful.
So it's installing and you can see you can read the docs here and it's installed.
So let's go to our extension file and when you right click now
then you can see the option of opening it nice over.
So let's click it and
watch it.
Saying that firewall has blocked it.
So that allowed access.
So you can see this line so has loaded this file
and maybe a score on a particular IP address or a port address.
I saw what this is helpful Point is, let me just go back
to my index dot and simple file and let me just change in some texture.
So let's add in some exclamation marks here
and I'm going to save this by also head to save option.
And let's go back to the chrome
and you can see that it has automatically refreshed it.
So if you have open this and stable file and the other way,
then you have to always refresh this to press this page to see that changes.
But the slides over automatically change does everything while on C right.
So this is a pretty good extension and it has this smaller bladder
which is open in browser all right.
So head and door and you can see
just simply let me just install it and I will show you how it works.
Right.
So installing and now when you right click,
you can see this option of opening default browser so you can hit it.
And this does pretty much the same thing
which is done by this lasso extension, but this open in browser
is going to open it in a file mode instead of this slide or mode.
So if you make any changes to your file, let me just show you.
Let me just remove this exclamation marks now.
So let me just remove it and let's head saved and let's go back.
So this is our normal adjustment file that we have open
using on the opening browser option.
And this is the light.
So when you can see the changes has took place automatically here,
but the changes are still present.
So we need to the first update to remove or to update the changes.
So this is the walk of life.
So what an open.
And also let's move to the next section.
So our next section is CSP.
So that stipend see us as speaker.
And I said, and so this is, this is this week extension.
And suppose you are working on a case file which contains
hundreds and thousands lines of code, probably something not like this.
And so you need to search for the cases definition for a particular tag.
And it suppose in this case
I need to search and thus this definition for this one bag.
Right. So.
And suppose my cases swell contains about 500 lines of code.
Then I need to scroll it all the way to all the lines
to search for this at one day.
All right.
So this is very painful and it consumes a lot of time.
So this extensions help you there.
So let me just install it and let me show you how it works.
So it installed
and now what I can do is instead of going
to my C assist file and looking for this add to and definition,
I can just simply select this, add to and DEG and I can use my party control
and then pick on this issue an option here.
So it will take me automatically to this H1 tag.
So this is how this CSP extension work and also one more thing,
I can just simply use the peak option here.
So if you go to the docs, then you can see there are three
available option the peak and go to end here.
And this Hathi, this hotkey that is mentioned here is not working.
So the problem people are this is let me just go to my next assignment
file and suppose I want to pick the cases of this H1 here.
So I need to select it and I need to use the hotkey oId
along with the F 20 and this will open up
this despite in line with this estimate file in the same window.
And I will highlight the cases definition that you have selected.
So in this case I have selected the H1
and now you can just simply make some changes here.
So let me just change this.
Born says to do M and let's save it and let's close
this file and let's go back to our lives.
So and you can see this portion sizes now. No.
So this is the big definition.
And we have already seen this let we just go back here.
So we have already seen the goal to end the whole adoption.
So busy with how this uses big walks.
Like the next extension that we have is Blackboard.
So let's type in polar code here.
it's polar code and that's it.
And so this is the polar code extension and it will help you to
take screenshots of your code and shaded with someone else on the internet.
Right.
So let me just install it and let me show you how it works.
So let's go to our script.
Got this file and suppose I need to see the screenshot
of this function here to somebody else on internet right?
So what I need to do is I need to select this function
first of all, then I need to copy by using the hotkey controls.
See, after that
I need to go to the command palette and type in Paula code here and hit enter.
So this is the polar vortex view.
And from here I need to paste in my code so you lose the heart, pig.
And don't be too pasty or good.
And then you can just simply resize the screenshot on the size of the screenshot.
And once you are okay with the screenshot size
and the aspect ratio, you can click on this camera option
and it will take you to the file Explorer window and then you can just
simply say the screenshot. All right,
so let me just open up my screenshot and I will show you how it looks.
So this is our screenshot and it is looking pretty nice.
And definitely when you said the screenshot with somebody
as they would just simply attract towards this screenshot.
So this is all that I have for the first part of this extension video.
And in the next video we will see a more popular extension.
So see you in the next lecture.