Konfiguracja Prettier i ESLint
Dodaj Prettier do automatycznego formatowania i ESLint do wykrywania błędów, skonfiguruj oba narzędzia i zintegruj je z procesem formatowania przy zapisie.
Konfiguracja Prettier i ESLint to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego automatyzować styl kodu?
Ręczne dyskusje na temat formatowania kodu marnują czas zespołu. Prettier automatycznie formatuje kod według spójnego stylu. ESLint wykrywa błędy i wymusza dobre praktyki. Razem eliminują całe kategorie uwag w przeglądach kodu.
Instalowanie Prettier
Zainstaluj Prettier jako zależność deweloperską, utwórz plik konfiguracyjny i dodaj skrypt formatowania do package.json. Prettier działa bez konfiguracji — wartości domyślne są rozsądne — ale można je dostosować.
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}Integracja Prettier z VSCode
Zainstaluj rozszerzenie Prettier - Code Formatter. Następnie ustaw je jako domyślny formater i włącz formatOnSave w ustawieniach. Od tej pory Prettier będzie uruchamiany przy każdym zapisie pliku.
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}Instalowanie ESLint
Zainstaluj ESLint i zainicjalizuj go za pomocą npm init @eslint/config. Ten kreator pomaga wybrać środowisko (przeglądarka/node), system modułów i obsługę TypeScriptu. Generuje plik eslint.config.js.
npm install --save-dev eslint
npx eslint --init
# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.jsPrzykład konfiguracji ESLint
Prosta płaska konfiguracja ESLint dla przeglądarkowego projektu JavaScript. Reguły mogą mieć poziom „error”, „warn” lub „off”. Warto rozszerzać konfiguracje współdzielone, takie jak zalecana konfiguracja @eslint/js, aby uzyskać solidną bazę.
// eslint.config.js
import js from '@eslint/js';
export default [
js.configs.recommended,
{
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'eqeqeq': 'error'
}
}
];ESLint dla TypeScriptu
W projektach TypeScript dodaj typescript-eslint, aby wykrywać problemy specyficzne dla TypeScriptu: niebezpieczne użycie any, brakujące typy zwracane i nieprawidłowe użycie Promises.
npm install --save-dev typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended
);Prettier i ESLint razem
ESLint zawiera reguły formatowania, które kolidują z Prettierem. Użyj eslint-config-prettier, aby je wyłączyć i pozwolić Prettierowi zajmować się całym formatowaniem, a ESLintowi — wyłącznie jakością kodu.
npm install --save-dev eslint-config-prettier
// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettierConfig // disables ESLint formatting rules
];.eslintignore i .prettierignore
Wskaż narzędziom, które pliki mają pomijać. Plik .eslintignore używa składni gitignore. Zwykle należy ignorować node_modules, dist i pliki generowane.
# .eslintignore
node_modules
dist
.next
coverageSkrypty npm do lintowania
Dodaj skrypty lint i format do package.json, aby CI i członkowie zespołu mogli uruchamiać je w spójny sposób.
{
"scripts": {
"lint": "eslint src --ext .js,.ts,.tsx",
"lint:fix": "eslint src --fix",
"format": "prettier --write src",
"format:check": "prettier --check src"
}
}lint-staged i husky w hookach przed zatwierdzeniem
Użyj husky i lint-staged, aby przed każdym zatwierdzeniem w git automatycznie lintować i formatować tylko pliki znajdujące się w obszarze przechowalni. Zapobiega to trafianiu niesformatowanego lub wadliwego kodu do repozytorium.
npm install --save-dev husky lint-staged
npx husky init
# package.json:
"lint-staged": {
"*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,json,md}": "prettier --write"
}EditorConfig zapewniający spójność bazową
Plik .editorconfig wymusza podstawowe ustawienia edytora (styl wcięć, zakończenia wierszy) we wszystkich edytorach i IDE, niezależnie od używanych wtyczek. Dodaj go obok konfiguracji Prettier.
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = trueSzybkie sprawdzenie
Dlaczego należy dodać eslint-config-prettier do konfiguracji ESLint, która korzysta również z Prettier?
Podsumowanie: Prettier i ESLint
Prettier automatycznie formatuje kod przy zapisie za pośrednictwem rozszerzenia VSCode. ESLint wykrywa błędy i naruszenia stylu. Użyj eslint-config-prettier, aby uniknąć konfliktów. Dodaj lint-staged i husky, aby wymuszać sprawdzanie przed zatwierdzeniem. Spójne narzędzia eliminują dyskusje o formatowaniu i wykrywają błędy, zanim kod trafi do użytkowników.
Często zadawane pytania
Czy lekcja „Konfiguracja Prettier i ESLint” jest bezpłatna?
Tak — pełny tekst „Konfiguracja Prettier i ESLint” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Konfiguracja Prettier i ESLint”?
Dodaj Prettier do automatycznego formatowania i ESLint do wykrywania błędów, skonfiguruj oba narzędzia i zintegruj je z procesem formatowania przy zapisie. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.
Ile czasu zajmuje lekcja „Konfiguracja Prettier i ESLint”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Chrome DevTools: Elements, Console, Network
- VSCode: rozszerzenia, Emmet i skróty
- Konfiguracja Prettier i ESLint
- Zgodność przeglądarek i caniuse.com