Automate Prettier, ESLint using Husky and Lint-Staged

say hello to your new robot chef that is if you have around 300 000 us dollars to spare i'm not really sure what it can cook but i mean i gotta admit it looks pretty cool at the very least it's probably overkill at this point to hire this chef in the name of automation but there are cheaper ways to automate your life for example automating prettier and eslint as a pre-commit git hook using husty and lint stage a lot cheaper and a lot more satisfying than this robot chef i would say so let's go over what we will be implementing today and using this diagram so we have some code changes that we made and we want to commit it husky is going to intercept that commit and pause the commit for a bit lsq is going to call lin state lin state is going to collect all the files that are staged for commit and it's going to run eslint and printer on it and depending on the result if there's any errors it's going to prevent the commit from happening if you eat the eslint and print your tests and the formatting all pass then it's good to go it's perfect code you may commit and commit is going to continue and indeed your commit is going to be made so so this is the general flow of how this automation is going to work so the boring stuff is now over let's get to coding all right in this first portion of the video we are going to introduce the automation of prettier nes lint using lin stage and husky and in the second portion of the video we're going to look at the conflicting interest between prettier and eslint in terms of formatting stylistic errors and how you can resolve that as a developer and to make it a more streamlined process of integration so let's get to it let's first get this automation working the first steps is we want to install the correct node modules so npm install prettier eslint lens stage and actually let's husky before husky and we want to save this into our package.json as a dev dependency so go ahead and do that it's going to take a little bit of time so i'll be back okay once all of your node modules have been downloaded and installed we're going to configure prettier we're going to do that by creating a file dot prettier rc file and in this file i'm going to define some properties here so single quotes i will leave that as true and semi-colons i'll just enforce it as false so we're not going to allow semicolons that's it for the printer settings and for eslint in order to initialize it we are going to run the command mpx eslint and with the init flag on it's going to walk you through the processor i'm going to enforce a code style javascript modules i'll just select none of this typescript no i'm running this in node i'll just select node for now and i'm going to extend the popular style guide i'm just going to use a standard one here and i'll just leave this as json and it's going to download all the plugins and all the configuration files that you need that eslint needs while this is downloading i'll reiterate that eslint and printer actually has been disabled here just for demonstration purposes so it's not going to do any live you know when i save it do any formatting i just disabled it just for demonstration so once eslint it completes its installation i mean sorry it's configuration it's going to create this cslan.rc file that we've seen before um if you haven't just click on the card on the right hand side so as you can see the rules there's no rules it just extends the standard rule here now at this point we have prettier and eslint configured we can actually run these separately and see what they actually do so on the command line mpx remember we can run prettier in the command line mpx prettier and then let's pass in the file that we want actually purify so let's say my entry file index.js i'm going to run right let's just verify i'm just verifying that it's working correctly so there we go single quotes i removed all the semicolons like for example if i add semicolon here run it and remove it right now let's see what mpx eslint does here mpx eslint and we're going to actually um pass in the file which is let's say index.js and then we're going to pass in a fixed flag okay so there's no errors in that index.js so just to verify let me just add some sort of bug here or a logical error here and fix okay so something is going on here unexpected debugger yep so eslint is working properly once that's done we're going to run the lint stage configuration and lin stage is going to actually configure husky for us okay so at this point let's open up lint stage and then let's see what the commands are so if you actually look at the lin stage npm you can click into the github repository and in here it's going to show you the readme that shows you how to install um lens stage the fastest way is right here mpx mrm line state so let's run that command line just copy past all that and just run that in our project directory it's going to do a bunch of stuff here it's going to download whatever it needs to download it's going to look into your package.json and see you know what sort of old analysis tool that you have so in our case we have prettier we have eslint it's going to automatically i'll infer all those and then create the correct configuration uh once this is all done linstage actually creates the husky files for you it has the husky shell and the husky the pre-commit folder or sorry the pre-commit file where you can add whatever commands you need to add in let's just give that a moment until it's done completing all right once lynn stage has completed installation it did a few things it created this dot husky folder that has your pre-commit get hook commands here so this hooks into the git pre-hook pre-commit hook and then it runs this command it intercepts it right there it also added this package.json property in the package.json and add this link stage property which is which indicates what mpx lin state should actually run so in our case for all javascript files that's going to run the eslint with the fixed flag and then for all the js css md files it's going to run a prettier um write for your write function so at this point basically your git pre-commit hook has been established and everything is good to go so if you actually add let's just stage a file let's just add my module that's indexed to that mjs oh actually the mjs file is not going to work because in the configuration this is only a js file in order to add other different extension types um you can just add this into the glob so mgs let's just mds so save that file and then let me just add re-add my module get add my module index2.mds now get status now we see indeed it has been staged so let's try and commit here and see what happens normally the commit just happens but now you see there's a lot of stuff running here so this for example is running task it's running the eslint task here it's running the prettier task so indeed the git pre-commit hook is working properly so let me show you a case where i'm prettier than eslint the concerns of prettier and eslint conflict so in this example i set single quote as true and semi as false which is in align with the with the current standard configuration eslint it aligns so the standard configuration also adheres to single quotes and no semicolons but let's say i changed this and i wanted to enforce a formatting where i want to use double quotes and then i want to use semicolon for every line in this case you see that we have two conflicting two conflicting interests right eslint is saying hey i want single quotes prettier is saying hey i want double quotes and let's demonstrate that um so in our index.js file let's run mpx prettier and we're going to run it on the index.js the main file and then let's write to it so it makes the changes as you can see it changed all the double quotes and added semicolons but eslints on the other hand if you pass in a fixed flag it's going to enforce its rules which is it's going to use single quotes and remove the semicolon so how does this all fit in with lint stage so let's take a look here linstead let's actually run lin stage in the command line and see what happens to this index.js file oh there's nothing staged so i need to actually stage the next.js file in order to run it so let me let me just add a comment here just so i can add it i'm going to add index.js and i'm going to run the mpx linux stage isolated so it's running stuff it's doing stuff so the end result here as you can see a single quote and the semicolons have been removed so this is the eslint rule but the problem actually doesn't end there not only is the eslint one the one that has the final output but this is actually random because these two tasks they run simultaneously asynchronously and whichever one finishes last is the one that's going to output its format so you see here there's a problem where there is no consistent output by running the same command um there is there are many ways to solve or resolve this issue uh one of the simplest way is let's say i'm going to enforce formatting rules for prettier specifically what i can do is pass in an array here and then move this prettier command to the end of the array and in this case lint state is going to run this sequentially so it's going to run the eslint fix first then it's going to run prettier and let's see that in action so we're going to get status so yeah so it has been added just uh to the stage or staged for commit so we can run npx link stage let's see what happens it's running eslint runs and then after that prettier runs but the prettier formatting has been outputted as a final result it has double quotes and it has a semicolon you can reverse this order for example you can do the prettier formatting and then eslint fix flag so the output of this file or at the output of this link stage would be the eslint formatting so as you can see here we have two conflicting interests both eslint and prettier are concerned with stylistic and formatting rules so the general the best way is to isolate the concerns between these two different systems so prettier recommends prettier it excels in its formatting functionality eslint excels in its logical and code quality analysis so let's separate those two let's remove all the formatting and stylistic rules out of eslint and in order to do that navigate to the prettier documentation here so prettier and then docs and then under here integrating with linters so luckily it's easy to turn off the formatting rules in eslint because there are some pre-made configurations here so let's click on the first one eslint config prettier so this configuration extends all the formatting rule that eslint has and it turns everything off so that we can isolate it now the prettier is the one that handles formatting eslint is the one that handles code quality and logical errors so let's implement this into our code so we do npm install save tab eslint config printer so that's going to download the configuration file once that's downloaded head over to the eslint configuration we're going to use the standard still as the base because the standard has a lot of code quality analysis rules in there but we're going to extend this and override the formatting ones the formatting rules and then turn them off all together now our concerns have been separated yes lens only cares about logical stuff prettier only cares about formatting stuff and in that case we can revert this change to what it was before so eslint so now we can run this asynchronously right yes lint it doesn't matter the order of what they're running because eslint is only concerned with logical stuff prettier is only concerned with formatting stuff let me just add my mds files here so at this point everything is done so your git hook is complete and let's verify that we're going to add all the files that we added um actually let's ignore eslint cache this doesn't need uh to be committed so we're just going to add it to our git ignore this is just eslints where keeping track of change files so okay now we're gonna add everything it's gonna add the my modules to access.json all that file and then let's commit it let's see if it works works so it's going to run all the logic the eslint logic and it's going to run the prettier logic and it's done okay so just to kind of review um and just to hammer the point so let's say later down the line i'm going to change something in the prettier rules and i want to start enforcing single quotes now what you do is you change the setting and whenever you work on a file let's just say console.log sdf we're just going to make some changes so that we can commit it so at this point when you add the files and you commit it you are going to see that all the files are going to now run the new printer configuration so single quote is true so in the index.js all other double quotes turn into single quotes and same thing here but this file hasn't actually changed because nothing was committed here so later down the line you know a developer is going to work on this module blah blah add some functionality and once that's done you can add my modules index.js and then you commit and once that comment happens um the eslint is going to run its checks and then printer is going to run its formatting so as you can see now this whole file is adheres to your um prettier rules so that was quite a bit a lot but hopefully that makes sense um the most important thing to just get out of this video is separate your concerns prettier only focuses on focuses on formatting and stylistic stuff and eslint only focuses on code quality if you just keep that in mind then you'll be able to figure out everything cool thank you for tuning in guys please like comment and subscribe like comment and subscribe like comment and subscribe how long are we doing this like comment and subscribe like comment okay i'm done

Channel: Bout Education

Views: 2,401

Keywords: git precommit hook, pre-commit hook, eslint precommit hook, eslint pre-commit hook, eslint and prettier automatic, eslint prettier prehook, eslint, prettier, husky, lint-staged, husky with eslint and prettier, husky automate eslint and prettier

Id: pmn-UvFPftQ

Length: 17min 43sec (1063 seconds)

Published: Fri Apr 02 2021