 What is up everybody right here? I hope that you have a fantastic day. Today I have a very quick but important video for you and we're going to explore how to set up ESLint for a Node.js project using the VS codes extension and a few simple commands. So you might be wondering what is ESLint? ESLint is basically a static code analysis tool for identifying problematic patterns found in JavaScript code. Here are some reasons why you should consider using ESLint. So let's start by finding errors, typos and syntax errors. It helps you follow best coding practices, code style consistency. Technically it can help you avoid committing bad code and it can warn you when using harmful and deprecated methods. And a very simple example of bad code could be using console log for debugging. It was at this moment that he knew, he f***ed up. So now you might be wondering well why Airbnb and the answer is actually fairly simple. It's basically they have the best documentation. You can see what is considered as good practices and what is considered as back practice. If you people are new to this channel please do me a favor and hit the subscribe button. Consider liking this video. It truly helps the channel and I cannot thank you enough. Now let's jump on the computer and get started. Welcome everybody and let's get started. First of all I wanted to mention that I will be using the project that we did in the last video for this one just because we have a lot of code that we can link and see if we have any problems. Now before we get started make sure that you have the ESLint extension installed in Visual Studio Code and you can go under here extensions find ESLint search for it and the one that I have is this one with the orange logo which is created by Dirk Buemmer and he has a lot of downloads and a lot of stars. So make sure you install this and once you do then let's do the setup and I already have PowerShell opening here which I have CD to my project and I'm ready to install ESLint. Now for this video I'm actually going to be following the installation guide by ESLint the official one which you can check out on their website ESLint.org and then you can go under user guide and then get it started. So first of all we need to install ESLint as a development dependency and to do this we can do MPM install ESLint dash dash save dash def and this should take a couple of seconds and now that we have ESLint installed we need to set up the configuration file which is very easy to do and to do this we can do MPX ESLint dash dash init and this will initialize the configuration file for us and it's going to ask us a couple of questions. Now as you can see here we can just check for syntax only we can check for syntax and find problems and we can check the syntax find problems and enforce a code style. So this is the one that we want to do so press enter on the last one then we are using common js inside here so let's press common js and we're not using either react or view so none of these is the correct answer in here and then does your project use type script? No we only use pure javascript in here then it's going to ask us where does your code run and in all case we're using node so let's select node and the next one is going to ask us if you like to use a popular style guide and yes this is what we want to do so let's use a popular style guide and as you can see here we have three options we have Airbnb we have the standard one and we have the google so in this case let's use the Airbnb and let's press enter and then let's press javascript on here and we should be good to go so would you like to install them now with npm and we just need to press yes and then this should take a couple of seconds to install now that we have eslint configured i can minimize this and as you can see inside here we have this eslint file technically speaking if i open any of my codes for example app.js hopefully it should take a second and this should start linked in my code and as you can see eslint has now underlined every single line that there is a problem and basically we now need to follow the Airbnb style guide which will post in the description below and if you go to the github page you will see a lot of examples for example why you shouldn't be doing things and you will see for example bad practice and good practice and so on so this is pretty useful actually you can have a look at it in your own time but what i wanted to say is that if you wish to actually change them and if you wish to change some stuff you can always do this you can apply your own rules if you were to go to the eslint website we can go to use a guide and under rules you can see plenty of rules for example this one here no conzo so if you click on this so a good example for Airbnb style guide would be that a consulog should be avoided but if you don't want consulog to be underlined every single time for some reason you can always specify your own rules and yeah just have a look at some of the rules for example no empty and they show you good correct examples in here and so on and basically you can change all the rules now now we can pretty much end the video here but i wanted to show you how we can actually solve some of the problems so in my code for example in app.js as you can see pretty much everything is underlined and the main problem in this document is that i don't have semi columns anywhere and this is purely just because i prefer it that way but obviously we're using the mbmb style guide and they're using columns so technically speaking we should go and fix all those problems so potentially we just need to go around and put in columns just like this semi columns just like this and then we can inspect some of the other errors in a second okay i've added semi columns on pretty much every single line that i can see but as you can see we're still getting this line problem here and easy fix for this would be to go to the eslint rc.js file and set up our own little rule in here so what we can do is let's bring this into one line and we can do line break style and make sure that we set this to zero like this and save if we go back to the app.js as you can see this has solved all of the line problems and the next thing that i'm spotting here is that we have all those static files underlined and if you hover over you'll see that they prefer us to use path.join or path.resolve so let's have a look at how we can do that so first of all we actually need to require path so we have to do const path equals require and then we need to require path just like this and as you can see now we have another line here and this is because we've declared this const but we haven't used it yet and now to fix this we need to do path.join and then wrap everything in brackets like this and then instead of a plus sign we need to remove this and put comma and just fix the space in here and we should be good to go so for the next two we need to do exactly the same thing so technically speaking i can just copy this and try to remember the last two things so we have images and we have js or img and js and as you can see we are almost good to go in here if i save this but we are getting another error inside here and if we inspect this you'll see that they're expecting an empty line so let's do that quickly and problem solved so sometimes you're just gonna have to google some of the problems that you get and the last problem that i see inside here is the console log maybe you can require the note debug instead instead of console log or you can always add your own rule inside here inside the eslint file so for this one i believe that the rule will be if we put this on another line with a comma like this i believe that the rule will be no dash console and set this to zero with a comma remove some of the lines just like this save this and let's have a look as you can see now the error is gone and the last thing that i've noticed here is that for some reason is screaming that uh new line required at the end of the file but not found so we can simply press enter and this will create a new line for us so now that you see how eslint works is basically trying to help you find any errors you're following best practices technically you get the code consistency and you're basically avoiding to commit bad code and the last thing i wanted to mention for this is that you might sometimes get indentation problems you can change the number of spaces that you can use for example at the moment mine is set to two but you can always click on spaces here indent using spaces and select the spaces that you want for example i think by default is set to four the airbnb style guy might not like this so you can always change that and also you can configure the extension code prettier to help you out with these kind of things but but i didn't want to waste any more time and that's pretty much everything i wanted to show you in this video i hope that you found it useful uh don't forget to smash the like subscribe to my channel and comment below and i'll see you in the next one thank you