Форматер коду

Що робить інструмент

Форматер коду бере стиснений, мініфікований або непослідовно відформатований код і виводить його в чистому, однорідному стилі. Він підтримує мови, з якими найчастіше стикаєшся у веброзробці: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML і GraphQL.

Під капотом працює Prettier — форматер, яким користуються мільйони проєктів, тож результат виглядає так само, як код, відформатований у VS Code чи pre-commit хуком. Парсер кожної мови завантажується лише тоді, коли ви її обираєте, тому сторінка лишається швидкою.

Як користуватися

1. Виберіть Мову вашого коду.
2. Вставте код або відкрийте файл.
3. Виберіть стиль Відступу (2 пробіли, 4 пробіли або табуляція) і Ширину рядка. Рядки, довші за неї, переносяться там, де це дозволяє мова.
4. Для JavaScript і TypeScript визначте, чи закінчуються інструкції крапками з комою. Для скриптів і стилів увімкніть одинарні лапки, якщо у вашому проєкті прийнято саме їх.
5. Скопіюйте результат або збережіть його у файл.

Приклад

Приклад — це однорядкова HTML-сторінка з вбудованими CSS і JavaScript. Після форматування кожен елемент стоїть в окремому рядку, правила CSS розгорнуто по одному оголошенню на рядок, а стрілкова функція в скрипті отримує дужки та крапку з комою:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Поради

• Форматування — це ще й швидка перевірка синтаксису. Якщо Prettier не може розібрати вхідні дані, повідомлення про помилку покаже рядок і стовпець, щоб ви одразу перейшли до місця помилки.
• XML форматується з припущенням, що пробіли не мають значення, щоб вкладені теги отримали відступи. Якщо ваш документ залежить від точних пробілів усередині елементів, перевірте результат перед використанням.
• Потрібно навпаки? Скористайтеся мініфікатором JavaScript і CSS, щоб стиснути код для продакшену, або форматером JSON для валідації та мініфікації JSON.