Не просто накладіть свій код - виправте його за допомогою Prettier

Зв’язування робить наше життя простішим, оскільки говорить нам, що не так з нашим кодом. Але як ми можемо уникнути фактичної роботи, яка полягає у її виправленні?

Раніше я писав про лінтування, що це таке, і як це полегшує вам життя. Врешті-решт, я фактично включив спосіб автоматичного виправлення коду. То чому я це пишу?

Що ви маєте на увазі виправити?

Перш ніж вкинутися в це, давайте вдаримо це швидко. Linters потужні та забезпечують простий спосіб сканування коду на наявність синтаксичних помилок, які можуть призвести до помилок. Або вони можуть просто допомогти підтримувати чисту, здорову та послідовну кодову базу. Під час запуску він покаже всі проблеми та дозволить вам пройти кожну окремо, щоб їх виправити.

Піднімаючи це на наступний рівень, деякі лінтери насправді дозволять вам передати аргумент до команди, що запускає лінтер, що дозволяє йому автоматично це виправити для вас. Це означає, що вам не доведеться вручну переглядати та робити всі ці маленькі пробіли та крапку з комою (додавати їх!?) Самому налаштовувати!

То що ще я можу зробити, щоб щось виправити?

Якщо ви вже використовуєте опцію виправлення, це хороший початок. Але є інструменти, розроблені спеціально для вирішення цієї проблеми, окрім простого позначення вашої команди. Той, котрий я збираюся висвітлити, - «Гарніший».

Що красивіше?

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

Ви можете легко використовувати Prettier поодинці просто для форматування коду, який чудово працює. Але якщо ви поєднаєте це з основним процесом ESLint, ви отримаєте як потужний лінтер, так і потужний фіксатор. Я покажу вам, як змусити їх працювати разом.

Початок роботи з Prettier

У цьому покроковому посібнику я збираюся припустити, що ви встановили та налаштували ESLint у програмі. Зокрема, я збираюся продовжити, де я зупинився у своєму попередньому покроковому посібнику, де ми встановили ESLint до програми React.

Додатково зазначимо, Prettier з самого початку повідомляє нам, що це сумлінний програміст форматування коду. Ви повинні очікувати, що він відформатує ваш код послідовно, але, можливо, інакше, ніж у вас зараз налаштовано. Але не журіться! Ви можете налаштувати цю конфігурацію.

То з чого ми починаємо? Ми вже:

  • Встановили ESLint
  • Додали Babel як наш парсер
  • Додали плагін, що включає конфігурації React

Далі почнемо з установки декількох пакунків:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Примітка: наведена вище команда подібна до використання npm. Якщо ваш проект не використовує yarn, перейдіть на npmвідповідний.

Вище ми встановлюємо:

  • гарніший: основний гарніший пакет та двигун
  • prettier-lint: передає результат Prettier в ESLint для виправлення за допомогою конфігурації ESLint
  • prettier-eslint-cli: допомагає Prettier та ESLint працювати разом над різними файлами у вашому проекті

І ми встановлюємо їх як залежність від розробника, оскільки нам це не потрібно поза розробкою.

Налаштування нового форматування

Тепер, коли наші пакети встановлені, ми можемо налаштувати yarnцю команду для нас.

Раніше ми налаштували lintсценарій, щоб виглядати так у нашому package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

Ми збираємося залишити це як є, але ми зробимо щось подібне і створимо новий сценарій поруч із ним, який називається formatдля нашого форматера Prettier:

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

То що там відбувається? Ми:

  • Додавання нового сценарію з назвою format, який ми можемо запускати якyarn format
  • Ми використовуємо наш prettier-eslint-cliпакет для запуску форматування для нас
  • Ми передаємо нашу конфігурацію ESLint, розташовану поруч з нашою package.jsonв кореневій частині проекту (змініть це, якщо вона знаходиться в іншому місці)
  • І нарешті, ми просимо красивіше писати всі відповідні файли **/*.jsабо будь-які JS-файли, які він знаходить рекурсивно через наш проект

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

Запустіть програму форматування!

Тепер, коли ми всі налаштовані, давайте запустимо це! Запустіть наступне:

yarn format 

і відразу ми бачимо, що це працює:

Гей, мій код виглядає інакше!

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

Don’t abandon your code! Instead, you can review the changes, see if maybe it makes sense to keep it that way (it will be very consistent) or you can update your ESLint config (.eslintrc.js) to overwrite the rules you don’t like. This is also a good way to maybe learn some new things that you might not have expected to get caught before.

So where does this leave us?

If you’ve followed along so far, we now have two commands:

  • lint: which will check your code for you and tell you what's wrong
  • format: will automatically try to fix the problems for you

When using these in practice, your best bet is to always run format first to let it try to automatically fix anything it can. Then immediately run lint to catch anything Prettier wasn’t able to fix automatically.

What’s next?

Now that we can format our code automatically, we should be able to fix our code automatically!

Next time we’ll take this a step further and set up a git hook that will allow this to run before you commit. This means you won't ever have to worry about forgetting to run this again!

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/