Protect your Javascript code quality with the 3 musketeers - ESLint, Husky and Lint-Staged. I often come across projects in my consulting gigs where the team overlooks the importance of Automated Code Quality for the front-end because they feel they have one less thing to worry about. With the three said musketeers configured to act in your project, you will start to experience productivity and peace because you get to fail faster should you compromise on code quality.
Understanding the roles of the 3 musketeers:
- ESLint : To find and fix problems in your JavaScript code no matter what ECMAScript standards your team has adopted to follow starting from ECMA 3 to ECMA2019. And if you were to use language extensions like JSX, Flow or Typescript, ESLint get your code covered. Lastly, if you are using Babel, which you likely are, you can use the babel-eslint parser and eslint-plugin-babel to use any option available in Babel. This is the Javascript community's best friend when it comes to automated code quality. Go for it!
- Husky : Husky makes Git hooks simpler to aid its adoption and thus prevent bad code from being pushed to central repository. Instead of expecting your developer to run your ESLint before they commit their changes, you are better off with this being done automatically at the earliest. The earliest that could be here is when the developer commits his code changes to his local branch. You could write a pre-commit Git-hook that gets executed before the commit and successfully commits the changes only if there are no linting errors. This is where Husky comes to the rescue. By installing it as part of your project dependency, you simply configure the Git-hook like below in your package.json file:
- Lint-Staged : As developer you have this crazy attitude to further your productivity. You wouldn't want to waste your precious time running through the linting process for your entire project repository for every commit of yours when you have only changed a few files at best for the intended commit. You feel better off executing the lint over the modified files that you are about to commit than the entire project as is automated. Lint-Staged comes to aid you and the automation here. With this module, only files of configured pattern that are modified by you are tested against by the linter instead of the entire project source code.
Below is a sample package.json file configuration where you see how the 3 musketeers are put together for your enhanced productivity:
Bingo!, with just that, you now have much more time to waste elsewhere like on Facebook, Hacker News, Reddit, Quora, Yahoo News and others..without compromising on the code quality.