Линтеры и форматтеры в фронтенде: 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
✏️ Разбираемся, как настраивать линтеры и форматтеры во фронтенде без боли и конфликтов. Подключаем 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