Code Quality: ESLint, Prettier & Hooks

High-quality code isn't just about logic—it's about consistency, readability, and early error detection. Build tools allow us to enforce these standards automatically.

🔍 Static Analysis with ESLint

ESLint analyzes your code without running it to find potential bugs and enforce coding patterns.

• Catch Bugs: Finds unused variables, missing semicolons, or undefined functions.
• Enforce Style: Ensures your team uses single quotes, specific spacing, or ES6 features.

# Initialize ESLint in your project
npm init @eslint/config

✨ Automated Formatting with Prettier

While ESLint focuses on code logic, Prettier focuses on "look and feel." It automatically reformats your code to be perfectly consistent.

[!TIP] ESLint vs Prettier

• ESLint: "Is my code correct?" (Logic)
• Prettier: "Is my code pretty?" (Style) Use them together for the best results.

🪝 Git Hooks with Husky

Even with tools installed, developers might forget to run them. Husky solves this by running your scripts automatically at key Git stages.

The "Pre-Commit" Hook

This ensures that no broken code ever enters your repository.

// package.json
"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm test"
  }
}

If the linter finds an error or a test fails, Git will block the commit until the developer fixes the issue.

💡 Practical masterclass: The Quality Pipeline

A professional JS build pipeline usually follows this flow:

1. Developer writes code.
2. Husky triggers Prettier to format.
3. Husky triggers ESLint to check for bugs.
4. Husky triggers Jest to run unit tests.
5. Commit is allowed only if everything passes.