Every web developer that writes in NodeJS/React/NextJS/Angular/Vite should use ESLint, Prettier, and Husky. You must be familiar already with ESLint and maybe you have heard about the other two before but if not, I'm going to do some order in your head about each one and how you can use it and implement it in your own project. So let's get started.
Adding ESLint
ESLint is a straightforward linting tool that helps identify problematic patterns in your code before you build your code and also on the way while you're coding.
As a developer, one of my goals is to write better code with minimal errors to save time on debugging and failed builds. One way to get better with code syntax and get better coding is using ESLint. You can find problems quickly, fix problems automatically and you can configure it for yourself for how you like the code to be.
One quick way to add ESLint to your project is simply running the following line in your terminal:
npx eslint --init
After running this command you'd be asked a couple of questions and when it's done it'll install for you all the packages you need automatically and generate a .eslintrc.json file in your root folder.
You can add plugins to your ESLint config file and you can change the rules to how you like to write your code.
Adding Prettier
Prettier is a code formatter. When you add Prettier to your code you can integrate it with your editor and while you're saving the code will automatically format itself to your preferences.
It saves time in teams because it enforces the same code style and does it automatically so you don't have to argue each time in a code review that you forgot a semicolon at the end of a line.
In order to add Prettier to your project you need to install it via npm:
npm install --save-dev --save-exact prettier
After you add it to your project you can go into your editor's settings and change it to run Prettier so it can format your code each time you're saving a file. Also, you can add it to format your project each time you run a build or something like that.
You can use this line to format your code:
npx prettier --write .
Adding Husky
I guess if you come so far and you know more than coding, then you know about git. Husky is a tool that makes it easier to write git hooks and helps with your code flow.
For example, you can create a commit git hook that each time you do the command git commit then it will run tests, lint your code, lint your commit messages, and more! So let's see how we do that:
First, let's add Husky to our project:
npm install husky --save-dev
Second, enable git hooks:
npx husky install
Now you can create your first hook! Let's create a pre-commit hook:
npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit
After you run these commands you'll see a folder with the name .husky being created at the root of your project folder and it's the same pre-commit hook that we have created. You can now run git commit to see how it's working 😄
I really recommend to you use these three tools and you'll see how much your workflow will be improved and also see how you will write better code.
I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)
Top comments (1)
Great tutorial!