>> Hi everyone, my name is Christian Lamba and I'm
a senior Cloud advocate at Microsoft
focusing on Azure, Startups, and JavaScript.
In the next few minutes, I'm going to be showing you
my top five VS Code tips and
tricks and hope you find at least one of them useful.
The first part I would like to talk to you about,
is how to Super Charge creating
files and folders in Visual Studio Code.
So the defacto of doing this is to use the File menu or use
the Context menu and either of these can get boring quickly.
What I usually do is to use this extension code,
Create Files and Folders on the go.
If you hit "Control Option N",
you can type the full part you want to create.
So in this case, I want to create
a folder full slash a folder bar,
slash a file INDEX.JS.
Now watch once I hit "Enter",
this extension will recursively
create the folders and file for us.
Now, you can also create a file in existing folder.
So if I repeat the same command,
"Control Option N", and type FOO/BAR.
JS, once I hit "Enter",
this extension does not overwrite the existing structure we had.
So instead it to create BAR.
JS inside FOO.
The second tip l would like me share with you is how to
use the Search navigation in Visual Studio Code.
So I know you probably know how to use
the command F feature
to Search for a particular string and open file in Visual Studio,
where you can also search for all the files in
your project using Command Shift F. So if I type Command Shift F,
I can I search for
every single image that ends with PNG in this project.
So if I hit "Enter",
this will basically find all the references of PNG in my project.
If I click on any of the images,
a VS could basically
jump right to that particular reference I clicked on.
You can also open a file using the "Search" command.
If I type Command P and search for slides and hit "Enter",
this will open this particular file for me.
This is more productive in my opinion when compared
to trying to use the explorer to open a particular file,
a particular folder in
Visual Studio Code and the tip that I would like to share
with you is how to use Snippets in Visual Studio Code.
So user Snippets allow you to create
Custom Snippets in Visual Studio code.
This is also why we don't want to rely on
Visual Studio or Visual Studio extension prepended Snippets.
To create one, run "Command Shift P ",
and search for User Snippet.
Open configure user Snippets
and locate the particular language
you want to create a Snippet for.
So in my case I want to create one for JavaScript.
I'll just go ahead and hit "Enter."
Now, watch how this could pose out
this JavaScript or JSON file for us.
You can easily start creating a new extension here.
Where in this case I'm just going to go on
with the example we have already.
So a Snippet is basically
an object and each object has three properties.
The prefix, description, and the body.
The prefix tells VS code that this Snippet is about to be
activated and description reminds you as the developer by
that this is the Snippet you're activates,
once you start typing this particular prefix.
The body is the actual code that gets
generated once this Snippet is activated.
If you look closely you would see we
have two placeholders here labeled one and two.
Now, the best way to understand what this placeholder are doing,
is to look at this Snippet in action.
If I open the JavaScript file and type react stateless.
Once I hit "Enter", you would see that
this Snippet get generated and then
there is sopto highlight on the component name.
If you look closely just like I
mentioned in the body of the snippet you
would know that the component name is the first placeholder.
If I change the components name to to do and hit
"Tab" in the snippet the cursor
will instead of creating your white-space jump to
the argument of constant load and I can also edit this as well.
The first tip I would like to share with you is how to add
simple type checking to JavaScript in Visual Studio code.
Now if look at this Java Script example,
if my intention here is to add two numbers
you might notice that I'm failing badly at this.
This might look soft to you but at in case we are building
our financial programs which are sensitive to calculations
you might get yourself into trouble if you're not careful.
You can use tools like TypeScript
and flow to fix issues like this.
Well, sometimes we don't have the budget or time to actually
start investing into adding TypeScript to float our programs.
So what you could basically do with VS Code
is to add a comment at the beginning that says
at CSG and you would notice that
Vicious Studio automatically start
highlighting type errors for you.
So in this case we have a variable X which we initialized with
a number and then we try to reassign
it with an invalid type of string.
So it's actually throwing an error for us.
If you notice, we are still not solving
the problem we are trying to address
initially which is trying
validate actually adding these two numbers.
The function takes two arguments and
tries to add both of them but were supposed to get
an arrow here saying that
this this string and we're trying to add it to a number.
Why this is not happening is because for the case of X we
initialized the variable number and VS Code was able to
infer the type of the number from it's initialization.
In the case of the function we're not
initializing the function with any value.
So it doesn't actually know how to inflate type of
these parameters past to the add function.
So to actually tell VS code
about the types for this function parameters,
we need to use what we call GS docs.
If I type forward slash double exterit and hit
"Enter" VS could walk into this function,
figure out it's signature and then create a JS doc for us.
So I can just change the external number
and change this to number as well.
Now watch how the VS code now start catching the error which
we have because the second argument passed to add
function should be a number not a string.
So if I change this to a number instead,
you would see that the typed error is gone.
The fifth tip I would like to share with you is
how to transform code in Visual Studio code.
Sometimes our intention is actually
like the modern version of JavaScript but because we
already use to actually write an older versions
of jazz it's very difficult for us to catch up with this.
Well, VS Code has a feature that's actually suggests to you to
transform your code to
the newer versions even if you've written them in older versions.
So in this case, I have a constructor function
which has some Prozac methods on them.
Now if you click on the function you will see
that VS code is going to pull up
a tip here asking if you want to convert this to an ES 2015 class.
If you click convert function to ES 2015 class,
VS could automatically figure out
all the prototype methods on
this particular constructor function
and convert everything to a class.
Same to when you have
a premise and you'd like to convert them to a sync and a wait.
If you click on the function that returns a premise,
it will pull out this tip for you as well.
If you click on it, it will ask you to convert a sync function.
So once you click on it,
it will write this function from returning a premise
to actually being a sync and a wait function.
So those are my top five favorite VS Code tips and tricks.
I hope you find at least one of them useful.
Feel free to reach out to me on Twitter at
code-based and I'll be happy to assist you with any of them. Bye.
[MUSIC]