Softonic

Форматировщик JavaScript

Шаг 1 / 3
Далее

Вставьте фрагмент минифицированного или плохо отформатированного JavaScript и получите чистый, читаемый код, отформатированный по тем же правилам, что используют редакторы. Выберите табы или пробелы, одинарные или двойные кавычки, точки с запятой или без них, висячие запятые по стандарту ES5 или везде. Поддерживаются современные конструкции: опциональная цепочка, слияние с null, JSX, TypeScript и await на верхнем уровне.

Как отформатировать JavaScript

  1. 1

    Вставьте исходный код

    Любой корректный код на JS, JSX или TypeScript. Парсер определяет диалект по синтаксису.

  2. 2

    Задайте настройки

    Размер отступа, табы или пробелы, стиль кавычек, точки с запятой, ширина строки, висячие запятые.

  3. 3

    Отформатируйте

    Инструмент выполняет обработку, совместимую с Prettier, и выводит отформатированный результат.

  4. 4

    Скопируйте результат

    Скопируйте одним щелчком или скачайте файлом. Исходные отступы отбрасываются, а не накладываются поверх.

Параметры стиля

Параметр Значения По умолчанию
Отступ tab, 2, 4 2 пробела
Стиль кавычек single, double двойные
Точки с запятой always, never всегда
Ширина строки 60 - 120 80
Висячие запятые none, es5, all es5
Скобки у стрелочных функций always, avoid всегда
Пробелы внутри скобок true, false true
Одинарные кавычки в JSX true, false false

Почему форматирование важно

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

  • Споры о мелочах заканчиваются, как только проект принимает форматировщик. git diff показывает реальное изменение, а не дискуссии об отступах.
  • Хуки перед коммитом (с инструментами вроде Husky и lint-staged) автоматически форматируют подготовленные файлы перед коммитом.
  • Интеграция с редактором (VS Code, WebStorm) применяет те же правила при сохранении.

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

  • Не проверяет код линтером. Правила стиля (no-unused-vars, eqeqeq), это область ESLint. Форматировщик лишь перестраивает пробелы и пунктуацию, он не отклоняет код из-за логических проблем.
  • Не исправляет синтаксические ошибки. Если на входе некорректный JS, форматировщик выдаст ошибку. Используйте его как проверку того, что код хотя бы парсится.
  • Не навязывает соглашения об именовании. camelCase против snake_case, это правило линтера, а не форматировщика.

Частые ошибки

  • Борьба с форматировщиком. Если вы продолжаете переформатировать код вручную после его запуска, вы оба тратите время впустую. Либо настройте параметры, либо примите выбор проекта.
  • Форматирование сгенерированного файла. Вывод сборщика, транспилированный код, .min.js, ни один из них не выигрывает. Форматируйте исходники, а не артефакты.
  • Форматирование без разбора. «Красивая печать» на регулярных выражениях испортит шаблонные литералы, литералы регулярных выражений и JSX. Всегда используйте форматировщик на основе AST (как этот).

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

Да. Парсер распознаёт синтаксис TypeScript (типы, интерфейсы, дженерики, декораторы) и форматирует соответствующим образом. JSX также поддерживается в файлах .tsx / .jsx.

Он следует тем же правилам, что и настройки Prettier по умолчанию, и настраивается через привычные параметры (ширина строки, кавычки, точки с запятой, висячие запятые). Файл, отформатированный здесь, должен совпадать с отформатированным в Prettier при тех же настройках.

Форматировщику нужен корректный, разбираемый JavaScript. Если возникает ошибка, скорее всего, в коде есть синтаксическая проблема (незакрытая скобка, некорректный JSX, опечатка). Если сообщение непонятно, сначала прогоните код через линтер.

Да. И однострочные (//), и блочные (/* */) комментарии сохраняются в выводе и располагаются рядом с тем местом, где они были в исходнике.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 по короткой форме: задайте entry, папку вывода и режим, затем включите TypeScript, Babel, загрузчик CSS, HtmlWebpackPlugin и сервер разработки.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Инструмент доступен на других языках