All language subtitles for 022 Setting up ESLint + Prettier in VS Code_Downloadly.ir_en

Before moving on to the next section

and mongoDB, I want to show you how to setup

eslint together with prettier in vs code

in order to improve our code quality.

Now if you're not using vs code,

or if you already have some kind of linter

in your workflow, then please mark this lecture as completed

and move on right to the next section.

But if you're new to es Lint,

and want to improve your code quality,

then let's get started with this video.

So es Lint is basically a program

that constantly scans our code

and finds potential coding errors

or simply bad coding practices that it thinks are wrong.

It's very, very configurable so that

we can really fine tune it to our needs,

and coding habits.

Now we can also use es Lint for code formatting,

but we will continue using prettier

that we already setup earlier for that.

So we will set up this entire thing

so that prettier is still the main code formatter

but based on some es Lint rules

that we will define.

And so all that es Lint will do for us

is to highlight the errors.

But I know that all this probably

sounds more confusing than anything else.

And so let's actually set this up now.

So the first thing that I want you to do

is to install the es Lint extension for vs Code.

So come over here, and search for es Lint.

Okay?

And I already have it installed,

but it looks like this.

And so all you need to do is to go ahead

and install it, and then probably reload this window.

And if you don't have Prettier set up yet

then go ahead and do that one as well.

So with this extension here,

but this one we actually already did

in the first section if you followed that with me.

Next up, we need to install a bunch of dev dependencies

so let's actually make this here a lot bigger

and go to our other terminal here.

And so let's say, npm install and we need to

also install es Lint in prettier as npm packages.

Okay?

So es Lint and prettier,

and probably this is now the first time

where we are actually installing

multiple packages at the same time.

And so that's very easy, we simply write

all these packages all in the same command.

Okay?

But with these two we are actually far from ready.

So the next one is es Lint config prettier

and this one will disable formatting for es Lint,

because remember, we want prettier to format our code.

Next up we have es Lint plugin prettier

and this one will allow es Lint

to show formatting errors as we type,

again, using prettier.

Okay?

And all of this is of course, very confusing

and I needed a lot of time to figure this out.

And so this really is just a recipe

that you need to follow here.

Okay?

So it's not about understanding

what I'm doing here, all you need to do is

to follow this recipe, and it will

then work for this project, and in future projects

all you have to do is to go to your

package dot json file and copy that configuration

and install it in your next project.

Because actually, all of these packages

they have to be installed locally.

It would not work if we tried

to do this globally.

Alright?

Anyway, we need now some jobs good style guide

that we can follow.

And there are many style guides out there,

but the most popular one

is probably the airbnb style guide.

And so actually, there is an es Lint configuration

that we can use for that, which is on npm,

and it's called eslint config airbnb.

Okay, next up, we have eslint plugin node,

and this will add a couple of specific eslint rules

only for nodejs, okay?

So basically to find some errors

that we might be doing when writing nodejs code.

And now finally, we need three other eslint plugins

which are only necessary in order to make the airbnb

style guide actually work.

So that style guide, kind of depends on these.

So eslint plugin,

import,

eslint,

plugin,

jsx,

a11y,

and I see that I have a mistake here.

And finally eslint,

plugin, react.

Even though we're not writing in the react code here

we still need this one because the airbnb

style guide depends on it.

So these are all the packages,

I hope that I wrote them correctly.

And now we need to save these as dev dependencies,

so save dev and now hit return,

and cross your fingers that everything's gonna work here.

So, it seems like it did.

Let's take a look at our package dot json

and, indeed, here we have all of these packages.

Great.

Now the next step is that we need config

files for both prettier and es lint, right?

And we already created the one for prettier before

and it's already in our project here.

So is this one, and all I did here

was to say that I always want the single quote.

Okay?

And the other one is the config file for es lint,

and again it's already in the startup files

because we don't really need to waste any time

simply just to write this terrible

configuration file, right?

So the file is already written

let's just go very quickly through it.

So here we stated we want to use

the airbnb style guide,

and also prettier, and also

the node plugin, okay?

Now esl int is all about coding rules

and there are many many rules that es lint

tries to enforce on us.

But we can actually change the ones

that we want to use, one by one.

And we can either turn them off completely

or just showing a warning instead of showing an error.

For example, one rule is that eslint

does not want us to use console dot logs

in our code, and so each time by default

it will give us an error when we

use console dot log.

But instead of showing me an error,

I configure it so that it only shows me a warning,

so that's why we have warn.

I could also completely turn it off

by writing off, such as I did with

many of these other rules.

So, for example, here in this next one

which says that each and every function

should always return something, okay?

And sometimes, we simply have a function which doesn't,

and so I needed to turn this rule completely off.

Or finally, we also have, for example,

this rule here, which says that there should

never be a variable that we declare but do not use.

This actually catches a lot of bugs,

and so I leave it as an error here,

but I also created some exceptions.

So, these four exceptions here

which are the typical variables

that we have in express,

so in our handlers in express, but that we don't always use.

Right?

And so I don't want these to be marked as errors

each time that I have, for example,

a req variable in a function, but I don't use it.

Okay?

So you can take a look at these other rules here

and decide which one you like,

and which one you don't.

So these ones are the rules that make sense to me,

but of course it might be different for you.

Let's just quickly go to the eslint website

to take a look at all the stuff

that you can configure.

So es lint, then here you have some documentation

and some instructions on how you can configure it,

but all I really wanna show you

is all these different rules.

So you have all of them in here

and so you see, there's a ton, a ton really, of them

that you can configure, okay?

So take a look at this, but actually

it's easier to simply configure this es lint

whenever you get a new error in your code.

Okay?

So let me show that to you,

so that we can now see it in practice.

So let's go to our server file here,

and simply create some code here

that goes against some es rules.

So for example defining a variable here, like this,

and then assigning something else to it.

All right, and so we know that x is a constant

and so it should not be reassigned.

So if we give this now assigned,

we should actually see an error.

And well we did not, so I'm gonna go ahead

and close the window, and then open it again.

So do that as well

and hopefully it will be working by then.

Okay, and so actually we see our errors here

now marked in red.

So, we now come to this problems tab.

Let me move it up a bit,

and so here we see all the errors that we have.

So, starting with the first one,

expected one empty line after the required

statement not followed by another require.

So basically what it's telling me

is that it wants these requires here at the top

and then, an empty line and then like this.

And so, the error disappears.

Okay?

And so this kind of enforces a nicer coding standard.

Next up we have x is assigned and a value never used.

And so that is that no unused variables

that I mentioned before.

So, this one here.

Okay?

And so this is an error, but I could also turn it off

just to show you how that would then change.

So I've saved it, and so now that error is gone.

So you see it's no longer marked red.

But actually I want this to be an error,

so I write error, give it a save, and our error is back.

You see, it is declared but it's never used.

And then, here x is constant.

So we really did an error here,

which was to reassign a constant,

and that is not allowed, so let's get rid of this

and then the error disappears.

We still have this one because the value

has never been used.

Let's quickly write x plus two and now it's gone.

But we have the next error, basically simply

because we just have this code sitting

around here not assigned to anything.

So, let's just say const y equals this one

but then of course y is assigned but never used,

and so we're entering this loop here.

But, anyway, this was just to demonstrate it to you.

And so let's see now the final warning.

And so that is the no console, right?

So remember I actually talked about this one before

and it is green because it's a warning.

So again, I could turn it off, and then

my problem would disappear, so the code

would look normal now.

But actually I want eslint to warn me about that,

because it's not a good practice to have

all too many console logs later in production.

All right, so it's back now.

And actually vs code also warns me

that there is a green warning

here in this file.

So maybe you noticed that before,

but if we put an error here,

then actually it will turn red.

Okay?

So now it's red, and we have two problems in there.

And that's actually really helpful to identify

problems in all these files.

All right, let's get rid of it.

And so actually, that's it.

So I hope that it worked for you as well

if you got some error then please try to simply

install the same packages that I did.

So all of these here, and remember that

this is how you do it.

So for example, if you want eslint five

just say npm I eslint at five.

For example you can even go five dot 16 dot 0

just to make really sure that everything is the same.

And in that case, everything should work

just as it did here for me.

Great, so this was yet another important step

in your journey of becoming a developer.

Because, believe me, it's really important

to have code linting in place like you have now.

So again, for your next project

just go ahead, copy these dependencies into

your packet dot json file and then install

them all at the same time.

And that will then make your life a lot easier.

So that's how I always do it,

and the same of course, with the prettier rc

and this eslint config file.

Anyway, enough talking for this video.

We're now finally ready to move on to the

very important mongodb section.