Этот форматтер JS красиво оформляет или минифицирует JavaScript, TypeScript и JSX/TSX прямо в вашем браузере. Как инструмент красивого оформления JavaScript он запускает Prettier с полной панелью опций, а минификация использует Terser для сжатия кода для продакшна. Выберите парсер Auto для автоматического определения синтаксиса или принудительно укажите JS/JSX либо TS/TSX, когда нужен конкретный форматтер TypeScript. Настройте точки с запятой, стиль кавычек, ширину табуляции, ширину печати и завершающие запятые, чтобы соответствовать стилю вашего проекта. Он создан для разработчиков, наводящих порядок в неаккуратных сниппетах, QA-инженеров, изучающих собранный вывод, и всех, кому нужна быстрая альтернатива prettier онлайн. Всё обрабатывается локально в вашем браузере, поэтому ваш исходный код не покидает устройство и ничего не загружается на сервер.
Возможности
Красивое оформление JavaScript, TypeScript и JSX/TSX с Prettier
Минификация с Terser для сжатия кода для продакшна
Автоопределение парсера, плюс явные режимы JS/JSX и TS/TSX
Переключение точек с запятой, одинарных или двойных кавычек и табуляции против пробелов
Настраиваемая ширина табуляции (2 или 4) и ширина печати (80, 100, 120)
Выбор завершающих запятых: none, es5 или all
Мгновенное форматирование при изменении любой опции
Работает полностью в вашем браузере
Как использовать Форматировщик JS / TS
Вставьте свой JavaScript или TypeScript в поле ввода.
Выберите «Красиво оформить» для форматирования или «Минифицировать» для сжатия.
Выберите парсер: Auto, JS / JSX или TS / TSX.
Настройте опции, такие как ширина табуляции, кавычки, точки с запятой и завершающие запятые.
Скопируйте отформатированный вывод из панели результата.
Пример
Ввод
const greet=(name)=>{return 'hi '+name}
Результат
const greet = (name) => {
return 'hi ' + name;
};
Красиво оформлено с настройками Prettier по умолчанию (отступ 2 пробела, точки с запятой).
Частые ошибки и устранение неполадок
Вывод пуст или показывает ошибку разбора после вставки. — Убедитесь, что сниппет — это валидный JavaScript или TypeScript. Переключите парсер на TS / TSX для аннотаций типов или JS / JSX для синтаксиса React.
Режим Auto неправильно разбирает специфичный для TypeScript синтаксис. — Auto сначала пробует парсер TypeScript и откатывается к Babel; принудительно укажите TS / TSX, если ваш файл использует продвинутые возможности типов.
Минифицированный вывод выглядит нечитаемым. — Это ожидаемо. Terser убирает пробелы и сокращает код для продакшна. Используйте «Красиво оформить», если хотите читаемый результат.
Кавычки или точки с запятой не такие, как вы хотели. — Переключите опции «Одинарные кавычки» и «Точки с запятой» перед копированием. Prettier мгновенно переформатирует при их изменении.
Часто задаваемые вопросы
Что такое форматтер JS и что он умеет?
Это браузерный инструмент, который красиво оформляет или минифицирует JavaScript, TypeScript и JSX/TSX. Красивое оформление запускает Prettier с полным набором опций стиля, а минификация запускает Terser для сжатия кода для продакшна.
Как форматировать TypeScript или JSX с помощью форматтера JS?
Выберите парсер: JS / JSX, TS / TSX или Auto. Auto сначала пробует парсер TypeScript и откатывается к Babel, поэтому обычный JavaScript, JSX и TypeScript форматируются корректно.
Использует ли форматтер JS Prettier и Terser?
Да. Красивое оформление использует Prettier, а минификация использует Terser, поэтому вывод соответствует тем же инструментам, которые вы использовали бы в реальном пайплайне сборки.
Какие опции стиля можно контролировать в форматтере JS?
Вы можете переключать одинарные и двойные кавычки и точки с запятой, переключаться между табуляцией и пробелами, устанавливать ширину табуляции 2 или 4, выбирать ширину печати 80, 100 или 120 и выбирать завершающие запятые none, es5 или all.
Отправляет ли форматтер JS мой код куда-либо?
Нет. Prettier и Terser оба работают полностью в вашем браузере, поэтому ваш код не покидает устройство и ничего не загружается на сервер.
Связанные инструменты
Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.
JSON в TypeScript — Генерируйте интерфейсы TypeScript из образца JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Форматировщик GraphQL — Форматируйте или минифицируйте запросы и схемы GraphQL, проверяйте синтаксис и извлекайте операции.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
cURL в Fetch — Преобразуйте команду curl в вызов fetch() на JavaScript.
Другие инструменты: Форматировщики кода
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Форматировщик GraphQL — Форматируйте или минифицируйте запросы и схемы GraphQL, проверяйте синтаксис и извлекайте операции.
Форматировщик Dockerfile — Форматируйте Dockerfile и получайте рекомендации по лучшим практикам и линту.