Форматирование и минификация кода - JS, TS, CSS, HTML, SQL

Зачем форматировать и минифицировать код?

Форматирование переписывает код с единообразными отступами, переносами и пробелами, чтобы его было легко читать, ревьюить и сравнивать. Это полезно для минифицированных фрагментов, сгенерированного SQL или скопированных конфигов. Минификация делает обратное: удаляет пробелы и комментарии (а для JavaScript ещё и сокращает локальные имена с помощью Terser), уменьшая размер загрузки. Инструмент использует Prettier, которым уже пользуется большинство JavaScript-проектов, и sql-formatter, знающий синтаксис MySQL, PostgreSQL, SQL Server, Oracle PL/SQL, BigQuery и других.

Возможности

• 11 языков: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL
• 13 диалектов SQL с настройкой регистра ключевых слов
• Минификация JS (Terser), CSS, HTML, JSON и SQL с показом экономии
• Размер отступа или табуляция, ширина строки, кавычки и точки с запятой
• Копирование и скачивание результата, понятные ошибки синтаксиса

Код остаётся у вас

Форматирование и минификация полностью выполняются в браузере, поэтому вставленные API-ключи, внутренние запросы или закрытый код никуда не загружаются.

Prettier + sql-formatter, 100% на стороне клиента.

Как пользоваться: Форматирование кода

1
Выберите вкладку языка: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown или GraphQL. Кнопка «Пример» загрузит образец кода.
2
Вставьте код и настройте параметры: размер отступа или табуляцию, ширину строки, кавычки и точки с запятой, а для SQL - диалект и регистр ключевых слов.
3
Нажмите «Форматировать», чтобы привести код в порядок через Prettier или sql-formatter, или «Минифицировать», чтобы сжать JavaScript, CSS, HTML, JSON или SQL. Экономия показана над результатом.
4
Скопируйте результат или скачайте его файлом. При синтаксической ошибке сообщение укажет строку и столбец.

Практические примеры

Чтение минифицированного кода

Сторонний скрипт или собранный бандл - это одна длинная строка. Отформатируйте его, чтобы увидеть структуру и найти функцию для отладки.

Приведение SQL из логов

ORM пишут запросы в одну строку. Форматирование с диалектом PostgreSQL или MySQL разносит SELECT, JOIN и WHERE по строкам, и запрос легко проверить и оптимизировать.

Единый стиль перед коммитом

Форматирование по тем же правилам Prettier, что и в проекте (2 пробела, 80 колонок, двойные кавычки), сохраняет diff маленьким, когда вы вставляете код из чата.

Быстрая минификация

Сожмите небольшой скрипт или стили для шаблона письма, поля CMS или встроенного <script>, не настраивая сборщик.

Частые вопросы

Меняет ли форматирование работу кода?+

Нет. Форматтеры меняют только пробелы, переносы строк и, по вашему выбору, кавычки и необязательные точки с запятой. Terser при минификации ещё и переименовывает локальные переменные, но поведение остаётся тем же.

Почему минификация недоступна для некоторых языков?+

Сжимать YAML, Markdown, TypeScript или GraphQL почти бесполезно или меняет смысл (YAML зависит от отступов). TypeScript обычно сначала компилируют в JavaScript, а потом минифицируют.

Какой диалект SQL выбрать?+

Диалект вашей СУБД. Они различаются кавычками, функциями и ключевыми словами, например обратные кавычки в MySQL или приведение :: в PostgreSQL, и правильный выбор избавит от ошибок.

Отправляется ли мой код на сервер?+

Нет. Prettier, sql-formatter и Terser работают в браузере и загружаются только при нажатии кнопки, поэтому закрытый код и учётные данные остаются на устройстве.