Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим ESLint відрізняється від Prettier?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**ESLint** і **Prettier** часто використовуються разом, але вирішують різні завдання: ESLint аналізує код на помилки й анти-патерни, а Prettier форматує оформлення коду. **Ключове:** ESLint відповідає за правильність коду, Prettier - за красу і одноманітність форматування.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняESLint і Prettier часто використовуються разом, але вони вирішують **різні завдання**, тому плутати їх не можна. --- ### **Основна відмінність** | Інструмент | За що відповідає | |---|---| | **ESLint** | Аналізує код на помилки, анти-патерни і порушення правил JavaScript/TypeScript | | **Prettier** | Форматує код (оформлення, пробіли, переноси, лапки тощо) | --- ### **Що робить ESLint** ESLint відповідає за **якість коду і логіку**. Він перевіряє: - невикористовувані змінні, - неправильні конструкції, - небезпечні практики, - відповідність код-стайлу (якщо правила задані), - потенційні баги. Приклад: ESLint знайде помилку: ```js const x = 10; console.log(y); // ESLint скаже, що y - не визначено ``` --- ### **Що робить Prettier** Prettier відповідає **виключно за стиль форматування**, а не за логіку. Він автоматично: - ставить однакові відступи, - розставляє коми, - форматує лапки, - переносить рядки, - додає/прибирає крапки з комою. Приклад: Prettier відформатує код ```js const obj={name:"Tom",age:20} ``` у ```js const obj = { name: 'Tom', age: 20 }; ``` --- ### **Ключова відмінність у двох фразах** - **ESLint відповідає за правильність коду.** - **Prettier відповідає за красу і одноманітність форматування.** --- ### **Як використовують у реальних проєктах** Зазвичай їх ставлять **разом**: - Prettier → автоматично форматує код - ESLint → стежить за логікою і правилами ESLint можна налаштувати так, щоб він **не сварився за стиль**, а віддавав ці завдання Prettier. --- ### **Висновок** | ESLint | Prettier | |---|---| | Запобігає помилкам | Робить код охайним | | Стежить за правилами | Стежить за форматуванням | | Про логіку | Про зовнішній вигляд | Ці інструменти **не конкуренти**, а **доповнюють один одного**, покриваючи різні сторони якості коду.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.