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, опечатка). Если сообщение непонятно, сначала прогоните код через линтер.

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

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Шпаргалка по регулярным выражениям

Поисковый справочник регулярных выражений для JavaScript, PCRE2/PHP, Python re и .NET. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.

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