How to Set Up and Optimize Your Project: ESLint, Husky, Semver, and Conventional Commits

in this video I'm going to show you as a senior developer how I would set up my project in a new repository so these are some of the takeaways that you should have in your professional environment or even if you're setting up a project yourself so what I'm going to be talking about is setting up things like es lint for your linting rules we're going to be setting up husky as well for any commits and also we're going to be looking at seare and conventional commits along the way I'm going to show you how to set everything thing up and also if you can try and Implement these best practices in your project then this will help you stand out and are some of the ways for you to advance from a normal Dev to a senior developer but it's essentially ways to improve your code base making sure that is more robust these libraries are there to help you so if you use them effectively and well then you will build a more robust code base which in turn will help you out in the long run so let's get started with the video so what we are going to be doing is we have this code here let's go ahead and Implement some best practices some linting rules adding husky in and so on so first of all what I want to do is be able to automate my change log so whenever I make a change in the code then essentially I will automate this process in circle CI so let's go ahead and start with implementing husy itself so so going into our component Library architecture what we've essentially done is this component Library here we've imported in just we've done typescript and we also need to do es link and husky as well we've done the roller po which is fine so we can check that one off and then we also need to do this so Circle C will basically handle everything in here upload it to mpm we don't need to do anything it's quite easy to do so let's go ahead and get started first thing we want to do is go in and install husky so let's go into the Husky docs you want to search for Husky MBM and click in here so now as you can see this is a mpm package as well so this is what we actually are creating so what we can do is copy mpm husy here like so or we could click to the repository so this is where we would have the information for the project itself but what I want to do is just go into the docs and in the docs click get started and what we want to do is do the recommended steps which is husky in it so let's copy that and back in our project in our terminal we just want to paste that in MPX husky in it so now we will go through a series of questions so yeah it's okay to proceed and now what's happened is a husky folder here has been initialized so let's close everything down and go into the Husky folder so in here we have a pre-commit that says mpm test and in our package ason we should have a script for Husky in here so if we scroll all the way to prepare it says husky in here so now what I want to do is try and commit and what will happen is it will run a test and if the test fails then it will exit the commit so let's go ahead and do that so let me first of all go in Source in test and let me just do a failing test because it should pass because essentially the tests are passing so let me just quickly do mpm run test and we want a failing test so now this will test everything and we have one failing test so that's good for us now and what we want to do is let's commit these changes using husy and actually what I also want to do before I do any of this is let's actually install everything once all over again so let's delete the package lock so let me delete that and let me also delete the Nord modules because what we want to do is make sure everything is installed in correctly and in our packet Json you can see if we scroll down we have Deb depend depencies but we also have Dev we also have dependencies so let's move them into the dev dependencies because what we actually want is actual Dev dependencies and not dependencies because this is a component Library so now let's just check everything is in here so we have storybook command we have a build storybook command we have the dev and build command and we also have the test command we also have husky in there as well so let me clear this out and then what I want to do is do npm install now this will install everything from a fresh for us again so now everything's installed again what I want to do is try to commit and essentially this husky should run mpm test before it commits any changes so let's go ahead and do that so let's do get start this so what we want to do is add everything and essentially what we have done is added story boook so I'm just going to do get commit and it's going to be- M and the commit message is going to be a feature and it's going to say added story book press enter so now as you can see it's running the test so let's go ahead and see what's happened it run the test so this is a pre-commit check and it basically exited out so if we go up a bit more further you can see that it R the test nothing happened and essentially it stopped cominging the Cod and you can see it here it's still here on the left so what we want to do is further config this now so that's good what we can do is actually add further to this so this is we need to add a hash so I'm just going to make this look a bit better so it's a hash and then exclamation mark SL bin SL bash and then essentially now we can add the comments in so these are the checks that you should do before you commit your code so all we want to do here is first of all we want to run tests before the commit which is what we did we run a test essentially mpm test and then we also want to make sure we want to lint so we need to add a linter and we'll do that and we also want to make sure the build works so let's go ahead and make sure build works so essentially this is the steps that we want to take before we do the commit so essentially when a user in your team or project is working they would sometimes be careless or they might miss make a mistake and forget to do these checks these are the checks that we should do before we commit code up into our GitHub itself so let me just save that and what we need to do is we need to have a linter so what we will do is we've done the pre-commit check now we want to do a lter check and then what we also want to do is follow the conventional commits which we will look at later on but essentially if you saw my commit message here I did something here which was feat which means it's a feature and then I'm describ ing the feature because what will happen is this will then get added to a change log so we will install a package called Standard Version and then the change log is automated and we will automate it in our C Circle in our Circle CI pipeline so we look at that later but essentially what this pipeline is is this section over here in our component architecture so the cicd pipeline so first of all we've done husky itself we want to do es lint make sure all of the processes we've described are working correctly in here for our pre-commit we will also do a commit message which will check that we are following the conventional commits practices over here if they are not met then the commit won't go ahead as well so it's just adding extra checks before we do our commits or our pushes to our our relevant branches so what we want to do next is we want to configure our linta and we will do that with ES L right so now what we are doing is we adding pre-commit hooks to run tests before the commit that one's fine so now what we want to do is run a linter before the commit as well so the way to run a linter is to install es lint now if we go on to es l.org in here you can see here find and fix problems in your JavaScript code so let's click get started and you can see here let's quickly copy this all we need to do is run mpm in it at Le es link config so let's Implement that in now and press enter and we should get a few questions to ask for so now we have the three questions here how you would like to use es lint what I'm going to do is choose the third one because this covers all the bases and it gives you the flexibility if you wanted to do just a syntax only you can do if you wanted to check syntax and VI problems you can do this one essentially covers everything so you can enforce a cording style as well so let's press enter and now we want to use JavaScript module because that's what we are using and and we are also using react so does your project use typescript yes it does so let's press enter and the code does run in the browser so let's just do that so essentially this is front end because we are creating a UI components Library let's actually use a configured template which is a popular style guide and then we will just use the standard one which is from typescript and how do you want to configure it let's do it in Json and press enter so now let's go ahead and it will say do you want to install everything so again yes let's go ahead and do that and we can use mpm yarn or pmpm and because we have a Packy lock files we will just do mpm because that's consistent and now we will wait for everything to install right so now everything's installed if we go into our package Json file and if you go up to the dev dependencies you can see now we have esin installed in here with all of these plugins that were imported as well we also have a eslint rc. Json file so let's go in there and now you can see these are the essentially what we've installed so it extends the standard with typescript and it also got the react plugin as well if you wanted to extend these rules further then you can do in here so in here you could add some suggested rules so suggested rules and you have quite a few that you could choose from or you can go in the docs and add whatever you want as the configurations in here but essentially what I am want to do is just use the recommended one which we went through in the setup process so now all we need to do is add a command to run the linter so if we go into here and essentially if we go in configurations you have more rules in here such as semis and quots and we can also extend as well in here so now if you go to next steps you got some further information that you could have but essentially now we have a lter set up so now all we want to do is we've got this configured now if we go in our package Jon we need to add a script so underneath the script we have is lint so we want to do es lint in here for everything in the same directory so dot which is essentially everything in here and we also want to add a lint fix which is again eslint do D- fix in here like that so now let's save this and let me quickly run mpm run lint so let me clear everything out and do mpm run lint and now he's running es lint and you can see there's two problems what are the problems let me go up and you can see these are the issues which is essentially in our disc folder so actually what we will do is we only want to lint anything in our source folder so it will be do/ Source like that and again this will be/ Source because the dis fold is is essentially what we are doing as the final thing it should be linted before that happen so what we want to do is Target the files within here so this will be anything with the extension of TS or TSX I don't think there's anything else other than that so yeah that's fine so now let's save that and let me do mpm run link and press enter so now we getting these errors in our linter what we need to do is we could either fix them with npm run lint Das Callum fix like so or we could add these rules in here and fix it so let's go ahead and paste in the relevant rules we need so so now we brought in our rules in here all we now need to do is run mpm run l- fix or callon fix and press enter and now we'll fix all of it and then we need to run link again just to check it's all fixed and now you can see there's no issues being reported so one last thing is react version not specified in es L plug-in react so let's go ahead and do that so if we close this terminal down a bit and create a new object in here and this is settings and essentially we want to be able to detect the version of react that we are using so now let me just quickly run mpm run lint again and now you can see it run the linter and there's no issues whatsoever so so now if we go into the pre-commit hook over here what will happen is it will run the test it will run the lter it will run the build and then if everything passes then we should be able to commit so let's first of all run mpm test because what we did was we essentially did a failing test before so we need to basically fix that now so in our test this needs to be to be in the document so let's save this test should now pass which which it is doing right so now what I'm going to do is going to commit everything in here so essentially what should happen is it should run test then run lint then run build and then everything should commit so essentially all of the pre-commit checks are here if they all pass then they should commit the code so hopefully this should commit now so essentially it will be get add and then get commit and then the feature is ADD story book es link and husky so if I press enter and you can see it's did it's done it linking checks up here then it's done the unit test and then it also built and now if you scroll all the way down you can see everything has been uploaded into GitHub here so all I want to do now is do git push press enter and now what we have done is we have done the pre-commit hook which is a check to run the test run the link and run the build if everything passes then obviously we would then commit our code so what we're going to be doing next is adding conventional commits and standard version ensuring that when we have our commit messages they fall according to the conventional commit standards and we will do that next right so so far for Best Practices we've had we've installed es link to manage our linting for our app itself we also have had Husky which installs the pre-commit hooks and we can run certain checks before we even commit our code but what I also want to do is enforce conventional commits or a standard where we we would have a certain piece of text within our commit so git commit and then we need to have this as a standard of text so that when we UT a commit we can't put something in bad like something random like this is bad text or whatever it may be we need to have a certain structure and then that structure can then generate us an automatic change log file that chain log file can then be released and also have information on there that actually makes sense so what we need to do is install conventional commits or enforce conventional commits so if you go on to Conventional commit. org and click quick summary essentially this is the specification is a lightweight convention on top of commit messages it provides an easy set of rules for creating an explicit commit history which makes it easier to write automated tools on top of so this is where Circle CI will come in this convention details with sver which is a standard semantic versioning in here where we would handle our versioning for our mpm package so if you want to read up on that you can do further in that URL over there but essentially what we are doing is we defining a type of the commit so so far I've done feat which is feature you can add parentheses and an optional scope and then the description is essentially what we have done in our commit basically so if you scroll down I believe there should be examples but if there isn't then I suppose you can Google it and it's here the examples actually so if you scroll up actually here it says recommends and then you have all of these as the keys so essentially you could have a build a chore CI docs style refactor and so on and then what that would do is that's the key and then you would describe what you are doing so now let's apply conventional commits to our application so first of all let's go in our our code over here and I want to install a couple of things so mpmi and isave DD and the first thing I want to inst is at commit link SL CLI and also @ commit lint SLC config dasc conventional and also I want to have Standard Version standard Das version so now let me install all of this and then what we also need to do is at the highest level here we need to create a config file so this is commit link. config JS so let me just quickly rename this cuz I've done a mistake and in here all you want to do is module. export is equal to and then essentially this is what we want to extend it as so let me save that this is what we've just installed in our application so now all I need to do is it should enforce it for us now so there's one more thing we need to do is add the release command and the re release command is essentially Standard Version like that so now there's one more step to to complete which is in our terminal so let me just paste in this which is MPX husky ad and then we want to add a commit message file which essentially adds it but again it says here add command is deprecated so let's instead create a new file in husky folder and in this folder what it will be is commit dmsg like so and then let's paste in the relevant information in here so now let's save and I'm actually going to delete this command and in here we want to do MPX d d no install commit link D- edit like that and the dollar sign S1 in here like so so let me just wrap this in the string value and now if I save now what should happen is if I save all and now I want to try and commit my changes so get ad and then it's get commit and this is going to be this is a bad commit message so let me press enter it will run my pre commit hooks in here then it should check this over here to see if the commit message was successful and as you can see now it says subject may not be empty and type may not be empty and it says get help on the conventional commit change log so now we've essentially enforced the rules so all we need to do now is do kit status because now we just need to add the relevant commit message so in here now instead of this is a bad commit message what we essentially want to do is declare and describe what we've actually done so what have we done is we can say feature again and I'm sure you can find a better one but feature and in this feature we have added conventional commits and also added Standard Version and we've also basically enforced the commit message as well in our project over here so let me press enter and now what should happen is this should do our pre-commit checks and then also complete the process which is committing the changes to GitHub which it has done this time and you can see over here there's no errors in what we have done and there's no exits so now all we need to do is get push so now that is all complete we have successfully configured everything here on our project the one last thing to do is to automate everything once we commit our changes to GitHub and we will do that next with circle CI

Channel: Imran Codes

Views: 196

Keywords: semver, husky reactjs, stand, husky js, husky node js, semantic versioning, application development, semantic release, husky.js, web development, software development, multiple javascript packages, vercel, eslint, course, tutorial, ESLint, Husky, Semver, ConventionalCommits, DevTools, WebDevelopment, SoftwareEngineering, DevTips, Programming

Id: mo1Iy6194jI

Length: 20min 24sec (1224 seconds)

Published: Sat Jun 29 2024