Code Formatter (Prettier) — Форматувальник коду

Що робить цей форматувальник коду

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

Ви можете форматувати JavaScript, JSX, TypeScript і TSX, три основні діалекти таблиць стилів (CSS, SCSS і Less), HTML із вбудованими стилями та скриптами, JSON, схеми й запити GraphQL, документи Markdown і конфігураційні файли YAML. Для кожної мови використовується власний плагін Prettier, і завантажується лише той, що потрібен, тож сторінка залишається легкою, доки ви справді щось не відформатуєте.

Пояснення параметрів

Print width (ширина рядка) — це довжина рядка, у межах якої Prettier намагається залишатися; типово це 80, а в командах із широкими моніторами часто обирають 100 або 120. Tab width задає, скільки пробілів займає один рівень відступу, а Indent with перемикає між пробілами та справжніми символами табуляції. Semicolons визначає, чи завершуються інструкції в JavaScript і TypeScript крапкою з комою; якщо параметр вимкнено, Prettier додає її лише там, де без неї виникає неоднозначність. Single quotes надає перевагу ' замість " для рядків, якщо це не потребує екранування. Ці параметри один до одного відповідають налаштуванням у файлі .prettierrc, тож ви можете відтворити конфігурацію свого проєкту.

Приватно й практично

Усе відбувається локально: форматувальник ніколи не завантажує ваш код, не зберігає його й не надсилає до жодного API. Тому ним безпечно користуватися для пропрієтарного коду, конфігураційних файлів із внутрішніми іменами хостів або фрагментів, скопійованих під час інциденту в продакшені. Коли парсер знаходить синтаксичну помилку, повідомлення показує рядок і стовпець, а курсор переходить у це місце вхідних даних — так можна швидко знайти пропущену дужку у великому файлі JSON чи YAML. У щоденній роботі тримайте Prettier у редакторі та CI; а цією сторінкою користуйтеся, коли працюєте на комп'ютері без звичних інструментів, переглядаєте фрагмент коду з чату або прибираєте код перед тим, як вставити його в документацію.