Досить болю від налаштування Eslint та Prettier!

Впевнений, у вас були складнощі з налаштуванням Eslint або Prettier, чи навіть з обома одночасно. Наприклад, ціла купа різних конфігів для Eslint, які можуть конфліктувати з Prettier. Або Prettier, який вміє форматувати за базовими правилами, які йдуть всупереч правилам Eslint. Знайомо? 😒

Чому так?

Eslint відповідає за велику кількість правил, таких як: імпорти, типи даних, спрощення логіки тощо. А Prettier у свою чергу просто вміє форматувати з мінімальними налаштуваннями. Саме через це відбувається конфлікт правил і обидві бібліотеки можуть не ладнати одна з одною.

Як виправити?

Логічно, щоб позбутися конфлікту, треба видалити або Eslint, або Prettier. Як я зазначав раніше, Eslint має набагато більше правил для валідації коду, саме тому краще обрати його як головний лінтер.

На щастя, Eslint має можливість форматувати код так само, як і Prettier. Залишається обрати тільки конфіг, який буде форматувати код. Їх існує безліч і багато з них я спробував особисто, але зупинився на конфізі від відомого open-source розробника Antony Fu (antfu).

Звісно, на початку вам може не сподобатися конфіг від antfu. Мені також знадобився час на звикання, бо він відрізняється від звичного для мене стайлгайду. Проте цей конфіг покриває абсолютно все, що мені треба в проєктах, навіть якщо вони на різних фреймворках, бо під капотом конфіг вміє валідувати наступне:

JavaScript
TypeScript
Astro
React
Solid
Svelte
Vue
і багато іншого

Встановлення конфігу

Видаляємо Prettier 😄
Встановлюємо @antfu/eslint-config
Налаштовуємо formatOnSave, як рекомендує antfu
Створюємо файл eslint.config.js з приведеним нижче контентом:

import antfu from  '@antfu/eslint-config'

export default antfu()

Все 😉

Гнучкість налаштування конфігу

Якщо вам все ж таки треба щось додати, то виглядає це наступним чином:

import { FlatCompat } from '@eslint/eslintrc'
import antfu from '@antfu/eslint-config'

const compat = new FlatCompat()

export default antfu(
  {},
  ...compat.extends('plugin:tailwindcss/recommended'),
)

Перший параметр - це пустий об'єкт, бо в ньому треба описувати тільки правила, що існують в конфізі від antfu, а всі інші параметри це вже ваші особисті налаштування.

В даному прикладі я додав плагін валідації Tailwind класів, але оскільки він ще не використовує новий Flat Config від Eslint, довелося використати клас FlatCompat для зворотньої сумісності.

Висновок

Я наполегливо рекомендую встановити та спробувати конфіг від antfu у ваші проєкти, а якщо не сподобається, завжди можна зробити git revert 😉