01
Укажите язык фрагмента
Для типов выберите TS, а для типов вместе с JSX — TSX. Угловые скобки в неверном режиме могут означать другое.
- Пример соответствует выбранному режиму.
HTML / CSS Dev Tools
Форматирование JavaScript
Выберите синтаксис и стиль, затем сравните исходник с результатом.
Форматирование JavaScript
Исходный код
Код остаётся в этой вкладке браузера и не загружается.
Результат форматирования
Вставьте код или загрузите пример.
Фрагмент из задачи часто приходит с неудобными отступами. Форматирование JavaScript оставляет исходный текст слева и показывает справа читаемый результат для JS, JSX, TS или TSX.
Здесь Форматирование JavaScript основано на синтаксическом разборе. Шаблонные строки, JSX и аннотации типов не обрабатываются простой заменой пробелов; ошибка получает строку и столбец. Такой форматировщик JS полезен для быстрой проверки фрагмента.
Зачем нужно Форматирование JavaScript?
Явный режим и сохранённый исходник помогают проверить изменения.
Четыре режима разбора
Выберите JS, JSX, TS или TSX. Компонент TSX сохраняет типы и разметку и не выдаётся за готовый к минификации JS.
Сравнение с исходником
Отступы, кавычки, точки с запятой, ширину и завершающие запятые можно менять без замены ввода. Форматирование JavaScript блокирует копирование старого результата до пересчёта.
Три проверки перед копированием
02
Настройте стиль
Автоформатирование ждёт 350 мс после ввода и обновляет результат при смене параметров. При отключении появляется ручная кнопка.
- В ручном режиме работает Ctrl/Cmd+Enter.
03
Проверьте актуальность
После изменения кода или параметров копирование и загрузка выключены до нового результата. При ошибке показаны строка и столбец.
- Проверка синтаксиса не проверяет типы TypeScript.
Что умеет синтаксический движок
От JS до TSX
Парсеры Prettier работают с JavaScript, JSX-разметкой, типами TypeScript и компонентами TSX. Поиск JS beautifier приводит к той же задаче улучшения читаемости.
Настройки оформления
Выбирайте два или четыре пробела, Tab, кавычки, точки с запятой, ширину строки и завершающие запятые.
Проверка и сжатие
Синтаксис проверяется отдельной кнопкой. Terser минифицирует только обычный JS, доступен файл .min.js.
Границы проверки и вывода
- Не проверяет типы
- Успешный разбор не доказывает корректность типов. Зависимости проекта и tsconfig.json не загружаются.
- Минификация только для JS
- JSX, TS и TSX сначала нужно преобразовать в JS в своей системе сборки. В этих режимах кнопка отключена.
- Не чинит повреждённый код
- Незакрытая строка или скобка вызывает ошибку с позицией. Форматирование JavaScript не дописывает и не запускает код.
- Не читает конфигурацию проекта
- Применяются только видимые настройки. Файлы .prettierrc, плагины и правила ESLint не подгружаются.
Вопросы про Форматирование JavaScript
Какой стиль использует форматтер?
Проверьте выбранный режим и указанную строку со столбцом. Парсер сообщает первую найденную неполную или неверную конструкцию.
Запускает ли он мой JS?
Нет. Минификация удаляет часть информации, включая комментарии и исходные имена; одним форматированием её не восстановить.
Исправит ли он синтаксические ошибки?
Нет. Этот инструмент только разбирает и печатает код, не запуская вставленный JS.
Почему некоторый код не форматируется, выдается ошибка разбора?
Парсер остановился на ошибке в выбранном режиме. Попробуйте JS, JSX, TS или TSX в соответствии с реальным синтаксисом фрагмента.
Будет ли мой код загружен на сервер? Безопасен ли код?
Нет. Код обрабатывается в текущей вкладке браузера и не загружается этим инструментом на сервер.
Не нашли ответ?
Начать Форматирование JavaScript
Вернитесь к редактору, выберите режим и сравните свежий результат с оригиналом перед копированием.
Обработка локально в браузере.