Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим Prettier відрізняється від ESLint?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Різниця між **Prettier** і **ESLint** у тому, що вони вирішують *різні завдання*, навіть якщо обидва пов'язані зі "стилем коду": Prettier автоматично форматує код, а ESLint шукає помилки і погані практики. **Ключове:** Prettier - косметика, ESLint - діагностика.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняРізниця між **Prettier** і **ESLint** у тому, що вони вирішують *різні завдання*, навіть якщо обидва пов'язані зі "стилем коду" - і їх часто використовують **разом**, а не замість одне одного. --- ### **Головна відмінність в одному реченні** | Інструмент | Роль | |---|---| | **Prettier** | *Форматує код автоматично* (відступи, лапки, переноси рядків, крапки з комою, дужки - зовнішній вигляд коду). | | **ESLint** | *Знаходить помилки і погані практики в коді* (логіка, потенційні баги, порушення правил мови і стилю). | --- ### **Що конкретно робить Prettier** Prettier відповідає за *красу і єдиний стиль*. Він: - ставить або прибирає `;` - обирає один стиль лапок `'` або `"` - форматує відступи - переносить довгі рядки - розставляє пробіли - форматує JSX, HTML, JSON - робить код візуально єдиним у всьому проєкті Його філософія - **жодних суперечок про стиль**, інструмент усе вирішує сам. --- ### **Що конкретно робить ESLint** ESLint відповідає за *якість коду і можливі помилки*. Він: - ловить небезпечні конструкції та помилки - не дає використовувати неоголошені змінні - попереджає про "висячі" проміси - забороняє мертвий код - стежить за кращими практиками (наприклад, `===` замість `==`) - налаштовує правила для стилю і логіки - може навіть переписувати частини коду (auto-fix) Його завдання - **усунути баги і підтримувати стандарти якості**. --- ### **Приклад для наочності** Є такий код: ```js const name ="John" if(name == "John"){console.log("hi")} ``` **Prettier виправить його так:** ```js const name = "John"; if (name == "John") { console.log("hi"); } ``` **ESLint скаже:** ```javascript 1. '==' замінити на '===' 2. Можливо, варто використати const/let/var правильно 3. Перевірити зайві пробіли або мертвий код ``` --- ### **Чому їх ставлять разом** Тому що схема ідеальна: | Інструмент | Робить проєкт | |---|---| | **Prettier** | Красивим і одноманітним | | **ESLint** | Безпечним, логічним і якісним | Зазвичай використовують ESLint для логіки і помилок, а всі правила про форматування **вимикають в ESLint**, залишаючи їх Prettier, щоб інструменти не конфліктували. --- ### **Підсумок** | Prettier | ESLint | |---|---| | Форматування | Логіка і якість | | Краса | Безпека | | Не шукає помилки | Шукає помилки | | Автоформат | Аналіз коду |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.