How to Set Up ESLint and Prettier in 2026: The Complete Guide

Why You Need Both

ESLint catches bugs and enforces code quality rules (unused variables, missing returns, type errors).

Prettier formats code consistently (indentation, quotes, semicolons, line length).

They solve different problems and work best together.

Quick Setup

1. Install Dependencies

npm install -D eslint prettier eslint-config-prettier

For TypeScript:

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Create ESLint Config

Create eslint.config.js (flat config — the new standard):

import js from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";
import tsparser from "@typescript-eslint/parser";
import prettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
    plugins: {
      "@typescript-eslint": tseslint,
    },
    rules: {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": "error",
      "no-console": "warn",
      "prefer-const": "error",
      "no-var": "error",
    },
  },
  prettier, // Must be last — disables formatting rules that conflict with Prettier
];

3. Create Prettier Config

Create .prettierrc:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

4. Add Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

5. VS Code Integration

Install extensions:

• ESLint (dbaeumer.vscode-eslint)
• Prettier (esbenp.prettier-vscode)

Add to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Framework-Specific Setup

Next.js

npm install -D eslint-config-next

Next.js includes ESLint config by default. Just add Prettier:

// eslint.config.js
import next from "eslint-config-next";
import prettier from "eslint-config-prettier";

export default [...next, prettier];

React (Vite)

npm install -D eslint-plugin-react eslint-plugin-react-hooks

Node.js / Express

npm install -D eslint-plugin-node

Common ESLint Rules

rules: {
  // Errors
  "no-unused-vars": "error",
  "no-undef": "error",
  "no-console": "warn",

  // Best practices
  "prefer-const": "error",
  "no-var": "error",
  "eqeqeq": "error",
  "no-eval": "error",
  "no-implied-eval": "error",

  // TypeScript
  "@typescript-eslint/no-explicit-any": "warn",
  "@typescript-eslint/no-unused-vars": "error",
  "@typescript-eslint/explicit-function-return-type": "off",
}

Prettier Options Explained

Option	Default	Recommended	Description
semi	true	true	Add semicolons
singleQuote	false	true (JS) / false (TS)	Use single quotes
tabWidth	2	2	Spaces per indent
trailingComma	"all"	"es5"	Trailing commas
printWidth	80	100	Max line length
bracketSpacing	true	true	Spaces in objects
arrowParens	"always"	"always"	Parens in arrow functions

Resolving Conflicts

The key rule: eslint-config-prettier must be the LAST config in your ESLint setup. It disables all ESLint rules that would conflict with Prettier.

// ✅ Correct — prettier is last
export default [js.configs.recommended, tsConfig, prettier];

// ❌ Wrong — prettier is not last
export default [js.configs.recommended, prettier, tsConfig];

Pre-commit Hooks

Run linting and formatting automatically before every commit:

npm install -D husky lint-staged
npx husky init

Add to package.json:

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

Related Tools

• JavaScript Formatter — Format JS code online
• TypeScript Formatter — Format TS code online
• JSON Formatter — Format config files
• .gitignore Generator — Include node_modules
• Git Commit Generator — Conventional commits