0Pricing
TypeScript Academy · Lekcja

Integracja z Prettierem i konflikty reguł

Integracja Prettiera z ESLint, unikanie zduplikowanych reguł oraz rozwiązywanie konfliktów między regułami stylu i logiki

Integracja z Prettierem i konflikty reguł to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Wprowadzenie

Cel: Połączyć Prettier (formatowanie) z ESLint (logika i styl) bez konfliktów.

Instalowanie

Zainstaluj Prettier oraz wtyczki i konfiguracje ESLint, aby płynnie je zintegrować.

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

Konfiguracja Prettier

Prettier ma własny plik konfiguracyjny. Używaj go do opcji dotyczących wyłącznie formatowania (cudzysłowy, średniki, długość wiersza).

// .prettierrc.json
{
  "semi": false,
  "singleQuote": true
}

Integracja konfiguracji

Dodaj plugin:prettier/recommended do rozszerzeń ESLint. Zawiera ona eslint-config-prettier i eslint-plugin-prettier.

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

Przykład konfliktu

Bez odpowiedniej konfiguracji ESLint i Prettier mogą się nie zgadzać (np. w kwestii średników). Konfiguracja wyłącza sprzeczne reguły ESLint.

// demo.ts
const msg = "hi"
console.log(msg)

// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettier

Uruchamianie kontroli

Uruchamiaj ESLint do sprawdzania logiki i stylu, a Prettier do formatowania. Można również zintegrować oba narzędzia z edytorem.

npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"

Pytanie

Szybkie sprawdzenie: Co robi eslint-config-prettier?

Podsumowanie

Podsumowanie: Zainstaluj Prettier + konfiguracje, dodaj je do rozszerzeń ESLint, wyłącz sprzeczne reguły i uruchamiaj oba narzędzia, aby zachować spójność.

Często zadawane pytania

Czy lekcja „Integracja z Prettierem i konflikty reguł” jest bezpłatna?

Tak — pełny tekst „Integracja z Prettierem i konflikty reguł” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Integracja z Prettierem i konflikty reguł”?

Integracja Prettiera z ESLint, unikanie zduplikowanych reguł oraz rozwiązywanie konfliktów między regułami stylu i logiki Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Integracja z Prettierem i konflikty reguł”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. ESLint + @typescript-eslint
  2. Integracja z Prettierem i konflikty reguł
  3. Popularne zestawy reguł stosowane w praktyce
← Powrót do TypeScript Academy