⚙️ ESLint, Prettier & Husky: Full Integration (TypeScript + Next.js)

A complete step-by-step guide to integrating ESLint, Prettier, and Husky in a project using TypeScript and Next.js.

---

📦 Step 1: Install Dependencies

1. Remove all eslint & prettier connected packages you already have installed (eslint-plugin-, eslint-config-, eslint-parser*, and eslint & prettier themselves) due to possible installation conflicts with eslint-config-jejolare package.

2. Install all required packages:

npm i -D eslint-config-jejolare husky lint-staged

---

🛠️ Step 2: Configuration Files

.eslintrc.cjs

module.exports = {
  // Or 'jejolare/backend' for Node.js app
  extends: ['jejolare/frontend'],

  // This is needed only if you use TypeScript
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json',
      },
    },
  },
};

---

.eslintignore

submodules/
node_modules/

dist/
build/
.next/

*.log
*.tmp
.temp/
migrations/

public/
static/

.vscode/
.idea/

.env*

---

prettier.config.mjs

/** @type {import("prettier").Config} */
import prettierConfig from 'eslint-config-jejolare/prettier';

export default prettierConfig;

---

.prettierignore

node_modules
build
dist
coverage
.next
.env
*.lock
submodules/
migrations/

---

🧾 Step 3: Set Up Husky and Pre-commit Hook

Initialize Husky

npx husky

Add prepare script to package.json

"scripts": {
  "prepare": "husky"
}

Create .husky/pre-commit and add:

#!/bin/sh

npx lint-staged

---

Configure lint-staged in package.json

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

---

Useful Scripts in package.json

"scripts": {
  "format": "prettier --write .",
  "format:check": "prettier --check .",
  "eslint": "eslint . --ext .js,.ts,.tsx,.jsx,.cjs,.mjs --fix"
}

---

✅ Done!

Now, every commit will automatically run ESLint and Prettier. Your code will be linted and formatted before entering the repository.