Using Husky, Prettier, and ESLint Together in Projects

Introduction

• Aim: Improve code quality in industry or company projects
• Tools discussed:
  • Husky for enforcing coding standards
  • Prettier for code formatting
  • ESLint for linting code

Husky

• Husky performs checks during git commit
• Ensures consistent coding standards across the team
• Helps maintain clean and easy-to-debug code
• Commonly used in large projects

Prettier

• Formats code automatically on save
• Example:
  • Adds/removes spaces, formats objects, etc.
• Configuration:
  • Create .prettierrc.json or .prettierrc.js
  • Common properties:
    • trailingComma: Whether to add a comma in objects/arrays
    • tabWidth: Indentation size
    • semi: Whether to use semicolons
    • singleQuote: Whether to use single quotes

ESLint

• Linter tool for identifying problematic patterns
• Example rule (as of React v17): React import is optional
• Helps catch unused variables or imports

Step-by-Step Setup

Initial Setup

1. Create a simple project (e.g., VJs application)
2. Install Prettier extension for auto-formatting

Installing Husky

1. Install as dev dependency: npm install husky --save-dev
2. Initialize Husky after turning project into a git repository: git init git add . git commit -m "Initial commit" npm run prepare # added prepare script
3. Create a Husky commit hook to run Prettier and ESLint: npx husky add .husky/pre-commit "npx lint-staged"

Configuring Prettier

1. Create Prettier config file .prettierrc.json or .prettierrc.js: { "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true }

Lint-Staged

1. Install lint-staged as dev dependency: npm install lint-staged --save-dev
2. Add lint-staged configuration in package.json: "lint-staged": { "*.{js,jsx,ts,tsx,css,md}": [ "prettier --write", "eslint --fix" ] }

ESLint Setup

1. Run npm install eslint -D to install ESLint
2. Add ESLint config in .eslintrc.json or .eslintrc.js: { "extends": "react-app", "rules": { "no-unused-vars": "warn" } }
3. Add lint script to package.json: "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }

Running Commit Hooks

• Run Husky and lint-staged on commits to ensure code standards: git add . git commit -m "Commit message"

Common Commands for Setup

• Setup Husky:

  npx husky install npm set-script prepare "husky install"

• Add Prettier and ESLint hooks:

  npx husky add .husky/pre-commit "npx lint-staged"

• Configure lint-staged in package.json:

  "lint-staged": { "*.js": [ "eslint --fix", "prettier --write" ] }

Conclusion

• Following these steps ensures code quality during development
• Using Husky, Prettier, and ESLint together automates formatting and linting

Additional Resources

• Check my article linked in the video description for more details on ESLint configuration

Summary

• Husky: Ensures consistent code standards
• Prettier: Auto-formats code
• ESLint: Identifies and fixes coding issues

Helpful Tips

• Install related VS Code extensions for immediate feedback on code quality issues