Линтеры и форматтеры в фронтенде: ESLint, Stylelint и Prettier без боли

Описание

✏️ Разбираемся, как настраивать линтеры и форматтеры во фронтенде без боли и конфликтов. Подключаем ESLint для анализа JavaScript-кода, настраиваем Stylelint для проверки CSS, и добавляем Prettier для автоматического форматирования. Пошагово устанавливаем, настраиваем конфиг и дружим его с WebStorm. Изучаем разницу между линтером и форматтером, учимся писать собственные правила и запускать всё одной командой. Разбираемся, как объединить инструменты в связку и избежать конфликтов между Prettier и ESLint. Разбираем типовые ошибки и показываем, как они автоматически исправляются. Завершаем видео сборкой универсального скрипта lint:fix для полного порядка в коде.

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:38 | Что такое линтер
▶ 01:09 | Чем линтер отличается от форматтера
▶ 02:02 | ESLint — установка и настройка
▶ 06:19 | ESLint — расширение конфигурации
▶ 09:12 | Stylelint — линтер для стилей
▶ 09:48 | Stylelint — установка и настройка
▶ 13:29 | Prettier — автоформаттер кода
▶ 14:06 | Prettier — установка и настройка
▶ 15:14 | Prettier — как запускать
▶ 16:15 | Как работают вместе: Prettier + ESLint + Stylelint
▶ 18:50 | Упрощение команд — чтобы не забывать, что запускать
▶ 21:49 | Заключение

📚 Ссылки из видео:
➖ ESLint все правила: https://eslint.org/docs/latest/rules/
➖ Stlylelint начальная кофигурация: https://stylelint.io/user-guide/get-started/
➖ Stylelint все правила: https://stylelint.io/user-guide/rules/
➖ Prettier все правила: https://prettier.io/docs/options
➖ Код из видео: https://github.com/aleksanderlamkov/linters-formatters

🧑💻 Основной телеграм-канал:
https://t.me/AleksanderLamkov

💬 Коммьюнити-чат в телеграме (помощь новичкам):
https://t.me/FriendlyFrontend

❤️ Boosty (поддержать автора):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h
🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz
🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL
🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV
🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w
⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3
⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg
🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315

#frontend #фронтенд #eslint