Improve Your Code With ESLint + VsCode + Airbnb Styleguide

all right so today we're talking about es lint an extremely popular javascript linter here's the home page yes lint org the pluggable linting utility for JavaScript and JSX so what is a linter apparently the term was coined back in 1978 there was a piece of software that was made to find bugs and issues in code and the idea was lint was derived from the name of the undesirable bits of fiber in fluff found in sheep's wool and I strongly recommend you never Google image search lint I was having a great day today and then I saw this bellybutton lint and I just haven't been the same since just want to be normal again so that's the origin of the name but what does a linter actually do well it analyzes your code without executing it that part's very important to find anything ranging from glaring issues style problems now javascript is a great language but it is very flexible let's put it that way and it gives you a lot of freedom to write bad code to dig yourself into a hole and part of this is that javascript is kind of unique in the fact that there are no versions there are no updates to JavaScript it's this one continuous thing there are so many older bits of JavaScript that you can still use because browsers still support them there are patterns that you can still use that might not be best practice today and the fact that javascript is a dynamic language it's loosely typed means that there's a lot that can go wrong so es lint is very very helpful and I'm going to show you how I like to set it up with vs code to make things super easy Oh before I forget here is a nice page that shows some of the very very large companies using es lint Facebook Airbnb uses it PayPal Microsoft is on here somewhere Netflix so some very large companies trust the eslint it's a really really great project and it's definitely worth knowing about all right so how do we use it and how do we install it how do we get it set up well there's really two answers to how you can use es lint you can install it globally on your computer so first of all it's written with node it's a package that you install using NPM but you have two choices do you install it globally or in your particular local project and it's easier to do it globally it's easier to run after the fact but on the actual webpage for es lint they recommend that you don't do that they recommend you do not install it globally and that you should install it locally in each project and the main reason for this is that it makes it easier to collaborate with other developers on individual projects and have different rules you can still have different rule sets and different style guides and all that that your code adheres to if you do use es lenta globally but in general it's easier and it's just better to do it locally and the official home page recommends you do this so let's do it the first thing I'm going to do is hop over here see you my terminal I have an empty folder let's pretend I'm starting a new project so in this new project I'm going to have an app j/s so I'm going to make that file and I'm going to initialize NPM in here with NPM and it - why so now I have my package JSON and then I'm going to install es lint so npm install es lint - - save it will take a moment and while that's happening let's talk about how es lint works how we set up the rules so es lint relies on a file called es lint RC and in that file you can specify rules so if we take a look at rules under the es Lent documentation these are some of the default rules that Ellen comes with you can set up your own you can turn these on and off you can use existing rule sets from companies like Airbnb which I'll show you so let's take a look at one of these which is called quotes and this is a rule that you can use to enforce consistent use of all double quotes or all single quotes or fact excipient figure this is in the es Lent RC file you need to specify double single or backtick but back to setting up yes let's I believe it's finished okay so we don't really see anything new aside from a node modules directory so es lint is downloaded in this folder but now I need to initialize it so this is the command I always forget it looks like this dot slash node modules slash bin slash es Lentz - - and NIT depending on where you're running it from but when I run this I'm gonna get a little survey I'm just gonna ask me how do I want to use es lint to check syntax only to find problems and check syntax or to do these three things enforce the code style find problems and check syntax let's do the last one then it asks what type of modules does your project use I'm gonna just say JavaScript modules even though I'm probably just gonna have a single app.js file with no important exports am I using a framework I'm not but if you were you would select one of those am i using typescript nope where does my code run let's say it runs in the browser and then I have a choice yes lint wants to know how do we define a style for this project are we going to use a popular style guide we are I'll probably use Airbnb --tz-- but you can also answer your questions that it will ask you about your style or you can have it look at existing code that adheres to your Styles that you like and it will use that most of the time I either use a popular style guide or if I'm doing work with a company that has their own style guide their own es lint file then I just use that so if I select the first option we can use the standard Airbnb or Google I like the Airbnb style guide so I'm gonna start with that one now we have a choice one last choice I think this is the last one what format do I want my config file to be in so when we define rules and we override rules or change rules we have different options for how we want to actually write them what type of file I tend to do JavaScript or JSON I just don't really like yamo but all of them will work just fine now because I said I wanted to use Airbnb style guide it now needs to go and download a dependency or a couple dependencies to make that work so I'm going to install that now Y for yes and I guess I'll just edit this out until it finishes so I'm going to open this up first thing you'll see if I do an LS - a we now have a hidden file yes Lent rcj yes it is a JavaScript file because what I selected but you might be surprised to see that it's pretty empty this is all we see under rules there's nothing but that's because we're using Airbnb base you can see it's extending Airbnb base so to find that if we go into node modules scroll down I think it's under so the es lint Airbnb paradis es Lent config Airbnb you can click under rules and see all of the rules that they've set up spread across a bunch of different files but for example if we look at the Style section it says let's let's find a simple one capitalized comments you can see that it's set to OFF what else do we have dangling comma function call spacing and then there's a link to every rule if you wanted to click on this link to learn more about it and why or how it works what is allowed what's not allowed so there's a ton of these rules even though our es lent to our C file is basically empty so we don't need to go into too much detail about the rules I'll probably do a different video more in-depth on customizing es Lent and working with rules but for most people just working with a built-in style guide and built-in rules will work out just great ok so how do we use it well first we need some code alright so here are some code and it's all valid code as far as I know I might have made a mistake I haven't run it but there are some definite style issues I'm using underscores here snake case instead of camel case what else do I have going on here this is a super long single line expression here here I'm using new string which is not a very good idea I think I have a video on this somewhere if you want to understand why it's not a good idea anyway there's a couple of issues here and if I want yes lint to tell me about them then I need to run yes lint and then tell it app J yes so what I like to do because I always forget this is to come to my package JSON and under scripts I'll add in another scripts called lint and have it run whoops I forgot my quotes and then op je s okay so now if i run npm run lint it will just do this command for me it's a lot easier to type and remember so let's test it out in my terminal over here let's clear this and we'll do npm run lint it takes a moment and there we go yeah it's a lot and this is not usually how I use es lint instead we'll connect it to an editor like vs code but you can see there are some simple ones like I defined a function and never used it add nums is not camelcase i defined a variable and never used it strings must be single quote but I have double-quoted strings mixed with single quotes there's a whole bunch of things that are wrong so you could use this and just go back and fix those errors on your own remember this code has not been run it's only analyzing the code as it is so instead of doing that I like to use vs code there is an extension you can install called es lint here I think yeah I have it disabled right now but all you need to do is install es lint and then if you go to your settings command , under es lint let me turn it back on where are you enable and I go to my app J yes all of a sudden I have a whole bunch of red squiggly lines little spellcheck lines and if I hover you can see there's two issues for add nums first of all i never used it and second of all it's not in camel case so i can fix that let's do add nums now it's in camel case but i still never use it so let's call add nums again 10 20 and now there's no error it doesn't like this it wants a space after the comma so I can add that in myself but I'll also show you one really nice option if we go back to settings is to use what they call auto fix and where are you es lense right here auto fix on save down here I have a button yes lint let's click on it go to problems here is a list of all the problems quite a few of them and now if I save I just enabled that auto fix my code gets a lot shorter it can't fix everything because there's issues like the fact that I created a variable called people and never used it the same thing for say hi and then there's things like a console statement I'm using console dot log and in the Airbnb style guide one of the rules is that they don't want you to use console dot log it's the last thing I'll show you here is that we can conflict or overwrite something like the Airbnb style guide let's go what is it called no console was the rule you can see the name here yes lint no console and all we need to do first make sure we understand how it works it's called no console and we want to set it to off okay that's pretty easy so let's go into our es lint our see we have rules right here and we'll set no console to be off and save and you can see already that went away I don't have these console dot log issues anymore now I still have plenty of other issues but these are ones that it can auto fix so it's just identifying problems and it makes it much much easier for me to write cleaner more coherent and just better code it can highlight issues like the fact that I have to find stuff that I'm not using it's just a great tool so I highly recommend you check it out and I hope you enjoyed this video as always please leave suggestions in the comments for future video topics I'm realizing that all of my videos that take off into well on YouTube are either about vs code or extensions or colors none of the super technical ones get very far but I don't want to become someone who only does sort of a simpler content so I really appreciate any likes or comments on the more technical videos the ones that may not do as well just give them a little boost anyway thank you and I hope you have a great day and that you've maybe recovered from that horrifying belly button lint oh gosh

Channel: Colt Steele

Views: 37,852

Rating: 4.9524617 out of 5

Keywords: eslint, js, javascript, airbnb

Id: mfGkKlMDfwQ

Length: 13min 19sec (799 seconds)

Published: Tue Sep 10 2019