All right, everyone.
Welcome to an amazing lecture we scored in this lecture.
We are going to learn about snippets.
Right.
So the first thing first, what a snippet.
Snippets are basically the suggestions that you get
while you are typing some code and your code editor.
So suppose in this indexed or HD HTML file,
I want to get in my boilerplate as easily as possible.
So for that I can use snippets and the snippet for that is the exclamation mark.
So I can simply write an exclamation mark and you can see
this code is showing me the IntelliSense for snip for the boilerplate.
And this IntelliSense,
this is nothing but snippet
or an elevation and we will learn more about the omitted elevation
and this section only in the upcoming lectures.
So stay tuned for that.
So now if I just simply select it over, use the end dokie.
Or if I just use the tab key, then you can see
all this code is being generated by simply
using a single line of code that is exclamation mark.
So this is how powerful snippets can be in the vehicle.
So via SQL already has a lot of snippets for web development,
for estimates and JavaScript file,
and I'm going to show you some of them and this lecture.
And as we move further to the Web development section,
we will do a simple project based learning,
and then you will see how we manage,
how we write the code, how the workflow goes
while you are working with web development, and similarly
with the other languages like C++, CSS, Darwin, Python.
Right. So let's start.
Let's move to our JavaScript file and let's,
let's see what snippets do we have here.
So suppose I want to enter I want to add a follow up here.
So for that I can type in four and you can see the snippets are coming.
So this is for four for each.
And if I just select this one,
actually that was not a snippet.
So this is the for loop snippet.
So you can see this are showing me the description of the snippet
and you can see this file loop has generated very quickly.
Now I can just replace it.
I can use the step key to move and replace some elements here
so I can replace the element with easily something.
So this is the a snippet of JavaScript.
And by the way, you can also
install a lot of snippets using this extension plan.
You can search for your favorite snippets.
Like if you don't have DA scripts snippet installed,
then you can install JavaScript snippets.
So you can see this is the snippets for JavaScript
and let me just install it and I will show you how this works.
So suppose you want to write in a console.log statement and to do this
you can see this is now having this chart
that is called and let's write.
I see LG here.
So if I write, see LG then this will create a consolidated log
statement and I can write in something like
on this is an snippet video,
right?
So after that, if I just use the cat key,
then I can move to the end of this line.
After that, I can enter and now I can move to the next line.
And this is how you work with snippets in your voice code.
Right now, let's see how we can create our own custom snippet.
So to do this, you need to go to the file section.
After that,
you need to go to the preferences and here you will find the user snippets.
Now you have a couple of options here.
And for this lecture we want to create snippets for our JavaScript file, right?
So let me just search for JavaScript here.
So this is the JavaScript and this will open up adjacent file.
So all the snippets, all the basically all the settings in the base code added
Jason files.
So now let me just remove this comment and we will start off
let me just open it in a side panel view.
Now let's recreate this console dart log snippet on our own.
So for this, first of all, we need to enter the name or the key of our snippet.
So this is console log statement.
Right.
So after this, you need to enter.
and after
that you need to insert the colons and all the snippets are going to be an object
and after that you need to enter the prefix.
Basically, prefix is the particular DOM, which will help to add in snippets.
So for in this example we have the prefix office c lg
that will add the console.log log statement,
but we can let's keep it to C or
L here or for clearance.
So this is our own custom console that logs statements that end in a comma here.
And after that we need to add the body.
And body is basically the code that will be generated with that snippet.
Right?
So we want to do a single line snippet here.
So let me can and sitting here and after that I need to
add the
console dot log and here we have something.
And after that we need to add in the semicolons.
And this is the basic, the easiest snippet
that you can create in the JSON file, right?
So now let me just save this and let me add to the C or L here.
C console.log log has now been created,
but let me show you if I type in C
or C, l, d, then you can see an object
is also entered here and I can just simply replace it with anything.
Now to do this
or what you can do is you can add and backstops are in the body, right?
So to do this, you need to enter the
dollar sign and the tab stop.
No more.
So in this case, I want to keep it as a first step.
Stop. And now let me just save it.
Now let's plug in our right in our our snippet.
D'Alessio And now you can see my cursor is present here.
So this we have made our change.
Now we also want to add the place holder that is object.
And to do this, we need to make it an object as well.
And we want to make a key value.
So this is our priority, the first priority.
And we have the place holder value for this object.
So it's type an object, help
close the places and we are done with this that we'll save it.
And now let's type in call.
And you can see we have created the same snippet on our own.
So this is how we create basic snippet.
And now let's do a pretty advanced thing.
So we want to create this for loop on our own.
So now let me show you how we can do this.
Let me add in Acoma here and let's add
for let for loop
in JavaScript.
Basically, I just forgot to mention that we can also add in description here.
The description will show what the snippet is going to do,
but basically this is our customs snippet and I don't think that
anybody is going to add description for our custom made snippet,
but if you are making it for some extension bell or extension
marketplace, then you need to add in that description as well.
But if you don't add any description on this console,
this name will be automatically set as the description.
Right?
So we are working with this for a loop.
So this is our full open JavaScript and let's add our values.
First of all, we have the prefix.
So the prefix of will be for let f or L, right? So
after that we have the body and basically we need to enter all of them instinct.
And this is not going to be a string because we have to do a multi line
snippet here. So let me just
make in an
array and in the first line we have this force statement.
So let me just dive in for here and then open the basis led.
And we have attached up here and we can change it.
Let me just show you for and you can see this is our first step stop.
So we need to add in some value.
So let's make it first step.
Stop the place.
Hello will be index and let's close it.
Let's close this string as well.
So we have until this is part as equals to zero
and semicolon and index that is we can use the same Deb
stop with the same place.
Hello value again here.
So Deb, stop one.
This is the priority of Deb stop.
And the placeholder index is less then
we have to now add another tab. Stop.
So let's skip it.
Let's keep this priority of the tap stop to be two
and this is added so.
All right. And we have got length
and after that we have index.
So this is our same four steps up.
So this will be
one dot index, right?
So this has been done now the first line has been completed.
Now let's move to the next line.
Let's add in a comma here.
And in the next line we have a tab space and this statement.
So let's add in a tab space using slash
D and let's add const.
Now we have a new tab space
and now we have a new element that we can edit.
So let's make it that space that is
set its priority to three and let's
set the placeholder to be element.
And we said equal to array index and so we need to set it like this.
There it is.
This value will be two and this will be array and
this has an index, so this value will be a gain of one.
This is pretty much confusing, but it's easy if you write it on your own first.
Now, after this, we will also move into the CBP file.
If you don't want to use C++ on your obvious code,
then you can close or stop the lecture after completing this.
But if you want to, then stick with me.
Right.
So this is the I'm writing index here.
So index clause IT and
clause the large brackets as well.
And let's add semicolon and now let's move to the next line.
So in the next line of we have the closing basis, right?
So this is our this is the for loop that we have created.
Now let's save this file and let's test it out.
So, Paul, we have our for a loop now.
We can edit it, we can edit the index.
I and all of them has been changed.
I forget to add the I plus plus here.
So this would be I plus press now and we do it once more.
So this is for the f or L fall and here.
So what I forget.
I forget to save this file, man.
This is honestly not my best, brightest moment.
So let's do it once more.
So this is our for loop.
And now you can see in next business as well.
That's change it now best to change it to the next step space
here are ten to change it to the next.
That's space.
That is the element.
Let's replace it and this is how we do it.
But if you see here, if you see this one,
we can see this also has a tab space here.
So let me show you what I mean.
Like change this one of change suppose let's keep it as added,
let's keep it as element, not have just a move to this new line here
and to do a new line after completing all the changes.
What you can do is you can add in one more line here
like this and you can add an attached space
and you can add in a tab space or with a priority of zero.
This is by default, the last priority.
That is, you have completed all the tab spaces, you have edited all the spaces.
And now the next line after completing all of them will be this one, right?
So we can do the same with this one as well.
So we can add a new line in the console.log log statement
and the priority will be like this.
So let's
save this file now and let me do our foil loop again.
So F or L, and you can see a new line has been added in our file.
So I added an X and we can see I can now start editing from here.
Also in the console.log log statement if I type in console.log log.
sorry, I forget.
I need to add this after here, so I need to
add in the R so you know what I mean.
To do C or L object type in here.
And if I do tab, then I will move in to the next line.
So this is how we create snippets in JavaScript.
And similarly you can create your own snippet for next
for extended file and all other languages.
Right?
So before closing this lecture, let me show you how to also
create the snippets for C++ files, right?
So, you know, you have a template for
C++ file, something like this I want to do
and I want to recreate this template so quickly and easily.
Let's go to our file preferences user snippet and search for CPB.
Actually, this should be C++.
Let us open it side by side and we need to recreate this.
So let's first delete this.
I don't like this at all. Now we have our
let's call it
C++ template, CPB template, and
let's quickly write our snippet.
So prefix would be hash include
and let's add in the body.
So body will be and edit.
And in this edit we have first of all this line.
So and we just basically copy and paste.
So let's copy this and let's paste in here.
Now move to a new line and we have another snippet.
There is another line that is this one, let's copy and paste.
And now we have a new line here as well.
So let's add in a new line space and let's now
go to the new string and here we have INT Main.
So adding into main and
move to the new line.
So this might be boring.
And if it is, if you open the stand, everything that I'm doing,
then you can close the lecture or else you can continue watching me.
So this is our first colon
and we have an extra new line so I can add it like this.
I can go and I need to add a up stop here.
So once I finish writing my template, my SO will end there.
So that so that steps stop.
I can set it as sled with the priority of zero.
This should have a depth space as well.
And now we have the return zero statement.
So let me just simply get in return.
Zero And in the new line we have all our instead of doing this,
you can also just simply writing a slash and statement
and you can insert this op closing basis and you can throw this.
So let me just say right now and yeah, I just forget to
and the basis for party tag and it's complaining me about that.
So now the first ball first let me save this file.
Let's delete all of them and let's type in hash include any
you can see our templates has been created both actually.
So I need to also add a tab space with this return zero
to make it look more nice. So.
But you got the point. You got how to do it.
And I think this is all we need to know about snippets.
In the next lecture we will see how to
set their own keyboard shortcuts in voice code.
So that is going to be an also and amazing lecture.
So see you in the next one.