Jak skonfigurować ESLint i Prettier w projekcie React TypeScript w 2026 roku

Jak skonfigurować ESLint i Prettier w projekcie React TypeScript 2026

W świecie programowania, gdzie każdy projekt to potencjalne dzieło sztuki, jakość kodu jest absolutną podstawą. Nie chodzi tylko o to, żeby aplikacja działała – równie ważne jest, by była czytelna, łatwa w utrzymaniu i skalowalna. Właśnie tutaj z pomocą przychodzą narzędzia takie jak ESLint i Prettier. Jeśli zastanawiasz się, jak skonfigurować ESLint i Prettier w projekcie React TypeScript 2026, jesteś we właściwym miejscu. Ten poradnik przeprowadzi Cię krok po kroku przez cały proces.

Jeśli kiedykolwiek pracowałeś w zespole, wiesz, jak frustrujące może być przeglądanie kodu, gdzie każdy programista stosuje inną konwencję. Jeden używa spacji, drugi tabulatorów; jeden stawia średniki, inny je pomija. To jak próba przeczytania książki, w której co drugie zdanie napisane jest inną czcionką i w innym języku. Chaos w kodzie szybko przekłada się na większą liczbę błędów i trudniejsze code review.

ESLint i Prettier pełnią rolę osobistych strażników stylu i jakości, dbając o to, by Twój kod zawsze wyglądał jednolicie i spełniał dobre praktyki. Zyskujesz nie tylko spójność formatowania, ale też automatyczne wykrywanie wielu potencjalnych błędów, zanim trafią na produkcję. To szczególnie ważne w projektach React z TypeScriptem, gdzie typy i komponenty mogą szybko się rozrastać.

Połączenie tych dwóch narzędzi tworzy potężny duet, który automatyzuje pilnowanie zarówno jakości, jak i stylu kodu. Dzięki temu możesz skupić się na tym, co najważniejsze – tworzeniu funkcjonalności i architektury aplikacji, zamiast na ręcznym poprawianiu wcięć i średników. W kolejnych sekcjach zobaczysz, jak w praktyce skonfigurować cały zestaw w projekcie React TypeScript w 2026 roku.

Dlaczego konfiguracja ESLint i Prettier w React TypeScript 2026 jest tak ważna?

Wyobraź sobie budowę wieżowca. Czy każdy pracownik może stawiać ściany, jak mu się podoba, używając różnych materiałów i nie trzymając się żadnego planu? Oczywiście, że nie. W budownictwie, podobnie jak w programowaniu, niezbędne są standardy i zasady, które gwarantują bezpieczeństwo i przewidywalność. ESLint i Prettier to właśnie takie „normy budowlane” dla Twojego kodu.

ESLint jest statycznym analizatorem kodu, czyli linterem. Jego zadaniem jest identyfikowanie problematycznych wzorców, które mogą prowadzić do błędów, oraz egzekwowanie określonych zasad stylu. Możesz myśleć o nim jak o wnikliwym recenzencie, który wyłapuje literówki, błędy gramatyczne i stylistyczne, zanim tekst trafi do druku. W kontekście React TypeScript wykrywa on m.in. niezadeklarowane zmienne, niewykorzystane importy czy nieprawidłowe użycie hooków.

Prettier natomiast to formatter kodu, którego rola jest prostsza, ale równie kluczowa. Dba o spójne formatowanie – wcięcia, średniki, cudzysłowy, długość linii i inne szczegóły estetyczne. Dzięki niemu Twój kod zawsze jest ułożony i czytelny, niezależnie od indywidualnych przyzwyczajeń członków zespołu. Prettier nie ocenia logiki ani jakości, skupia się wyłącznie na wyglądzie kodu.

Połączenie ESLint i Prettier w jednym projekcie React z TypeScriptem zapewnia: - Spójny styl kodu w całym repozytorium. - Wcześnie wykrywane błędy, zanim dotrą do pull requestów. - Automatyczne poprawki wielu problemów, co skraca czas code review.

To fundament profesjonalnego workflow, szczególnie w większych zespołach i długoterminowych projektach frontendowych.

Krok 1: Inicjacja projektu React TypeScript

Na początek potrzebujesz działającego projektu React TypeScript. Jeśli już go masz, możesz przejść do kolejnego kroku. Jeżeli dopiero startujesz, w 2026 roku najczęściej wybieranym narzędziem jest Vite, choć w starszych projektach nadal spotkasz Create React App (CRA).

Tworzenie projektu z użyciem Vite

Vite jest ceniony za szybkość i prostotę konfiguracji. Aby utworzyć projekt React TypeScript:

npm create vite@latest my-react-ts-app -- --template react-ts
cd my-react-ts-app
npm install

Po instalacji możesz uruchomić aplikację komendą:

npm run dev

W przeglądarce zobaczysz bazową aplikację React TypeScript, gotową do dalszej konfiguracji.

Tworzenie projektu z użyciem Create React App

W starszych projektach może być używany Create React App. W takim przypadku inicjalizacja wygląda tak:

npx create-react-app my-react-ts-app --template typescript
cd my-react-ts-app
npm install

Aby sprawdzić, czy wszystko działa poprawnie, uruchom:

npm start

Na tym etapie masz już gotowy szkielet aplikacji React TypeScript, do którego w kolejnych krokach dodasz ESLint i Prettier oraz niezbędne integracje.

Krok 2: Instalacja i podstawowa konfiguracja ESLint

Kolejny etap to instalacja i konfiguracja ESLint tak, aby dobrze współpracował z Reactem i TypeScriptem. Będziesz potrzebować kilku pakietów, w tym parsera dla TypeScripta oraz wtyczek dla Reacta i hooków.

Instalacja ESLint i wtyczek

W katalogu projektu zainstaluj wymagane zależności deweloperskie:

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks

Te pakiety odpowiadają za: - eslint – podstawowy silnik lintera, - @typescript-eslint/eslint-plugin – reguły specyficzne dla TypeScripta, - @typescript-eslint/parser – parser rozumiejący składnię TypeScript, - eslint-plugin-react – reguły dedykowane kodowi React, - eslint-plugin-react-hooks – zasady poprawnego używania hooków.

Inicjalizacja konfiguracji ESLint

Następnie uruchom interaktywny kreator konfiguracji:

npx eslint --init

Sugerowane odpowiedzi w kreatorze to m.in.: - Use ESLint: To check syntax, find problems, and enforce code style - Modules: ES Modules (lub CommonJS w razie potrzeby) - Framework: React - TypeScript: Yes - Environment: Browser (i opcjonalnie Node) - Style guide: Airbnb (lub inny, np. Standard, Google) - Format config file: JavaScript

Po zakończeniu kreatora w katalogu głównym pojawi się plik .eslintrc.js. Upewnij się, że jego zawartość jest zbliżona do poniższego przykładu:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // Dodaj 'node: true' jeśli używasz np. Vite lub skryptów Node.js
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'airbnb', // Lub inny wybrany styl, np. 'standard', 'google'
    'airbnb/hooks', // Dodaj dla lepszego wsparcia hooków React
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json', // Ważne dla niektórych reguł TypeScript
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'react-hooks',
  ],
  rules: {
    'react/prop-types': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
    'arrow-body-style': ['error', 'as-needed'],
    'import/prefer-default-export': 'off',
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },
  settings: {
    react: {
      version: 'detect', // Automatycznie wykrywa wersję Reacta
    },
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

W sekcji rules możesz stopniowo dopasowywać reguły do swojego stylu pracy i wymagań zespołu. Styl airbnb jest dość rygorystyczny, dlatego nie wahaj się wyłączać lub łagodzić reguł, które nadmiernie utrudniają pracę.

Krok 3: Dodanie Prettier do projektu

Gdy ESLint jest już na miejscu, czas na Prettiera, czyli narzędzie, które zadba o jednolite formatowanie Twojego kodu. Konfiguracja jest prosta i sprowadza się do instalacji oraz utworzenia pliku konfiguracyjnego.

Instalacja Prettier

Zacznij od zainstalowania Prettiera jako zależności deweloperskiej:

npm install --save-dev prettier

Po instalacji możesz dodać własną konfigurację, aby dopasować formatowanie do preferencji zespołu.

Konfiguracja Prettier w pliku .prettierrc.js

W katalogu głównym utwórz plik .prettierrc.js i wypełnij go przykładową konfiguracją:

// .prettierrc.js
module.exports = {
  semi: true,              // Czy używać średników na końcu instrukcji
  trailingComma: 'all',    // Czy używać przecinków na końcu list w obiektach/tablicach
  singleQuote: true,       // Czy używać pojedynczych cudzysłowów zamiast podwójnych
  printWidth: 100,         // Maksymalna długość linii kodu
  tabWidth: 2,             // Ilość spacji na tabulator
  endOfLine: 'auto',       // Koniec linii (lf, crlf, auto)
  arrowParens: 'always',   // Nawiasy dla funkcji strzałkowych (np. (a) => a)
};

Dobrą praktyką jest również utworzenie pliku .prettierignore, aby wykluczyć z formatowania katalogi i pliki, które nie powinny być modyfikowane:

# .prettierignore
/node_modules
/build
/dist
.env
.env.*

Taka konfiguracja sprawi, że Prettier będzie działał spójnie w całym projekcie React TypeScript, bez ryzyka przypadkowej modyfikacji plików generowanych.

Krok 4: Integracja Prettier z ESLint

ESLint i Prettier mogą mieć sprzeczne reguły dotyczące formatowania. Aby uniknąć konfliktów, warto sprawić, by ESLint „oddał” kwestie formatowania Prettierowi. Służą do tego dodatkowe pakiety integracyjne.

Instalacja pakietów integracyjnych

Zainstaluj rozszerzenia, które połączą ESLint i Prettier:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Te pakiety odpowiadają za: - eslint-config-prettier – wyłącza reguły ESLinta kolidujące z Prettierem, - eslint-plugin-prettier – uruchamia Prettiera jako regułę ESLinta, raportując błędy formatowania.

Modyfikacja pliku .eslintrc.js

Aby zakończyć integrację, dodaj rozszerzenie Prettiera do sekcji extends na samym końcu:

// .eslintrc.js
module.exports = {
  // ...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'airbnb',
    'airbnb/hooks',
    // WAŻNE: 'plugin:prettier/recommended' musi być na samym końcu
    'plugin:prettier/recommended',
  ],
  // ...
  rules: {
    // ... Twoje reguły ...
    // 'prettier/prettier': 'error', // Włączone już przez plugin:prettier/recommended
  },
  // ...
};

Dzięki temu: - ESLint przestanie narzucać własne zasady formatowania, które mogłyby kłócić się z Prettierem. - Błędy formatowania wykrywane przez Prettiera będą widoczne jako błędy ESLinta, co ułatwia pracę w edytorze i CI.

To sprawia, że konfiguracja ESLint + Prettier w projekcie React TypeScript jest spójna i przewidywalna.

Krok 5: Skrypty w package.json – automatyzacja

Kiedy ESLint i Prettier są już skonfigurowane, warto dodać odpowiednie skrypty npm, by szybko uruchamiać lintowanie i formatowanie. Ułatwia to codzienną pracę i integrację z CI/CD.

Dodanie skryptów do package.json

Otwórz plik package.json i w sekcji "scripts" dodaj:

// package.json
{
  "name": "my-react-ts-app",
  "version": "0.1.0",
  // ...
  "scripts": {
    "start": "react-scripts start", // lub "vite" dla projektów Vite
    "build": "react-scripts build", // lub "vite build"
    "test": "react-scripts test",   // lub "vitest"
    "eject": "react-scripts eject", // tylko dla CRA
    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
    "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'"
  },
  // ...
}

Dzięki temu możesz: - uruchomić analizę kodu komendą npm run lint, - spróbować automatycznie naprawić problemy komendą npm run lint:fix, - sformatować pliki w src komendą npm run format.

Tak skonfigurowane skrypty świetnie sprawdzają się zarówno lokalnie, jak i w pipeline’ach CI, w których możesz blokować deployment w przypadku błędów lintingu.

Krok 6: Konfiguracja VS Code – formatowanie na bieżąco

Aby w pełni wykorzystać konfigurację ESLint i Prettier w projekcie React TypeScript, dobrze jest zintegrować je z VS Code. Dzięki temu błędy będą widoczne już podczas pisania, a formatowanie będzie działać automatycznie przy zapisie pliku.

Instalacja rozszerzeń w VS Code

W Marketplace VS Code wyszukaj i zainstaluj: - ESLint – rozszerzenie autorstwa Dirk Baeumer, - Prettier – Code formatter – rozszerzenie od Esben Petersen.

Rozszerzenia te zapewnią wsparcie dla lintingu i formatowania bezpośrednio w edytorze, w tym podkreślanie błędów i sugestie poprawek.

Ustawienia VS Code dla ESLint i Prettier

Następnie otwórz plik ustawień w formacie JSON (np. poprzez Ctrl+Shift+P → Open User Settings (JSON)) i dodaj:

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

Taka konfiguracja sprawia, że: - Prettier formatuje pliki przy każdym zapisie, - ESLint naprawia możliwe problemy (np. usuwanie nieużywanych importów), - podświetlane są zarówno błędy składniowe, jak i problemy ze stylem.

To ogromnie przyspiesza pracę w projektach React TypeScript i ogranicza liczbę „śmieciowych” commitów zawierających wyłącznie poprawki formatowania.

Krok 7: Pre-commit hooki z Husky i lint-staged

Jeśli chcesz mieć pewność, że żaden nieposprzątany kod nie trafi do repozytorium, warto dodać pre-commit hooki. Dzięki nim przed każdym commitem automatycznie uruchamiane będzie lintowanie i formatowanie tylko zmodyfikowanych plików.

Instalacja Husky i lint-staged

Najpierw zainstaluj narzędzia odpowiedzialne za integrację z Gitem:

npm install --save-dev husky lint-staged

• husky ułatwia zarządzanie hookami Gita,
• lint-staged umożliwia uruchamianie komend tylko na plikach dodanych do staging area.

Inicjalizacja Husky

Następnie zainicjuj Husky w projekcie:

npx husky init

Spowoduje to utworzenie katalogu .husky oraz przykładowego hooka pre-commit. Będziesz mógł go dostosować do swoich potrzeb.

Konfiguracja lint-staged w package.json

Otwórz package.json i dodaj sekcję lint-staged:

// package.json
{
  "name": "my-react-ts-app",
  // ...
  "scripts": {
    // ... Twoje skrypty ...
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,scss,md}": [
      "prettier --write"
    ]
  }
  // ...
}

Ta konfiguracja oznacza: - dla plików .js, .jsx, .ts, .tsx uruchamiany jest najpierw ESLint z --fix, a potem Prettier, - dla plików .json, .css, .scss, .md działa wyłącznie Prettier.

Dzięki temu commitowane są wyłącznie pliki zgodne z regułami lintingu i formatowania.

Dodanie hooka pre-commit

Na koniec zmodyfikuj plik .husky/pre-commit, aby wyglądał następująco:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Upewnij się, że plik ma prawa wykonywalne, np. za pomocą:

chmod +x .husky/pre-commit

Od tej chwili każde git commit w projekcie React TypeScript 2026 uruchomi lint-staged, a commit zostanie zablokowany, jeśli ESLint wykryje błędy, których nie da się automatycznie naprawić. To dodatkowa linia obrony jakości kodu, szczególnie przydatna w większych zespołach.

Podsumowanie

Konfiguracja ESLint i Prettier w projekcie React TypeScript 2026 to inwestycja, która zwraca się niemal natychmiast. Dzięki opisanym krokom: - zainicjowałeś projekt React TypeScript, - dodałeś i skonfigurowałeś ESLint wraz z wtyczkami dla Reacta i TypeScripta, - wdrożyłeś Prettiera oraz zintegrowałeś go z ESLintem, - dodałeś przydatne skrypty w package.json, - skonfigurowałeś VS Code do pracy z lintingiem i formatowaniem, - zabezpieczyłeś repozytorium pre-commit hookami z Husky i lint-staged.

W efekcie Twój kod jest bardziej spójny, czytelny i odporny na typowe błędy. Łatwiej go utrzymać, zreviewować i rozwijać nawet po wielu miesiącach. Wdrażając te praktyki już teraz, budujesz profesjonalny workflow, który pozwoli Ci tworzyć aplikacje React TypeScript na najwyższym poziomie również w kolejnych latach.