Automatically Format your code on Git Commit using Husky, ESLint, Prettier in 9 minutes

The page explains how to automate formatting on Git commit so a project keeps a consistent code style. It uses Husky, ESLint, Prettier, and lint-staged, with setup split into package installation, ESLint and Prettier config, lint-staged rules, and a Husky pre-commit hook.

Reading notes

#

• Install Husky, ESLint, Prettier, and lint-staged as dev dependencies.
• Initialize ESLint with npx eslint --init and use or copy the generated .eslintrc.json.
• Add a .prettierrc.json file in the project root with formatting options such as singleQuote, semi, trailingComma, printWidth, and tabWidth.
• Add a .prettierignore file to skip files and folders such as package-lock.json, yarn.lock, and node_modules.
• Add lint-staged settings in package.json so staged .js, .jsx, and .json files run eslint . --fix and prettier --write ..
• Add Husky scripts and a pre-commit hook in package.json, then run the configure-husky script.
• After committing changes, the setup formats code automatically and keeps the style consistent.