‫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.