ESLint + Prettier (standard zespołu)#

We froncie ZEUS o stylu nie dyskutujemy — robi to za nas tooling. Podział ról jest prosty: Prettier formatuje, ESLint pilnuje jakości i błędów. Razem dają jednolity, bezpieczny kod bez sporów na review.

Prettier — tylko formatowanie#

Prettier zajmuje się wyglądem: cudzysłowy, średniki, łamanie linii, wcięcia. Nie ma reguł logicznych.

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "all"
}

// przed — ręcznie, niespójnie
const probe={id:'dc01',host : "dc01.corp",forest:'corp'}

// po `prettier --write`
const probe = { id: "dc01", host: "dc01.corp", forest: "corp" };

Standard ProfessNet: printWidth: 100, trailingComma: "all". Prettier działa na save w edytorze i jako prettier --check w CI.

ESLint — jakość i błędy#

ESLint łapie realne problemy: nieużywane zmienne, brakujące zależności hooków, any, niebezpieczne wzorce. Używamy flat config (eslint.config.mjs).

import js from "@eslint/js";
import ts from "typescript-eslint";

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommendedTypeChecked,
  {
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-floating-promises": "error",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
);

Standard ProfessNet: no-floating-promises jest u nas błędem — każdy Promise musi być await-owany albo świadomie oznaczony void. To eliminuje całą klasę cichych awarii async.

Reguły React / Next.js#

Doinstalowujemy plugin dla hooków i Next.js:

import reactHooks from "eslint-plugin-react-hooks";

export default ts.config({
  plugins: { "react-hooks": reactHooks },
  rules: {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
});

Dlaczego Prettier i ESLint razem, nie osobno#

Kiedyś ESLint formatował też styl, co prowadziło do konfliktów z Prettierem. Dziś rozdzielamy odpowiedzialność — ESLint nie zajmuje się formatowaniem.

Narzędzie	Odpowiada za	Przykład
Prettier	wygląd kodu	wcięcia, cudzysłowy, łamanie linii
ESLint	poprawność	nieużyte zmienne, any, floating promises

Skrypty i CI#

{
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --max-warnings=0",
    "typecheck": "tsc --noEmit"
  }
}

npm run format && npm run lint && npm run typecheck

Wskazówka: --max-warnings=0 w CI oznacza, że nawet ostrzeżenia blokują merge. Dzięki temu warningi nie kumulują się latami.

---

Prettier formatuje, ESLint pilnuje jakości, oba odpalają się na save i w CI. Review skupia się wtedy na logice i architekturze, a nie na średnikach.