An Essential Tool in Your JavaScript Belt

if you write javascripts i think you may find that eslint is an essential tool in your belt in a nutshell it analyzes your javascript it will detect and notify you of problems and then when it can it will automatically fix those problems so let's play around with it we can install it through npm and i'll do this in a little demo project we have here for another series at layercast all right and next we need to initialize it and this will set up a configuration file and it should ask us a few questions about how we want it to behave in my case i want to check the syntax find any problems and enforce my style guide we use in this case javascript modules i'm using view it does not use typescript it loads in the browser and why don't we answer questions about my style i want to use javascript i'll use spaces and then single quotes unix line endings and do i require semicolons i usually default to it but if you are using tooling that can do it automatically you might want to play around with turning it off okay so now it's detected that i should probably pull in view and that has its own set of rules finally you'll see it created this new eslint file so let's have a look at that in this project here down at the bottom here's our new eslint file and notice it's extending eslint recommended that has its own set of rules and then it's also extending the view essential plugin that also has its own set of rules all right so if we scroll down here's the section of rules we have here now this can look a little confusing at first but for each rule you're going to accept an array where the first item in the array is the the level so effectively zero one or two should we turn it off should it be a warning or should it be an error so for all of these rules if we don't honor them we want to treat that effectively as an error and then the next item would be basically any arguments to that rule so in this case i want to indent by four spaces and if i don't it should be treated as an error okay so why don't we play around with this like i said this is kind of a demo project for another series we're doing at lyric house but why don't we change things up here so why don't i indent this quite a bit i will use double quotes here and then notice we are using semicolons okay so i'm going to start by running this file from the command line but of course we can pull in a plugin to do it automatically in the ide we'll say run eslint on resources js app.js okay and of course it fails here's all the things that found it looks like 16. so we have a lot of semicolons we're not indenting by four spaces and then also we have some situations where we use double quotes instead of single okay now notice it does detect any of the problems but there's also plenty of situations where it can automatically fix it for you so if it's just a case of changing double quotes to single quotes eslint will do that for you so if i run this again i can add the fix option try to fix it if you can and now notice we're only left with one remaining error looks like some reference to require ah yes so we're using a common js require here but in our style guide effectively we said we only want to use javascript modules so i can change that here and if i give it a run again no issues at all also notice we fixed the spacing the indentation the semicolon was removed and we switched to single quotes now i want to point your attention back to our eslint guide and actually while we're here maybe we only want two spaces okay so now if i were to switch back and we run it again it'll update us to two spaces okay but anyways if i come back notice again we are pulling in this view essential plugin and that has its own set of rules now you can find this plugin in your package.json file so why don't we research this and yeah it'll have its own set of rules that will automatically be applied so right down here notice all of these can be configured no arrow functions in watch or basically anything you would want to enforce no template key or no unused variables so notice in this case if we have v4 and we set i but we never actually use it that would be reported now i think there should be one related to the ordering right let's see order and components this rule makes sure you keep declared order of properties in components this is something i like to use and make sure that when you have a view component they all follow the same order so for example data will always come after props it won't go at the top it won't go before components and even if it does in your file this rule will detect and fix that so let's play around with it i'm going to go into one of these components here again very very simple let's add data as an example notice we have four spaces here because of my editor which i should fix but again when we run eslint that will solve it for me so we'll say foo is bar okay so a lot of issues here and in fact let's even make it a little more clear so the indentation is all wrong data is not where it should be located here and we do have semicolons all right so let's hide the sidebar and we're going to give this a run npx is lend on resources js pages users.view and try to fix it where you can oh and we get an issue here one error the template root requires exactly one element so this actually is a view two issue so we'll need to check on that in view two you would need to have a single top level element in view three that's no longer the case but the fact that we're seeing this error means be a little careful let's go back to my eslint configuration and yeah this is the standard view 2 essential so of course you can find this in the documentation but we really want view 3. okay i think that'll fix it for us so let's bring it back to how we had before and give it another run and i think we should be good to go and we are but now what about the situation we talked about where we want to honor the component order for these properties well if i were to switch back and we look for order and components you'll see it's under this recommended rule set so we could either switch to that rule set and that would include all of these here or of course you can turn it on one at a time so we'll do both if i want to turn it on just scroll down here to the bottom and you'll see we can add the rule like this we want to treat it as an error and here's the options you can pass to it so if you want to override the order for your own project you could do that here okay let's grab this switch to eslint and for rules we'll do it down here at the bottom we'll paste that in and we want it treated as an error all right let's give it another shot so we'll go back to users i'm going to run it again and this time it should reorder it and it does you can see it pushes data down below all right so i think you get the basic idea let's finish up by integrating this with my editor and phpstorm should have it out of the box yeah so let's perform automatic eslimp configuration and for the files it should run on javascript typescript html view that's fine for now finally let's run eslint fix onsave so now we shouldn't have to manually run that command so i'm going to bring this back to what we had earlier where we had a bunch of issues and now before i press save do note all these red lines that is easily doing its thing in this case we need to be using single quotes in this case components should be above data in this particular case the indentation is all wrong and we can see all of them here okay so i'm going to press save and when i do we have it configured to automatically run eslint with the fix option so i'll save it and yeah i think we're up and running so i think you get the basic idea maybe i'll show you one last little thing right up here we can also enforce attribute order so for example whether v if comes at the top of your attributes so v if true or does nav accept anything here no but i do see some red lines here because of the semicolons and as soon as i save those will go away let's imagine we accept a prop here we'll call it foo and we'll say type is maybe string and it is required okay so once again when i click save that will reorder everything and now if i switch back to users let's send through foo and maybe we'll make that equal to what we have for foo here but let's switch up the order finally maybe at the top we'll listen for if you click on something and then we will respond in some way kind of gibberish code but why don't we see this in effect now at the moment if i save my file nothing changes and that's because we haven't activated that rule so back to eslint yeah we could manually add that rule again or this time why don't we switch over to the recommended rule set so let's see if we can find the information here in the user guide yeah here's some predefined configurations that's all these are and we could pull in strongly recommended or why don't we stick with this one here all right scroll on up let's swap it out and now if i go back to users this should automatically refresh and yeah we see a little bit more going on here foo should be on its own line and it should also show up before any event handlers and what do we have here expected one line break after opening tag so yeah it's detecting all of this stuff let's go ahead and save my file and have that fix performed automatically and here's what we get it fixed the order and it fixed the indentation it's so good all right so i think you get the basic idea if you'd like to learn more of course you can visit eslint.org and if you're a view user as i am you'll also want to pull in eslint plugin view have fun

Channel: Laracasts

Views: 399

Rating: 5 out of 5

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: X9Q0O2BuwDg

Length: 10min 30sec (630 seconds)

Published: Wed Oct 06 2021