Linting with ESLint

oh hello welcome to a video about this video is actually about my life's passion I have a passionate in life everybody should find the thing that makes them happy feel at ease now you shouldn't be like me and you should definitely pick a different life's passion but my life's passion is indentation and spacing so this is my phyllotaxis coding challenge code which I went against every instinct that I have in this life messed up the sort of spacing and indentation and so what I'm going to emphasize in this video tutorial is so and by the way this is not a video tutorial you're watching from an expert in this topic this is a video tutorial from someone who just learned about this topic really in the last week and I'm going to kind of learn about it while attempting to apply it to this piece of code and that topic is lifting I forgot my I really wish I'd brought my lint brush so I could have some kind of linting stick but oh well you'll have to live without that now what is linting so one of the things that makes me really happy is when a code editor has something like auto format or beautify and I'm using in here the atom text editor you have lots of people use different text editors and code editors and online editors and console-based editors and I haven't configured in such a way that if I hit command S which is for save or if I go up here under packages atom beautify beautify I have this atom beautify package which allows which will automatically apply a bunch of styling conventions to the code so this horrible uncomfortable thing like look at this will be fixed and everything will be right with the world if I hit command s okay here we go here we go here we go okay especially now so here's the thing I'm being silly and joking around here there's no reason why I couldn't have a program automatically look through the code and analyze it to determine if there are little things like a missing semicolon or maybe there should be a space here between this now again the code these are I'm looking for things that don't stop the code from running but that don't adopt a certain style convention for readability of the code and also for maintenance of the code so I tend to optimized for legibility and maintenance over like never making my code like as concise and short and cryptic as possible obstacle and I think that's one of my favorite words which I can't really pronounce obviously location okay so and this can make an open-source project more accessible actually to contribute to because you kind of feel more confident as a contributors say like oh I can run this little module that tests the code I want to submit to see if it adopts the style conventions and so this is kind of related to unit testing and continuous integration that I have a whole other it will pop up somewhere video tutorial series about okay so let's get started here we know I have Adam beautify that will but it's not telling me about the semicolon here so I need to figure out how to do lint ik so the the package that I'm gonna use to lint oh look at this phyllotaxis pattern let me just refresh let me actually adjust this just stop after a certain point I'm just gonna add something if n is greater than 1000 no loop so that will stop this phyllotaxis pattern will blossom and bloom until a thousand until that variable and reaches a thousand and then it will stop okay like that what the code is doing is less important in this video coming back here let's look for something called EES lint pluggable JavaScript linter es lint is an open-source project originally created by Nicholas Zakas in June 2013 its goal is to provide a huggable linting utility for javascript so I encourage you to read through all of the documentation about this there's a developer guide there are there's this whole documentation of rules that's a bunch of default rules so so the rules are the style conventions that you're applying to the code there's a command-line interface all sorts of stuff what I want to look for here I think is the getting started I want to just click on this getting started and uh there's this apparently this YouTube tutorial that you should probably just stop watching this video and go watch this right now let me sure it's better than whatever I'm gonna do but I'm going to engage with es lint via node so while this project I'm making this phyllotaxis pattern is a client-side JavaScript sketch that doesn't involve a server or anything I can use node the server-side programming JavaScript framework to kind of act as my project manager and I can import certain packages and things that I can run such as unit testing or linting so this is what I want to run the problem is I don't think I want to install es lint this moment right now because I haven't even set this up to be a node project and the reason why I know it's not set up to be a node project is that it would have a package.json file which is like a configuration file for this so that node knows how to kind of manage this project so I'm gonna go here looks so I am now now in terminal so if you're not familiar with the command line I probably have some video tutorial that goes over that I'm gonna just check yes I am in my folder my life's passion I'm gonna say NPM in it this is the command that I can run that will create the package.json file the configuration file for this project I could make it manually or copy/paste it from where else but let's run this this utility will walk you through blah blah blah blah blah my package name and let's see what this can be over here my package name is definitely my life's passion it is version 1.0 whatever demonstrating linting for the coding train oh my goodness by the way I seriously need like a linter for my email so I stopped putting two spaces after the period cuz I just like I have a bad habit of that entry point sure sketch KS test command I'm not gonna run tests right now so I'm gonna leave that out git repository I'm gonna leave that out right now I can I can add that in later keywords linting tutorial education JavaScript let's do that author is the coding train and the license will be MIT and I'm gonna say MIT by the way is a software license that's very permissive and I try to adopt it for all my projects when I can there's sometimes other considerations but it pretty much lets people use it for anything without having to give credit without we can use it commercially etc okay is this okay yes but for example I use a Creative Commons non-commercial license for like my nature of code open source book because I wouldn't want someone to take the nature of code book and resell it but with something like this phyllotaxis pattern linting tutorial use at will okay is this okay yes yes okay so now I'm gonna I'm just gonna type clear to get back to the top and I'm gonna look we can see now AHA package.json so I have this package out JSON which is the configuration file for my project and now I'm lifting to it this video is brought what has this been like 45 minutes we just like doctor anticipating adding glinting all right so you're wonderful to watch this npm install es lint - - saved it so you might be wondering so first of all npm node package manager and we'll install a package to go with this project yes lint is the package now what's this - - saved dead now if you've watched some of my other node tutorials you have might have noticed that I say - - save because often the code for my project itself depends on a node package this is not the case right now the code for my phyllotaxis project does not and on ES lint yes lint is a developer dependency meaning I want to use this package while I am developing the project but when I release the project it doesn't need yes lint to go with it it's just the little animation that's gonna be in the browser so that's this is saying I wanted to pendency for this project but I want it to be a development dependency so I'm gonna do this I'm gonna copy paste this I'm gonna go back to terminal I'm going to paste it in and that was fast okay so now it added everything and I have es lint now I have a feeling we're missing some other packages and we're gonna kind of arrive at all of that as we go but we can now say here we can now we can now we can now see that first of all under this has been added to package that JSON under dev dependencies yes lint version 4.1 8.2 or higher so that's there and in theory now now I should say that some people choose to install yes lint globally on the computer so this now what I've done is I've installed es lint for this particular project only it might make sense for me as a person who might want to use it for everything that I'm always doing on my computer to install it globally but for now let's leave it as a local module so that anybody using this project can can have it there sort of as a standalone thing okay so now what I'm gonna do is I can run yes lint by referencing the es lint execution file in node modules in dot bin and your file I could run es lint on sketch dot yes so let's actually just do that okay so I'm gonna run this but instead of your file Dutch ass I'm gonna write sketch Dutch ass oops something went wrong so here's the thing yes lint isn't just magic it's not just like oh let's just gonna let there I know I as the eslint know exactly how you should style your code I there's no matter you have to set up a configuration file so that configuration file is it's has a name and it is called it is a file that you create called es lint RC in the directory of the project and so I could create that manually and I could start to add some of the rules like hey I always want to semicolon or I always want to use double quotes me I like single quotes whatever I like to mix them up anyway I don't know what I like so but I could also now run let's try this I can run es lint in it and I think it will give me it will step me through a series of questions it will ask me all about my preferences my passions my hopes and dreams and fears and it will create a nice configuration file of how I should style the code the longest video ever anyone ever made on linting it's insane okay oops oh right but I have to instead because it's not a global module I have to say this a - - in it this should work okay I'm so excited to have this conversation how would you like to configure es Lin to use arrow keys use a popular JavaScript style guide that sounds reasonable inspect your JavaScript files mm-hmm I'm not sure hmm I don't know actually let's inspect our JavaScript files so one thing you should know is that there are popular JavaScript styles and a lot of them have been created by companies for example there's an air B&B style there's a Google style and these are these you can adopt and me I can we'll find out about some of these but let's I don't know I've actually never tried this inspector JavaScript files so let's try that which files should be examined sketch is what format do you want the config file to be in I let's stick with JavaScript am I using EMC ECMAScript 6 features yes yes six modules no but I should be someday I got to do a tutorial about that where will my code run okay this is browser code only it is not node do you use common Dutch common J's no do you use JSX no okay great so it enabled a whole bunch of rules for me look at this oh let's look now that file is there and we can examine it look at this array bracket new line array bracket spacing oh it's just like it looked at my code and created a configuration style not aloft or how I currently have it now some other things I might do is I might go back and try to adopt one of these common JavaScript styles I might look at a project like p5.js if I go to the if I go to p5.js on github github calm / processing / p5.js I'm guessing I'm gonna find look at that this open-source project has an ESL int RC file so I could say like you know what I want to adopt the same rules that p5 adopts and so I could look through here now however I should be able to run Valente now here we go whoa okay so this is really interesting I got a lot of errors points is assigned of value but never used setup is defined but never used create canvas is not defined angle mode is not - 5 degrees is not defined so wait a second this is nuts I mean yes you're right if I look at my code hmm there is a background translate rotate and it's saying those things are not defined but they are they're defined they're part of the p5.js so one thing that I probably want to do here is tell yes lint that I'm using the library p5.js and if you're if something in my code is not defined but it's defined in p5.js you don't have to give me a warning or error about that so let's look at how we do that in fact one way of doing this is using another node package p5 config config eslint so if I go now to here you'll see that there is this other node package called es Lynde config p5.js which allows me to put in my yes lint RC file that this that I extend I am I am also should look at all the stuff that's part of p5 Jaz so let's now install this dev dependency to the project to feel are way too fast again that was installed and then what I want to do is look at my es lint RC file is there already and extends in here yes extends yes lint recommended so let's see what else I want to extend extends p5 just now ah so if I want to extend a bunch of things looks like I can create an array this doesn't look right right there should be commas here I think this is probably incorrect we should submit a pull request to this project just to fix its documentation as I have a feeling what I need to do is turn this into an array and then so I'm going to now add also p5.js and let's just add I'm not using it but let's add p5.js Dom so you can see this should be how I can add other kind of lint configurations that I'm going to es link configurations that I'm going to import into my project so let's see now I should be able to say I'm going to run linting again I'll leave this here ah ok great so now you can see that got rid of all that now here's the thing points is assigned a value but never used line I line 9 let's look at line 9 what is that so I go back to my code line 9 oh look at that that's actually a totally legitimate thing that it found I I'm not using that array anywhere so that's good to know I'm gonna take this out and now I'm gonna run it again and I fixed that now okay great so um here's the thing I probably uh maybe I'll look into this in a few chinna part two or something there's probably a nice way that I can create my own custom rule so that I'm set up and draw are allowed it does think that I'm maybe that should be saying it's actually added to p5 the p5.js configuration but in this case in this case the it is it is kind of accurate that I've defined this function setup and it's never called but p5 the library itself is calling it set up it does actually is that in a way I almost want to say it almost are give me an error like hey where's your set up function let's do some other stuff let's let's put in some weird spacing and see what it gives me let's forget some semicolons knocking oh I I have to do something so one thing that I have is that as soon as I hit command s it's going to reformat the code so I need to turn off my atom beautify package so I'm gonna go to preferences wait hold on pack it I'm gonna go to atom preferences and I'm going to go to packages I'm gonna go to beautify so again this is a really atom the text editor specific which is a little less relevant to this video because you might be using a different text editor but I'm gonna go to settings of atom beautify and I'm gonna go down to JavaScript and there's by the way I can I'm going to uncheck this beautify on save which is what I'm doing right here by the way I can add I can actually link the text editor with es lint so maybe that I'll do that in a separate video just look at that but again that's Adam Adam editor specific so I unchecked that preference so now I should be able to hit whoops I should be able to hit save all right and all of the mistakes or style mistakes are so one thing just to see like I shouldn't I'm not broken the code the code still runs I have not broken the code I've only broken my style conventions and so now I'm gonna run again and look at this oh look at this uh oh let's see if I can it's really bothering me that I'm not that this formatting oh no this is fine now okay I just want to be able to see this a bit better I'm gonna make this a bit bigger so it looked a space is required after the column yes yes it is there should be spaces inside this parenthesis multiple spaces found before degrees so so this is wonderful and look at this it's saying potentially fixable with the - tax - - fix option so in theory I should be able to now run this again with - - fix and it will actually fix some of those style errors so look at that it didn't find any errors anymore and if I go back to the code okay I'm upset didn't I got a let's run this again yeah so interestingly enough this is deeply deeply upsetting to me that there aren't two spaces here if I run my package out of beautify I will get those spaces back so that's something that I have to investigate and probably what I need to do is go look at the ESL into documentation whoops in the ESL in documentation go under and go under rules and look for a rule that I can add to make sure that is fixed now here's the thing most likely if I adopt one of these more popular JavaScript style guides it's gonna have more stuff in it that I might want and maybe I'll come back and try some of those in a separate video but I do want to mention one thing here this was kind of no fun what I did in the sense that know nothing about this is fun that I have to do this because I have es lint as a local a local a local module and so one thing I can add to my package JSON file and it's here under scripts so you could see like one of the things you might have if you watch my videos about unit sting I could say things like npm run test and what that will do is will run whatever commands I have that are mapped to test in scripts so I'm going to add one here called lint and I'm going to say whoops I'm going to go and grab this and then I'm also going to say star J s so this would in theory lint any JavaScript files that are in the projects in them in the main directory and there I think it might not hopefully it won't look for the at the people the library files which is something I definitely want to ignore but if I do this and save this now I can simply say NPM lit run lint and there we go now that didn't work why did that not work lint es lynnster yes mmm okay I'm back thankfully I make these videos with a live chat of people who know more than I do about this and actually I want to see this because what happened is yes lint exited with an error code because there were errors and if I'm gonna run this automatically through some other process like it's exit status is one because there was an error and that other process needs to get that report so if I integrate this with some kind of other unit testing system or continuous integration framework I'm gonna good what are these things you know check my other videos or ask in the comments this is something that I actually want to see so unfortunately without setting up a rule but I can just see just I can just for a moment just as a kind of like hack for a second is I'm gonna just comment out my setup and draw functions and I am going to run this again and we'll see oh boy comments should oh look at the crazy ah oh look at this and Oh terrible idea these variables are assigned but never used and comments should not begin with a lowercase character and you know what yes lit it knows better than I know myself because I agree I do not want my comments to begin with a lowercase letter although I do want an exception to that if I'm commenting out a bit of code although I guess ultimately in a sort of more formal open source project maybe I don't want to submit a pull request or something with commented out code but again it's kind of okay for me while I'm experimenting of commenting code I'm certainly not going to like do this because that would ruin everything so I have to think about that I might want to disable that rule but you get the idea I'll delete it let's just delete everything hold on I'm gonna do command X and I'm gonna say console dot log what kind of I'm so stressed out right now yes perfect that my colon okay now how do I do that automatic clear again okay I'll just type clear because that's how I that's how I do it okay nvm run lint here we go oh I expected console statement no I should not have consoles David strings must use double quotes okay I reject yes lint I reject your configuration let's go let's go see this video is my way he's like I can't we be blur to be like oh what's new from the coding train today Oh a video about linting wait why is it two and a half hours long got like crazy person made it let's look for quotes in here so oh I don't quotes quote quotes quotes all right double wait where there should be somewhere in here oh maybe because it's getting the I gotta end this video and learn about how this stuff works single double so I wonder if it's getting it from yes Lynch recommended like I wonder if some of these rules are coming from es lint recommended command K thank you and so let's let's get rid of that just for a second [Music] strings let's use double quotes no alright but fine I'll fix it oh it couldn't fix it command K right yeah there we go it couldn't fix it so I will fix it myself we're gonna make this thing this big lint itself by golly let's get rid of the fix let's make it let's make it much bigger so you can see by the way this stuff can be problematic and you really have to be thoughtful and careful about what makes sense for your project in your workflow and if you are making a creative art project and you spend all day during your linting file and you don't express yourself through your code maybe that's a problem but as you after a while at certain point after you've worked on a project and have a kind of a first version you might go back edit clean up the code add some style conventions if you're open sourcing it so other people can participate in it alright so that wraps up this video about linting thank you for watching it's probably the next day now it's really nighttime if you started this video and it's daytime it's been so long I will be doing a part two and I'm sure I've made a lot of mistakes and missed some things and I want to really sort of think about what kind of configuration rules I want to set up for my workflow and maybe experiment with integrating with Adam or trying other text editors so leave your notes and feedback in the comments I'm I'm gonna wait at least a week before I do the part 2 so I can compile a lot of feedback at comments and then come back and do a part two and hopefully integrate this also with unit testing okay thanks for watching [Music]

Channel: The Coding Train

Views: 27,633

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, coding challenge, tutorial, coding, challenges, coding train, the coding train, unit testing, circleci, test driven development, tdd, ci, test js, test javascript, jest, jest github, github ci, js development, javascript development, tdd js, tdd javascript, unit testing js, unit testing javascript, node test, npm test, lint, linting, linting js, eslint atom, eslint config, eslint

Id: clzTwZgMlqE

Length: 28min 29sec (1709 seconds)

Published: Tue Mar 13 2018