Форматування без болю: ESLint Stylistic замість Prettier

Кожен розробник JavaScript знайомий із такою проблемою, як суперечки щодо стилю коду в команді. Щоб уникнути цього, традиційно використовувалися інструменти автоматичного форматування, найпопулярніший з яких – Prettier. Але останнім часом на сцену вийшла альтернативна можливість – ESLint Stylistic. Давайте розберемось, як цей новий підхід може зробити форматування коду простішим та приємнішим.

Що таке ESLint Stylistic?

ESLint Stylistic – це новий офіційний набір правил для ESLint, який дозволяє не тільки аналізувати код на предмет помилок, але й форматувати його відповідно до заданих правил. На відміну від Prettier, ESLint Stylistic є більш гнучким і надає розробнику детальний контроль над стилем коду.

Чому ESLint Stylistic краще за Prettier?

1. Єдиний інструмент для лінтингу та форматування

З ESLint Stylistic вам більше не потрібно використовувати два окремих інструменти (Prettier + ESLint). Це спрощує конфігурацію та підтримку проекту.

2. Гнучкість налаштувань

На відміну від Prettier, який пропонує обмежений набір налаштувань, ESLint Stylistic дозволяє налаштовувати кожну деталь форматування коду:

• Відступи
• Розташування фігурних дужок
• Довжину рядків
• Вибір між одинарними та подвійними лапками

3. Краща інтеграція в IDE

ESLint уже підтримується всіма популярними IDE (VS Code, WebStorm, Sublime Text тощо), тому використання ESLint Stylistic не потребує додаткових плагінів або спеціальної інтеграції.

Як налаштувати ESLint Stylistic?

Ось простий спосіб почати використовувати ESLint Stylistic у вашому проекті:

Крок 1: Встановіть ESLint та Stylistic

npm install eslint @stylistic/eslint-plugin -D

Крок 2: Створіть або оновіть .eslintrc.json

{
  "plugins": ["@stylistic"],
  "extends": ["plugin:@stylistic/recommended"],
  "rules": {
    "@stylistic/semi": ["error", "never"],
    "@stylistic/quotes": ["error", "single"]
  }
}

Тепер ESLint автоматично форматуватиме ваш код за заданими правилами.

Крок 3: Додайте скрипт для форматування

Додайте у ваш файл package.json:

"scripts": {
  "lint": "eslint --fix ."
}

Запускайте команду:

npm run lint

Ваш код буде автоматично виправлено відповідно до правил ESLint Stylistic.

Поради щодо переходу з Prettier

Якщо ви вже використовуєте Prettier, переходити до ESLint Stylistic буде просто:

• Вимкніть Prettier або видаліть його конфігурацію з проекту.
• Переконайтеся, що в ESLint задані всі необхідні вам правила.
• Протестуйте зміни на окремій гілці перед тим, як впровадити їх в основний код.

Висновок

ESLint Stylistic – це зручний та потужний інструмент, який дозволяє легко налаштовувати і контролювати стиль вашого JavaScript-коду. Відмовившись від використання двох окремих інструментів, ви спростите процес розробки та зробите командну роботу більш продуктивною і гармонійною.

Спробуйте ESLint Stylistic – і ви швидко зрозумієте, що форматування коду дійсно може бути безболісним!