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

Мгновенно форматируйте или минифицируйте HTML, CSS и JavaScript прямо в браузере с отступом в 2 пробела, 4 пробела или табуляцию и сжатием JavaScript на основе Terser.

Загрузка инструмента…

Форматер и минификатор кодаВставьте HTML, CSS или JavaScript, выберите «Форматировать», чтобы аккуратно оформить код с отступом в 2 пробела, 4 пробела или табуляцию, либо выберите «Минифицировать», чтобы уменьшить его для продакшена. JavaScript минифицируется с помощью Terser, а CSS и HTML сжимаются за счёт безопасного удаления комментариев и лишних пробелов. Всё выполняется полностью в вашем браузере, поэтому ваш код никогда не загружается на сервер.

Что такое Форматер и минификатор кода?

Бесплатный онлайн-форматер и минификатор кода, который форматирует или минифицирует HTML, CSS и JavaScript, не покидая ваш браузер. Выберите язык, затем выберите «Форматировать», чтобы заново расставить отступы в неаккуратном или однострочном исходнике с отступом в 2 пробела, 4 пробела или табуляцию, либо «Минифицировать», чтобы сжать его. Форматирование выполняется с помощью js-beautify; минификация JavaScript использует Terser для сокращения имён и уменьшения размера, а CSS и HTML сжимаются за счёт удаления комментариев и схлопывания избыточных пробелов. Веб-разработчики используют его, чтобы сделать минифицированный сторонний код читаемым, уменьшить таблицы стилей и скрипты перед развёртыванием, а также привести в порядок фрагменты, вставленные из вывода сборки.

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

  1. Выберите язык вашего исходника: HTML, CSS или JS.
  2. Выберите действие: «Форматировать» для оформления или «Минифицировать» для сжатия.
  3. Для форматирования выберите отступ: 2 пробела, 4 пробела или Табуляция.
  4. Вставьте или введите код в поле ввода — результат обновляется автоматически.
  5. Нажмите кнопку «Копировать», чтобы получить результат, или нажмите «Очистить», чтобы опустошить ввод и начать заново.

Примеры

Форматировать однострочное правило CSS (2 пробела)

Ввод

a{color:red;font-weight:bold}

Вывод

a {
  color: red;
  font-weight: bold
}

Минифицировать JavaScript с помощью Terser

Ввод

function add(first, second) {
  return first + second;
}

Вывод

function add(n,d){return n+d}

Минифицировать HTML

Ввод

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Вывод

<ul><li>One</li><li>Two</li></ul>

Часто задаваемые вопросы

Загружается ли мой код на сервер?
Нет. Форматирование и минификация полностью выполняются локально в вашем браузере — js-beautify и Terser загружаются как скрипты и работают на вашем устройстве. Ваш код никогда не покидает вашу машину, и инструмент продолжает работать в офлайне.
Какие языки и действия поддерживаются?
Три языка — HTML, CSS и JavaScript — каждый с двумя действиями: «Форматировать» (оформить с выбранным отступом) и «Минифицировать» (сжать). JavaScript минифицируется с помощью Terser, а CSS и HTML сжимаются за счёт удаления комментариев и схлопывания пробелов.
Какой отступ я могу выбрать?
При форматировании вы можете заново расставить отступы в 2 пробела, 4 пробела или символом табуляции. Отступ применяется только к форматированию; минификация удаляет пробелы и игнорирует эту настройку.
Почему при минификации моего JavaScript появилась ошибка?
Terser разбирает ваш JavaScript перед минификацией, поэтому синтаксическая ошибка останавливает его, и сообщение показывается над выводом. Исправьте указанное место — часто это незакрытая скобка, строка или лишний токен — и результат пересоберётся автоматически.
Обновляется ли вывод сам по себе?
Да. Результат пересобирается каждый раз, когда вы меняете ввод, язык, действие или отступ, поэтому вам никогда не нужно нажимать кнопку для форматирования — просто скопируйте вывод, когда он выглядит правильно.

Похожие инструменты