How to Automate ESLint & Prettier with Git Hooks Easily

If you find this story twisty and fun, feel free to like and share! 🌟

---

I’m standing before a colorful Rubik’s Cube, a puzzle waiting to be solved. Each twist and turn represents a step in my coding journey. I want my code to be as perfect as a completed Rubik’s Cube, with every side flawlessly aligned. That’s where ESLint and Prettier come in, my trusty companions on this quest.

As I hold the cube, I realize that ESLint is like my guiding hand, ensuring I don’t make those awkward moves that could throw the whole puzzle off balance. It keeps me in line, whispering reminders to keep my syntax clean and errors at bay. ESLint is the patient mentor, always watching, always guiding.

Next to ESLint is Prettier, the artist in this partnership. Prettier is like my eye for symmetry, making sure each side of the cube looks just right. It smooths out the rough edges, ensuring every color is in its place, every line of code neat and beautiful. With Prettier, my cube — my code — isn’t just functional; it’s a work of art.

But here’s the magic: I want this duo to work even when I’m not looking. That’s where the pre-commit hook comes in. It’s like setting an automatic solver on the Rubik’s Cube. Before I snap the pieces into place and call it done, the hook leaps into action, running ESLint and Prettier. It checks my every move, ensuring I’ve not missed a beat.

I configure this behind the scenes using a tool called Husky. Husky links my cube-solving process to a pre-commit hook. Every time I’m about to declare my puzzle complete — or my code ready to commit — Husky steps in. It runs ESLint and Prettier automatically, making sure everything aligns perfectly, just like a finished Rubik’s Cube.

---

First, I needed to install the tools that would help keep my code as tidy as my cube. Using Node.js, I installed ESLint and Prettier:

npm install eslint prettier --save-dev

Next, I set up ESLint by creating a configuration file. This file was like the blueprint for my cube-solving strategy, detailing how I wanted ESLint to guide me:

npx eslint --init

This command walked me through setting up my .eslintrc.json file, where I could define rules to keep my code in check. It’s like deciding the preferred methods for solving the cube’s layers.

With Prettier, the setup was just as simple. I added a configuration file named .prettierrc to ensure my code was consistently styled:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Then came the part where I needed to ensure these tools ran automatically before each commit. This was the pre-commit hook, my secret weapon for keeping my code cube-perfect. I turned to Husky, a tool designed to help with this precisely:

npm install husky --save-dev

Once installed, I initialized Husky:

npx husky install

I created a pre-commit hook to run ESLint and Prettier using a simple command:

npx husky add .husky/pre-commit "npx eslint . && npx prettier --write ."

This command ensured that every time I prepared to commit my changes, ESLint would check for errors, and Prettier would format my code. It was like having an automatic cube solver ready to make the final adjustments.

Key Takeaways:

• ESLint and Prettier: These are essential tools for maintaining clean and consistent code. ESLint acts as the guide, catching errors, while Prettier polishes the code’s aesthetic.
• Husky and Pre-commit Hooks: Husky automates the running of ESLint and Prettier, ensuring code quality is maintained before each commit, similar to setting an automatic solver for a Rubik’s Cube.
• Configuration: Setting up configuration files for ESLint and Prettier is like defining the rules for cube-solving, ensuring consistency and adherence to best practices.