ESLint + Prettier — Set Up Code Quality in 15 Minutes

Every professional team runs both. Knowing the difference and having them in your projects is a hire-signal.

The division of labor

• Prettier = formatting (quotes, spacing, line breaks) — zero decisions, just consistency
• ESLint = correctness (unused vars, undefined references, buggy patterns) — actual bug prevention

Setup

npm i -D eslint prettier @eslint/js

// eslint.config.js (flat config — the modern format)
import js from "@eslint/js";
export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "warn",
      "eqeqeq": "error",            // force === (see the coercion post!)
      "no-console": "off",
    },
  },
];

// .prettierrc
{ "singleQuote": true, "semi": true, "printWidth": 100 }

VS Code integration (the part that matters)

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }
}

Now every save formats and auto-fixes. The classic conflict (ESLint arguing with Prettier about style) is solved by NOT enabling ESLint's formatting rules — recommended config + Prettier coexist cleanly.

Add "lint": "eslint ." to package.json scripts and run it in CI — that's the professional loop end-to-end.