Чим Prettier відрізняється від ESLint?
Різниця між 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 |
|---|---|
| Форматування | Логіка і якість |
| Краса | Безпека |
| Не шукає помилки | Шукає помилки |
| Автоформат | Аналіз коду |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.