🎨 ESLint, Prettier, Husky

Welcome to the world of modern JavaScript development tools! Today we'll explore how to automate code formatting, enforce coding rules, and set up pre-commit hooks using ESLint, Prettier, and Husky. These tools are essential for maintaining a clean, consistent, and high-quality codebase.

💡 Why Code Formatting Matters

Consistent code formatting is crucial for collaboration and readability. It ensures that every developer working on the project contributes code in a uniform style, reducing cognitive load when reviewing changes.

💡 What You'll Learn Today

• How to set up and configure ESLint for code rule enforcement
• Integrating Prettier for automatic code formatting
• Setting up Husky pre-commit hooks to automate tasks before commits
• Best practices for maintaining a clean codebase

✅ Getting Started with ESLint

ESLint is a pluggable linting utility for JavaScript and TypeScript. It helps identify problematic patterns in your code and enforces style consistency.

npm install eslint --save-dev
npx eslint --init

This will create a .eslintrc.js configuration file in your project root. Common rules include enforcing semicolons, proper indentation, and disallowing dangerous patterns.

✅ ESLint Configuration Example

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  rules: {
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always']
  }
}

✅ Integrating Prettier for Code Formatting

Prettier is a popular code formatter that enforces consistent formatting with minimal configuration. It supports multiple languages and integrates well with other tools.

npm install prettier --save-dev
npx prettier --config

Create a .prettierrc file to configure formatting rules:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

✅ Husky: Pre-Commit Hooks Made Easy

Husky is a tool that simplifies setting up and managing git hooks. It allows you to run tasks before committing, ensuring code quality.

npm install husky --save-dev
npx husky init

Add a pre-commit hook that runs linters and formatters:

husky add .husky/pre-commit "
npm run lint && npm run format
"

💡 Best Practices for a Clean Codebase

• Always commit clean code - let Husky handle the enforcement
• Keep your linting rules consistent across projects
• Use Prettier's default settings unless absolutely necessary to customize
• Regularly review and update your tool configurations

❌ Common Mistakes to Avoid

• Don't ignore Husky errors - they are there for a reason
• Don't skip the configuration step for ESLint and Prettier
• Avoid using too many custom rules - keep it simple
• Don't forget to add your husky scripts to package.json

💡 Real-World Applications

These tools are used in production by companies like Facebook, Google, and Netflix to maintain code quality. They are essential for any serious JavaScript project.

🔥 Nodemon & Hot Reloading

Nodemon is an essential tool for Node.js developers that automatically restarts your server when file changes are detected. It significantly improves your development workflow by eliminating manual restarts, allowing you to focus on coding.

💡 Key Features of Nodemon

• Automatic server restarts when files are changed
• Support for watching specific file extensions
• Integration with environment variables
• Command-line interface customization

💡 Installation & Setup

Install nodemon globally or locally depending on your project needs.

npm install -g nodemon
# or
npm install nodemon --save-dev

Modify your package.json scripts to use nodemon:

"scripts": {
  "start": "nodemon src/index.js"
}

💡 Environment-based Configurations

Create environment-specific configuration files like .env and use them with dotenv.

# Example .env
PORT=3000
NODE_ENV=development

💡 Hot Reloading with ts-node-dev

For TypeScript projects, use ts-node-dev for hot reloading capabilities.

npm install -D ts-node-dev
# Then in package.json
"scripts": {
  "dev": "ts-node-dev src/index.ts"
}

💡 Best Practices

• Always use environment variables for configuration
• Keep your package.json scripts clean and maintainable
• Use relative paths whenever possible
• Consider using ignore files to prevent unnecessary restarts

❌ Common Mistakes to Avoid

• Don't run nodemon in production environments
• Avoid using absolute paths in scripts
• Don't ignore error handling during development
• Don't forget to update dependencies regularly

💡 Real World Applications

Nodemon is widely used in Continuous Integration/CD pipelines and development environments.

# Example CI script using nodemon
"scripts": {
  "ci": "husky ci && lint-staged && nodemon src/test.js"
}

🧪 Unit Testing with Jest & Supertest