Форматировщик JS / TS
Форматируйте или минифицируйте JavaScript, TypeScript и JSX/TSX с настройками Prettier.
Ваш код форматируется локально в браузере с помощью Prettier и Terser, и ничего не загружается на сервер.
Нужно отформатировать и стили? Попробуйте CSS Formatter.
Об инструменте Форматировщик JS / TS
Этот форматтер 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.
Все инструменты ArrayKit