Форматирование кода

Что делает инструмент

Инструмент берёт сжатый, минифицированный или неаккуратно оформленный код и выводит его в чистом и единообразном стиле. Поддерживаются языки, с которыми чаще всего приходится работать в вебе: 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.