πŸ“‹ Cheat Sheets
Β· 1 min read

The ESLint + Prettier Config That Ends All Arguments β€” Copy It


Every team argues about formatting. This config ends it.

Install everything

npm install -D eslint prettier eslint-config-prettier eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser

ESLint config

Create eslint.config.js (flat config, ESLint 9+):

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

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  prettier,
  {
    plugins: { import: importPlugin },
    rules: {
      "no-console": "warn",
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/no-explicit-any": "warn",
      "import/order": [
        "error",
        {
          groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
          "newlines-between": "always",
          alphabetize: { order: "asc" },
        },
      ],
    },
  },
  {
    ignores: ["dist/", "node_modules/", ".next/", "coverage/"],
  },
];

Prettier config

Create .prettierrc:

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

Package.json scripts

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

VS Code settings

Create .vscode/settings.json so it auto-formats on save:

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

What this gives you

  • Prettier handles formatting β€” tabs, quotes, semicolons, line width
  • ESLint handles code quality β€” unused vars, any types, import order
  • No conflicts β€” eslint-config-prettier disables all ESLint rules that clash with Prettier
  • Auto-fix on save β€” VS Code runs both on every save
  • Sorted imports β€” automatically grouped and alphabetized

Run npm run lint:fix && npm run format once to fix your entire codebase. Done arguing.

Related: What is TypeScript

πŸ“˜