Detect Errors in your Javascript Code with ESLint

what's up my name is Jay and in this video I want to show you how you can automatically detect errors and warnings in your code so the first thing I want you to do is make sure you install node J s and all you have to do is just click this button download install and you're good to go okay after that's done you can just open your editor I'm using ves code if you're using something else you can do the same thing it's gonna be a little bit of different process but I recommend vyas code if you don't have it give it a try so I have here a very basic JavaScript code as you can see I have an array I'm declaring there right again and changing it updating the array and then I iterating the array and console logging all these items here so let's make sure you have the e ask lint extension installed on your vehicle so click on this extension icon here and you can see you can search for it here vs lint I already have it but you can see it here and there's gonna be an install button so you just click there and it's gonna install for you okay it's that simple now after that's done you have to do something else close close this I'm just go back here and click on the View and go to terminal alright and to start I want you to write this on your terminal okay so and p.m. in it alright this is gonna ask you some questions you can just press enter enter enter don't worry about that you can change it later and then yes okay and now we're ready you can see now we have a package.json file and now what i want you to do is install es lint globally so you can use it on every single project so go ahead and write and PM install - g for global eps lint press Enter all right and now you have es lint globally okay so now all we have to do every time we set up a project we do if we want to use es lint you can do es lint - - and it hit enter and it will ask you some questions so it depends on your project you want to check only your sync text you want check your same test and find some problems or sync the problems and forced code style so I'm just gonna check my sync tax and find problems so when I enter there what type of modules directory modules J for now I none of those so none of these are using react review nope or your browser or node browser what format you have a script will you like to install them right now yes please so why enter all right and now you can see that we have a node modules folder we have an es link our c JS file so if you click here I don't know if you remember one of the questions it says you want to be JavaScript or Jason you can have a Java Script like this or you can have a JSON file when you can change it and you can declare rules which we're gonna play a little bit with this later all right so we are ready to go one less thing you can extend all your rules and style and everything here and there's one that is very famous and a lot of developers are using it and is from Airbnb and I think it's awesome so what we gonna do here is we're gonna install that Airbnb so let's go ahead and install that so I'm just gonna copy and paste it I have it here so this is the one let's paste it so NPM I for install yes Lane convict Airbnb - base now the base is because we're just using you know very simple JavaScript so we just need the base and but there's another one if you're using react like Jas X or something like that don't worry all these links are on the description of this video so go there and you can read a little bit more but let's hit enter here so we can install our Airbnb all right and now all you have to do is go here to your yes lint or CJ's file and here it says extents we're gonna replace this one by the air BnB so I'm gonna just copy and paste it from here so I have it in here just paste it and that's it that's all you need let's save this file alright and now we're done with the terminal so let's just close this let's go back to my main Jas file here you can see that we already have some dos red underline things and when you hover them you can see the error so it says cars is already defined and it's true he's already defined so this is very helpful because this um redefining variables it can cause you a lot of errors and headaches in the future right now this is very simple so you can just go ahead and and fix it but when you have a lot of code it's not gonna be like that so listen let's just remove this one see what happens let's save it and now you can see that we have more errors or actually some of this is just warnings because my code it will work but these warnings and this is getting all the style and all the rules from the erbium air B&B so here you can see if we hover here is saying expected in the indentation of two spaces but there are three spaces here so what they're saying is that if you remove this and put two spaces so that's a rule as you can see now we don't have the error let's see another one inspect unexpected trailing coma so they don't want you to put a coma at the and and they just want you to live it like that let's go ahead and remove this rule from our setup here from our rules so all you have to do is go here and this is the name of the rule so let's just copy this let's go back here here in the rules let's put it in here and to disable this you just just put 0 which is like false so let's save it let's go back and now you can see that we do not have the error or the warning you can say so this is this is how it works is very good for you because it teaches you how to clean your code and all your code is gonna be very consistent your indentation is gonna be the same if you just come out now so very helpful so let's see what here what we have here all right so no spaces so it seems like it doesn't like this space right here so if I remove that so you can see that disappears and that's great but I like the space so let's put it back and let's disable that oops same thing let's copy this let's go back here and let's put a zero safe all right and now I can have my space right there I I personally like it I think it looks I mean it looks clean and you can read it better all right let's see this one alright so he's supposed to return a value so and right now we're just constantly logging which is fine so if we change it to this for example instead of returning instead of consoling log this so return because he's expecting a return right so now you can see that is gone but I want to console.log for now so let's go back so let's do the same thing that way we're not going crazy you don't have to but there you go save that alright and then console.log yep so this is something that I always always disable because I'm always using console locks so there's one called nan no console because they don't want you to have that extra code constantly logging everything and then save it like that so let's do this one too whoops and there you go umm if you see something like this is because you have extra spaces let me see if they say this yeah there you go umm too many blank space line blank lines okay so you just yeah remove and that's it and you're good to go and that way your code is pretty clean I think you can clean it even more here your code is very clean it's gonna be very consistent because es lint is gonna kind it's gonna force you to do whatever you have in your rules okay so and you can keep adding rules I'm gonna post a link in the description so you can take a look at all the rules from Airbnb you can enable more disable more like one that I like is called um let's see we're using a VAR for variables this one is called no - far so I'm gonna charge these turn this one on just enable it and you can see now it says unsuspecting unexpected bar use let or Const instead and yes that's something that I really like tool is used Const and you're good to go now something that I really like let's go back here excuse the VAR let's put this space let's remove some of this for example and now you can see some errors and stuff now I want to automatically fix this when I save the file and that's possible so let's go click encode here go to preferences settings you will see some settings here go to your extensions you will see all your extensions es lint and here you see some options and here's the one that I want out of fix on save I'm gonna turn this on so you just click there and now is on close the settings again now all I'm gonna do is save this file there you go now as you can see the bar was changed to let my space here was remove and and no coma so it all depends on your rules it will do it for you automatically unsafe ok so you need to be careful because maybe you will save and it will change your whole code and it's not what you want so you to make sure you have your rules and everything on place before you enable the automatic fix alright and that's it subscribe if you want to keep learning and click on the bell icon to receive notifications every time I upload a new video thank you so much for watching half a beautiful day bye bye

Channel: iEatWebsites

Views: 8,563

Keywords: eslint, how to install eslint, eslint javascript, eslint vscode, how to install eslint in vscode, eslint for beginners, eslint airbnb install, add eslint rules, edit eslint rules, create eslint config file, install eslint, eslint basics, detect javascript errors, fix javascript errors automatically, fix javascript errors using eslint, vs code, eslint extension, eslint vs code extension

Id: JyTrZszwiuY

Length: 13min 1sec (781 seconds)

Published: Sat Mar 02 2019