Форматирование и украшение кода
Вставьте код или откройте файл, нажмите «Форматировать» — и получите аккуратный результат. Язык определяется автоматически: JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown и GraphQL, всё прямо в браузере.
Всё выполняется в вашем браузере — код не отправляется ни на какой сервер.
Ширина строки действует для JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown и GraphQL. Форматирование не проверяет логику, типы и правила стиля.
Язык определится, как только вы добавите код.
Перетащите сюда файл с кодом (до 5 МБ), вставьте текст или загрузите пример. Ctrl+Enter — отформатировать.
Форматирование и украшение кода в браузере
Код, скопированный из минифицированного бандла, лога, сообщения в мессенджере или старого проекта, читать трудно, а проверять ещё труднее. Этот форматтер одним щелчком возвращает ему аккуратный вид с единообразными отступами. Вставьте код, нажмите «Форматировать» (или Ctrl+Enter) — результат появится рядом с оригиналом, а номера строк с обеих сторон помогут сравнить их с первого взгляда.
Поддерживаются форматы, которые разработчики встречают чаще всего: JavaScript с JSX, TypeScript с TSX, CSS, SCSS и LESS, HTML со встроенными скриптами и стилями, JSON, XML, SQL для тринадцати диалектов, YAML, Markdown и GraphQL. По умолчанию язык определяется сам: по имени файла, если вы открыли файл, и по содержимому, если вы вставили текст. Если текст подходит под несколько языков, инструмент так и скажет и предложит вероятные варианты, а не выберет молча неверный парсер.
Стиль остаётся за вами. Выберите отступ в два пробела, четыре пробела или табуляцию, а для языков, которые форматирует Prettier, — ширину строки 80, 100 или 120 символов. Для SQL можно указать диалект: PostgreSQL, MySQL, SQL Server, BigQuery и другие. Для JSON есть ещё кнопка минификации: она убирает все пробелы, не затрагивая числа, строки и порядок ключей. Настройки запоминаются в браузере, а если хотите видеть результат прямо во время набора, включите автоматическое форматирование.
Если что-то не так, сообщение короткое и точное: язык, что ожидал парсер, строка и столбец. Ваш текст никогда не перезаписывается, а кнопка переносит курсор к проблемному месту. Кнопка «Отменить» вернёт то, что вы случайно очистили или заменили, результат можно скачать с правильным расширением файла, а обе версии — открыть рядом в «Сравнении текста», чтобы увидеть, что именно изменилось.
Всё происходит на вашем устройстве. Тяжёлые движки форматирования загружаются только для того языка, который вы действительно форматируете, и работают в фоновом обработчике, поэтому большой файл не подвесит страницу. Учитывайте ограничения: открыть можно файл до 5 МБ, ввод свыше 300 000 символов может обрабатываться несколько секунд, а ввод свыше двух миллионов символов отклоняется. Форматтер — не линтер и не компилятор: логические ошибки он не найдёт, а некоторые экзотические конструкции синтаксиса может не принять.
Часто задаваемые вопросы
Отправляется ли мой код куда-нибудь?
Нет. Код форматируют библиотеки, которые работают прямо в вашем браузере, в фоновом потоке. На сервер ничего не уходит. В локальном хранилище браузера сохраняются только настройки и, по желанию, черновик; поле можно очистить в любой момент.
Изменится ли поведение кода после форматирования?
Форматтер меняет только внешний вид: отступы, переносы строк и пробелы. Он также может привести кавычки к одному виду, добавить или убрать необязательные скобки и расставить точки с запятой единообразно, но смысл кода остаётся прежним. Логику, типы и правила линтера он не проверяет: рабочий код останется рабочим, а ошибочный — ошибочным.
Как определяется язык?
Если вы открыли файл, решает его расширение. Иначе инструмент анализирует сам текст: теги, скобки, ключевые слова, характерную пунктуацию. Когда два языка похожи, например CSS и SCSS или JavaScript и TypeScript, он не гадает, а спрашивает вас. Язык всегда можно выбрать вручную в списке «Язык».
Что будет, если в коде синтаксическая ошибка?
Результат останется пустым, ваш текст не изменится, а в сообщении вы увидите строку и столбец. Нажмите «Показать во вводе», чтобы перейти к этому месту, исправьте ошибку и снова нажмите «Форматировать».
Можно ли здесь минифицировать код?
Только JSON: удалять из него пробелы всегда безопасно. Для JavaScript или CSS нужен специальный минификатор, ведь переименование переменных или слияние правил может изменить поведение, поэтому здесь это не предусмотрено. Для более глубокой проверки синтаксиса SQL используйте инструмент «SQL-форматтер и валидатор».