Форматирование кода онлайн — JS, CSS, HTML, PHP, SQL и JSON одной кнопкой
Вставьте неаккуратный или сжатый код — получите читаемый: с отступами, переносами и единым стилем по правилам Prettier, того же форматировщика, что подключают в VS Code. Если в коде ошибка, инструмент покажет строку и столбец, где она. Работает с JS, CSS, HTML, PHP, SQL и JSON.
Код обрабатывается в вашем браузере и никуда не отправляется. Ctrl+Enter в поле ввода — форматировать.
Что делает форматирование кода
Форматировщик (beautifier) расставляет отступы, переносы строк и пробелы по единым правилам. Код остаётся тем же, но читается как написанный одним аккуратным человеком.
Только оформление, не логика
Форматировщик разбирает код в синтаксическое дерево и печатает его заново по правилам. Меняются отступы, переносы, пробелы, а по вашим настройкам ещё кавычки, точки с запятой и висячие запятые. Имена, значения и порядок выполнения остаются прежними, комментарии сохраняются.
Читаемый вид для сжатого кода
Минифицированный файл в одну строку форматировщик разворачивает обратно. Проверили на Bootstrap 5.3.3: bootstrap.min.js из 7 строк превратился в 2923, а все 12 компонентов после этого работают так же. Комментарии и исходные имена локальных переменных удаляются при сжатии, и вернуть их нельзя: переменные останутся короткими, вроде t и e.
Ошибка — с номером строки
Код с синтаксической ошибкой форматировщик разобрать не может. Вместо результата он показывает строку и столбец, где разбор споткнулся, и ставит туда курсор. Незакрытую скобку или лишнюю запятую в JSON так найти быстрее, чем глазами.
Не минификатор и не линтер
Минификация делает обратное: убирает пробелы и сокращает имена для публикации. Для этого есть минификатор кода. Линтер, например ESLint, ищет ошибки в логике и нарушения правил именования. Форматировщик этого не делает: он отвечает только за внешний вид.
Как форматируется каждый язык
В основе — Prettier 3.9.8, форматировщик, который подключают в VS Code и в сборку проектов. PHP форматирует его официальный плагин, SQL — библиотека sql-formatter.
Стили Prettier, Google, Airbnb и Standard
Стиль задаёт то, что умеет настраивать Prettier. У Google — одинарные кавычки и строка до 80 символов. У Airbnb — то же, но строка до 100. У Standard — без точек с запятой и висячих запятых. Остальные правила этих гайдлайнов относятся к линтеру. Пробел перед скобками функции, который требует Standard, Prettier не ставит в принципе. Язык переключается на TypeScript сам, если открыть файл .ts.
Почему «>» иногда стоит на отдельной строке
В HTML пробел между строчными тегами виден на странице. Чтобы не добавить лишний пробел в текст, Prettier в режиме «Как в браузере» переносит строку внутри тега, и получается </a и > на разных строках. Выглядит непривычно, зато отображение страницы не меняется. Режим «Не учитывать» даёт более ровную разметку, но может добавить пробел рядом со ссылкой или жирным словом.
PSR-12 и версия PHP на сервере
По умолчанию отступ 4 пробела и строка до 120 символов, как в стандарте PSR-12. Версию PHP нужно указать не зря. Для 8.0 и новее форматировщик ставит висячую запятую после последнего параметра многострочной функции, а в PHP 7.4 это синтаксическая ошибка. Поэтому по умолчанию выбрана 7.4: такой код работает на любой версии.
Диалекты и классический вид JSON
У SQL есть диалекты MySQL, MariaDB, PostgreSQL, SQLite, T-SQL, PL/SQL, BigQuery, Snowflake и Redshift. Ключевые слова можно привести к верхнему или нижнему регистру. JSON разворачивается стандартно: каждый ключ на своей строке. Prettier короткие объекты оставил бы в одну строку. Для проверки и разбора больших JSON есть отдельный JSON-форматтер.
Как отформатировать код онлайн
Порядок одинаковый для всех шести языков.
Выберите язык и добавьте код
Откройте вкладку нужного языка и вставьте код. Можно открыть файл кнопкой или перетащить его на поле ввода: язык и диалект определятся по расширению.
Проверьте настройки
Для JavaScript выберите стиль, для PHP — версию на сервере, для SQL — диалект. Значения по умолчанию подходят для большинства проектов.
Нажмите «Форматировать» и заберите результат
Скопируйте отформатированный код или скачайте файл. Он сохранится с исходным именем, расширением и кодировкой.
Частые вопросы о форматировании кода
О безопасности, стилях и возможностях инструмента.
Нет. Prettier меняет только оформление: отступы, переносы, кавычки и точки с запятой там, где это не влияет на смысл. Единственный случай, который стоит проверить глазами, — пробелы между строчными тегами HTML в режиме «Не учитывать».
Вставьте содержимое файла .min.js или .min.css на вкладку JS или CSS и нажмите «Форматировать». Код разложится по строкам с отступами. Удалённые при сжатии комментарии и длинные имена локальных переменных вернуть нельзя.
Тот, что принят в вашем проекте или команде. Если правил нет, оставьте Prettier: его стиль по умолчанию используют чаще всего, и код будет выглядеть привычно для большинства разработчиков.
Так Prettier переносит длинную строку, не добавляя видимого пробела между строчными тегами. Если важнее ровная разметка, выберите в настройках HTML «Пробелы вокруг тегов: не учитывать» и проверьте страницу в браузере.
Пока нет. Для Python нет форматировщика, который надёжно работает в браузере без сервера, а обещать то, что не проверено, мы не будем. Поддерживаются JavaScript, TypeScript, CSS, SCSS, LESS, HTML, PHP, JSON и SQL.
Нет. Форматирование выполняется в вашем браузере. Библиотеки Prettier и sql-formatter загружаются с нашего сайта, код никуда не передаётся.
Движок тот же, поэтому при одинаковых настройках результат совпадает. Онлайн удобно, когда нужно быстро отформатировать фрагмент без установки. В проекте Prettier лучше подключить в редактор или сборку, чтобы код форматировался при каждом сохранении.