Configuring ESLint, Prettier, and Husky for Team Projects

Introduction

Integrating ESLint, Prettier, and Husky ensures consistent code quality with automated checks on each commit and CI pipeline.

Prerequisites

• Node.js >=14
• Git repository

Step 1: Install Dependencies

pnpm add -D eslint prettier husky lint-staged
pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-config-prettier eslint-plugin-prettier

Step 2: Configure ESLint

Create .eslintrc.js:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  env: {
    node: true,
    es6: true,
    jest: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'import', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'import/order': ['error', { 'newlines-between': 'always' }],
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'no-console': 'warn',
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

Step 3: Configure Prettier

Create prettier.config.js:

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  arrowParens: 'always',
};

Step 4: Configure Husky and lint-staged

Install Husky and initialize:

pnpm husky install
pnpm husky add .husky/pre-commit "pnpm lint-staged"

Add to package.json:

"lint-staged": {
  "*.+(js|ts|tsx|jsx)": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.json": [
    "prettier --write"
  ],
  "*.md": [
    "prettier --write"
  ]
}

Step 5: CI Configuration

In GitHub Actions:

- name: Install dependencies
  run: pnpm install
- name: Lint and format check
  run: |
    pnpm eslint . --max-warnings=0
    pnpm prettier --check .
- name: Commit auto-fixes
  run: |
    git diff --exit-code || (
      git config user.name 'github-actions'
      git config user.email 'actions@github.com'
      git add .
      git commit -m 'chore: apply lint and format fixes'
      git push
    )

Step 6: Editor Integration

• Install ESLint and Prettier extensions in VSCode.
• Enable auto-format on save.

Summary

ESLint, Prettier, and Husky automate code quality checks and consistent formatting, enforcing team standards on every commit and CI run.