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

0 символов

Инструмент форматирования JSX от GeekFormat, основанный на движке Prettier v3 Standalone для профессионального оформления кода компонентов React JSX/TSX. Поддерживает 12 настроек форматирования (размер отступа, точка с запятой, стиль кавычек, конечная запятая, интервал в скобках, скобки стрелочной функции, ширина печати, одинарные кавычки JSX, скобка JSX на той же строке, стратегия кавычек свойств и т.д.), со встроенным движком сжатия Terser. Предлагает переключение между семью языками: JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Редактор с подсветкой синтаксиса CodeMirror 6, сравнение в реальном времени в две колонки, поддержка загрузки/скачивания файлов, история, обмен URL, копирование в один клик. Обработка чисто на стороне браузера, код не отправляется на сервер.

Похожие

Минификация JSX

Форматирование TSX

Форматирование JavaScript

Форматирование CSS

Форматтер JSON

О форматировании JSX

JSX — сокращение от JavaScript XML, расширение синтаксиса JavaScript, введённое фреймворком React, которое позволяет писать структуры тегов, похожие на HTML, напрямую в коде JavaScript. JSX преобразуется в обычные вызовы функции React.createElement() такими инструментами, как Babel или TypeScript, во время компиляции. JSX делает структуру кода компонентов более интуитивной — разработчики могут описывать структуру UI так же, как пишут HTML, получая при этом всю выразительность JavaScript. Однако если код JSX лишён стандартизированного форматирования — беспорядочные уровни вложенности тегов, неупорядоченные атрибуты, несогласованные отступы — это серьёзно повлияет на читаемость и эффективность сопровождения, в чём и заключается ценность инструментов форматирования JSX.

Prettier — самый доминирующий инструмент форматирования кода в экосистеме JavaScript/JSX, созданный Джеймсом Лонгом в 2017 году и ставший сейчас фактическим стандартом. Центральная философия Prettier — «убеждённый форматер» (opinionated formatter) — он предлагает лишь несколько настраиваемых элементов, остальные правила встроены и не подлежат изменению. Преимущество этого в том, что устраняются бесконечные споры о стиле кода между командами. Prettier поддерживает множество языков и форматов, таких как JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, широко применяется сообществами основных фреймворков, таких как React, Vue, Angular. Большинство современных фронтенд-проектов интегрируют Prettier в конвейеры CI/CD для гарантии единообразного стиля кода.

Центральные правила форматирования JSX включают: Первое, уровни отступа — каждый вложенный тег JSX и каждое выражение увеличивают уровень отступа, отражая древовидную структуру DOM; Второе, упорядочивание атрибутов — когда у тега несколько атрибутов и они превышают ширину строки, каждый атрибут занимает отдельную строку и выравнивается; Третье, обработка скобок — многострочные выражения JSX обычно оборачиваются круглыми скобками для предотвращения проблем с автоматической вставкой точки с запятой (ASI); Четвёртое, самозакрывающиеся теги — компоненты без дочерних элементов используют форму <Component />; Пятое, кавычки строк — атрибуты JSX по умолчанию используют двойные кавычки (согласно HTML), строки JavaScript по умолчанию используют одинарные кавычки; Шестое, обработка пробелов — будет ли добавляться пробел с обеих сторон от фигурных скобок {} внутри тегов, настраивается.

Сжатие JSX (Minification) — обратная операция форматированию, цель — преобразовать JSX в исполняемый код минимального объёма для развёртывания в производственной среде, снижая объём сетевой передачи и ускоряя скорость загрузки. Сжатие JSX обычно включает следующие этапы: сначала скомпилировать JSX в вызовы React.createElement (то есть обычный JavaScript) с помощью Babel, затем использовать компрессор (такой как Terser, UglifyJS) для: удаления комментариев и пробельных символов, сокращения имён переменных и функций (mangling), устранения мёртвого кода (dead code elimination), упрощения выражений и условных операторов, объединения объявлений, встраивания функций и т.д. Современные инструменты сборки (Webpack, Vite, Rollup) автоматически выполняют сжатие кода в режиме production.

Почему важно форматирование кода? В командной работе единообразный стиль кода может значительно повысить читаемость и эффективность ревью. Если каждый разработчик форматирует код согласно своим предпочтениям, в Git diff будет много бессмысленных изменений формата, ревьюерам будет трудно найти настоящие логические изменения. Исследования показывают, что разработчики тратят гораздо больше времени на чтение кода, чем на его написание, а согласованный стиль форматирования может значительно снизить когнитивную нагрузку при чтении. Крупные компании, такие как Google, Meta, Airbnb, имеют строгие нормы стиля кода и цепочки инструментов автоматизированного форматирования, что также отражает зрелость программной инженерии.

Разделение труда между Prettier и линтерами (такими как ESLint, TSLint) — одна из лучших практик современной фронтенд-инженерии: Prettier занимается исключительно форматом (formatting) — переносы строк, отступы, пробелы, точка с запятой, кавычки, запятые и другие чисто стилистические проблемы; ESLint занимается исключительно качеством (code quality) — неиспользуемые переменные, потенциальные баги, проблемы безопасности, лучшие практики и другие логические проблемы. При совместном использовании необходимо отключать правила формата в ESLint, пересекающиеся с Prettier, через eslint-config-prettier, чтобы избежать конфликтов. Многие команды также настраивают хуки pre-commit (через husky + lint-staged) для автоматического запуска Prettier и ESLint перед отправкой кода, гарантируя, что весь код, отправленный в репозиторий, соответствует нормам.

При выборе инструмента форматирования JSX нужно учитывать несколько факторов: Первое, выбор движка — отдавайте предпочтение Prettier как движку, поскольку это стандарт сообщества, с предсказуемыми результатами и согласованностью с расширениями IDE; Второе, настраиваемость — выбирайте количество регулируемых параметров в соответствии с потребностями команды; слишком много опций, наоборот, увеличивают затраты на принятие решений; Третье, безопасность — убедитесь, что инструмент обрабатывает код локально, не отправляя на серверы, избегая рисков утечки исходного кода; Четвёртое, дополнительные функции — сжатие, подсветка синтаксиса, история, обмен и другие функции могут повысить эффективность использования; Пятое, многоязычная поддержка — инструмент, покрывающий несколько языков, таких как JS/TS/JSX/TSX/CSS/HTML/JSON, может снизить затраты на переключение инструментов.

Меры безопасности при использовании онлайн-инструментов форматирования кода: Первое, отдавайте предпочтение инструментам чисто браузерной обработки — такие инструменты не нуждаются в сервере, код работает только локально, максимальная безопасность; Второе, не вставляйте код, содержащий конфиденциальную информацию — такие как пароли баз данных, ключи API, внутренняя бизнес-логика, проприетарные алгоритмы и т.д. Даже если инструмент заявляет, что не отправляет, сохраняйте осознанность безопасности; Третье, проверьте, использует ли инструмент HTTPS — предотвращает подслушивание во время передачи (хотя инструментам локальной обработки передача не нужна, сама страница также нуждается в безопасной загрузке); Четвёртое, используйте локальные инструменты для важного кода — для основного бизнес-кода рекомендуется использовать локально установленный Prettier CLI или расширения IDE, не полагаясь на онлайн-сервисы; Пятое, регулярно пересматривайте доверие к инструменту — проверяйте, является ли он открытым, каковы оценки сообщества, есть ли политика конфиденциальности и т.д.

Варианты использования

  • Код компонента React, скопированный из интернета с беспорядочным форматированием — быстрое форматирование для удобства чтения и изучения
  • Упорядочивание файлов компонентов JSX при взятии старых проектов, унификация стиля кода перед вторичной разработкой
  • Форматирование перед ревью кода, устранение бессмысленных diff из-за различий в формате, фокус на логической ревизии
  • Переформатирование сжатого производственного кода JSX, чтение обфусцированного кода при диагностике проблем в продакшене
  • Оформление примера кода JSX перед написанием технических блогов или документации, повышение профессионализма контента
  • Сравнение эффектов разных конфигураций форматирования, служит ориентиром для выбора конфигурации Prettier команды
  • Демонстрация процесса форматирования кода JSX от беспорядочного к стандартизированному на учебных презентациях
  • При отладке фрагментов кода React онлайн — сначала форматировать, потом анализировать структуру и локализовывать баги
  • В документации библиотек компонентов, генерирующих код JSX, гарантия единообразного и аккуратного стиля примера кода
  • Упорядочивание кода проектов React перед собеседованиями, гарантия стандартизированного стиля отправляемых примеров кода
  • Форматирование сгенерированного ИИ кода JSX перед помещением в проект, устранение проблем с несогласованностью формата в выводе ИИ
  • При разработке проектов React Native или Next.js — быстрое форматирование фрагментов кода компонента онлайн

Как использовать

  1. Вставьте код JSX/TSX в левый редактор, либо нажмите кнопку загрузки для импорта файлов .jsx/.tsx, либо загрузите напрямую из примеров
  2. Нажмите кнопку настроек для регулировки параметров форматирования: размер отступа, точка с запятой, кавычки, конечная запятая, ширина печати, опции JSX и т.д., либо оставьте конфигурацию по умолчанию
  3. Нажмите кнопку форматирования (или используйте горячую клавишу) для выполнения форматирования. Правая панель показывает результат мгновенно. Можно перетаскивать для регулировки ширины панелей
  4. Если нужно сжать, нажмите кнопку сжатия для переключения в режим сжатия. Движок Terser выведет минимизированный код JSX
  5. Нажмите кнопку копирования, чтобы скопировать результат в буфер обмена, либо нажмите скачать для сохранения в файл, либо отправьте другим людям через ссылку обмена

Функции

  • Движок Prettier v3: Основан на Prettier v3 Standalone, самом популярном в отрасли, как механизм форматирования в сочетании с парсером Babel. Результаты совпадают с расширением Prettier в VS Code, гарантируя единообразие стиля кода команды
  • 12 настроек форматирования: Регулируйте размер отступа (2/4/8 пробелов или Tab), точку с запятой, одинарные/двойные кавычки, конечную запятую (none/es5/all), интервал в скобках, скобки стрелочной функции, ширину печати, одинарные кавычки JSX, скобку JSX на той же строке, стратегию кавычек свойств и другие 12 параметров
  • Редактор с подсветкой синтаксиса JSX: Профессиональный редактор кода на основе CodeMirror 6, поддерживает подсветку синтаксиса JSX/TSX, номера строк, сопоставление скобок, ввод слева и результат справа в режиме реального времени
  • Функция сжатия JSX: Встроенный движок сжатия Terser, сжимает код компонентов JSX до минимального объёма в один клик. Поддерживает обфускацию имён переменных (mangle), удаление мёртвого кода, очистку console/debugger и другие расширенные опции сжатия
  • Переключение между 7 языками: Поддерживает JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — семь распространённых языков фронтенда. Один инструмент покрывает все потребности full-stack форматирования
  • Загрузка и скачивание файлов: Поддерживает прямую загрузку файлов .jsx/.tsx/.js/.ts/.css/.html/.json для форматирования, можно скачать и сохранить локально после обработки
  • Панель истории: Автоматически сохраняет недавние записи форматирования, поддерживает возврат к историческим версиям и сравнение эффектов форматирования при разных конфигурациях
  • Копирование результата в один клик: Форматированный или сжатый код копируется в буфер обмена в один клик, напрямую вставляется в IDE или проект
  • Функция обмена URL: Кодирует код и конфигурацию в hash URL через сжатие LZ-String. Скопируйте ссылку, чтобы поделиться полным кодом и параметрами форматирования
  • Дружелюбные подсказки об ошибках синтаксиса: Различает ошибки синтаксиса от других ошибок при сбое форматирования, даёт подсказки по локализации для быстрого исправления проблем с кодом
  • Перетаскиваемые колонки: Ширину левой и правой панелей можно свободно регулировать перетаскиванием, подстраиваясь под разные размеры экрана и привычки чтения
  • Локальная обработка в браузере: Всё форматирование, сжатие и анализ выполняется в JavaScript в браузере. Код не отправляется ни на какой сервер, гарантируя безопасность исходного кода

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

В чём принцип форматирования JSX? Какая связь с Prettier?

Этот инструмент использует версию Prettier v3 Standalone как движок форматирования на нижнем уровне. Он анализирует синтаксис JSX через парсер Babel, а затем заново выводит код с упорядоченным форматированием согласно настроенным правилам. Prettier — самый популярный инструмент форматирования кода в экосистеме фронтенда, широко используется в проектах React/Vue/Angular. Результаты форматирования этого инструмента в основном совпадают с результатами установки расширения Prettier в VS Code для форматирования файлов JSX. Подходит для быстрого онлайн форматирования без необходимости открывать локальную IDE.

Какие опции форматирования поддерживаются? Можно ли настроить отступ и стиль кавычек?

Поддерживает 12 настроек форматирования: 1) Размер отступа: 2 пробела/4 пробела/8 пробелов или использование Tab; 2) Использование точки с запятой; 3) Одинарные или двойные кавычки; 4) Стратегия конечной запятой: none (нет)/es5 (массивы и объекты)/all (включая параметры функции); 5) Пробелы внутри фигурных скобок объектов; 6) Скобки при одном параметре стрелочной функции; 7) Ширина печати (максимальное количество символов в строке); 8) Одинарные или двойные кавычки для атрибутов JSX; 9) Будет ли правая скобка многострочного JSX на той же строке с содержимым; 10) Стратегия кавычек для свойств объектов: as-needed/preserve/consistent; 11) Чувствительность к пробелам HTML; 12) Использование Tab для отступа. Свободные регулировки в панели настроек.

Изменяет ли форматирование логику кода JSX? Безопасно ли это?

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

Как работает функция сжатия JSX? Какие опции сжатия поддерживаются?

Сжатие JSX использует движок Terser (один из самых популярных компрессоров JavaScript в отрасли), выполняемый локально в браузере. Сжатие включает: удаление комментариев и лишних пробелов, сокращение и обфускация имён переменных (mangle), устранение мёртвого кода (dead_code), удаление неиспользуемых переменных (unused), оптимизация поднятия функций/переменных, упрощение условных выражений, оптимизация циклов и т.д. Сжатие сначала компилирует JSX в обычный JavaScript через Babel, а затем выполняет сжатие и оптимизацию. Примечание: сжатый код имеет резко сниженную читаемость, подходит для развёртывания в производственной среде, не подходит для разработки и отладки.

Поддерживается ли TypeScript (TSX)? В чём разница от JSX?

Поддерживается. Инструмент по умолчанию использует язык JSX. Вы можете переключиться в режим TSX через меню переключения языка в левом верхнем углу. Режим TSX использует парсер TypeScript, который корректно распознаёт аннотации типов TypeScript (interface, type, дженерики, утверждения типов и т.д.), не выдавая ошибок из-за синтаксиса типов. Режим JSX использует парсер Babel, подходит для компонентов React на чистом JavaScript. При сжатии TSX аннотации типов автоматически удаляются перед сжатием Terser.

Отправляется ли вводимый код JSX на сервер? Безопасна ли конфиденциальность?

Полностью безопасно. Все функции этого инструмента (форматирование, сжатие, обнаружение синтаксиса, история) выполняются локально в вашем браузере через JavaScript. Содержимое кода не отправляется по сети ни на какой внешний сервер. Prettier и Terser — библиотеки, реализованные чисто на JavaScript, которые могут выполняться напрямую на стороне браузера. Вы можете использовать этот инструмент офлайн — все функции продолжают работать нормально. История сохраняется в localStorage браузера, видна только на вашем текущем устройстве.

Где сохраняется история? Может ли она потеряться?

История сохраняется в localStorage (локальном хранилище) браузера, привязана к конкретному браузеру и устройству. Если вы очистите данные браузера, смените браузер или используете режим инкогнито, история будет потеряна. История служит для быстрого возврата к недавно отформатированным фрагментам кода, облегчая сравнение эффектов разных конфигураций. Рекомендуется самостоятельно сохранять важный код в виде файлов, не полагаясь только на функцию истории.

Отправляет ли функция обмена URL код на сервер?

Нет. Функция обмена URL сжимает код и конфигурацию с помощью LZ-String и кодирует их в части hash URL (содержимое после #). Hash URL имеет важную особенность: он не отправляется на сервер с HTTP-запросом, а читается и анализируется только локально в браузере JavaScript. Когда получатель открывает ссылку обмена, браузер напрямую анализирует hash и распаковывает для отображения кода — весь процесс не требует участия сервера. Однако обратите внимание: ссылка обмена содержит полное содержимое кода. Если код конфиденциален, не делитесь им в публичных каналах.

Что делать, если форматирование завершилось ошибкой синтаксиса?

Самая распространённая причина сбоя форматирования — в самом коде есть синтаксические ошибки: 1) Незакрытые теги JSX — проверьте, что все теги имеют соответствующую пару, что самозакрывающиеся теги корректны (<img />, а не <img>); 2) Несоответствующие скобки — проверьте, что фигурные {}, круглые (), квадратные [] скобки спарены; 3) Незакрытые кавычки — что кавычки строк полные; 4) Неправильно написанный синтаксис — например, использование синтаксиса, недопустимого в JSX. Можно сначала проверить номер строки и сообщение об ошибке в подсказке для локализации проблемы, либо упростить код и исследовать шаг за шагом.

Что такое ширина печати (printWidth)? Какое значение установить?

Ширина печати (printWidth) — один из центральных параметров Prettier, обозначает максимальное количество символов в строке кода. Когда строка кода превышает эту ширину, Prettier автоматически переносит её. Значение по умолчанию — 80 символов, это давняя программная конвенция (происходит от перфокарт и ширины терминала). Распространённые значения: 80 (классический консервативный), 100 (более распространённый), 120 (дружелюбный к широким экранам). Установка слишком маленького значения вызывает частые переносы, которые затрудняют чтение; слишком большого — делает строку слишком длинной для чтения на узких экранах. Рекомендуется выбирать значение между 80-120 в соответствии с нормами команды и шириной монитора.

Для чего нужна конечная запятая (trailing comma)? Какой режим выбрать?

Конечная запятая — это добавление запятой также после последнего элемента в многострочных структурах, таких как массивы, объекты и параметры функции. Преимущества включают: 1) Добавление/удаление элементов изменяет только одну строку, Git diff чище; 2) Избегает синтаксических ошибок из-за забытой запятой; 3) В некоторых случаях анализ стабильнее. Prettier предлагает три режима: none (без конечной запятой, самый лаконичный), es5 (только там, где поддерживается ES5, то есть массивы и объекты, наиболее совместимый), all (везде, где возможно, включая параметры функции, требует ES2017+ или поддержку Babel/TS). Для современных проектов рекомендуется режим 'all', он отлично работает с компиляцией Babel или TypeScript.

Как работают jsxSingleQuote и jsxBracketSameLine?

jsxSingleQuote (одинарные кавычки JSX): Управляет тем, используются ли в значениях атрибутов JSX одинарные или двойные кавычки. По умолчанию отключено (двойные кавычки), что соответствует конвенции HTML-атрибутов. При включении строки атрибутов в JSX используют одинарные кавычки. jsxBracketSameLine (скобка JSX на той же строке): Управляет тем, будет ли закрывающая правая скобка (/> или >) многострочных элементов JSX в конце последней строки (на той же строке) или на новой строке (на другой строке). По умолчанию отключено (новая строка). При включении правая скобка находится на той же строке, что и последний атрибут. У разных команд разные предпочтения — выбирайте стиль, согласованный с проектом.

Поддерживается ли пакетное форматирование нескольких файлов?

В настоящее время веб-инструмент в основном разработан для сценариев быстрого форматирования одного файла, поддерживает загрузку отдельного файла. Если у вас много файлов JSX/TSX для пакетного форматирования, рекомендуется установить инструмент Prettier CLI в проект и обрабатывать пакетно через командную строку (например, npx prettier --write "src/**/*.jsx"). Базовый движок этого инструмента точно такой же, как у Prettier, результаты форматирования идентичны. В будущих версиях может быть рассмотрено добавление функции пакетной обработки.

Можно ли использовать в паре с ESLint?

Да. В реальных проектах рекомендуется использовать Prettier для формата кода (переносы строк, отступы, пробелы, кавычки и т.д.), а ESLint — для качества кода (неиспользуемые переменные, потенциальные баги, лучшие практики и т.д.). Рекомендуемая практика совместного использования: 1) Установить eslint-config-prettier для отключения правил формата в ESLint, конфликтующих с Prettier; 2) Сначала запустить форматирование Prettier, потом проверку ESLint. Этот инструмент фокусируется на форматировании (то, в чём хорош Prettier) и не включает функцию проверки кода ESLint.

Можно ли использовать на телефоне? Каков мобильный опыт?

Можно использовать в браузере телефона. Инструмент adopts адаптивный дизайн, автоматически регулирует макет на устройствах с маленьким экраном — левая-правая колонки становятся верхняя-нижняя, кнопки панели инструментов оптимизированы под размеры, подходящие для касания. Однако редактирование кода на телефоне имеет худший опыт, чем на десктопе. Рекомендуется использовать в основном на компьютере. Если вам часто нужно обрабатывать код на мобильных устройствах, рекомендуется использовать мобильные приложения редактора кода, поддерживающие Prettier.

Устранение неполадок

Что делать, если форматирование завершилось ошибкой синтаксиса?

Сначала убедитесь, что код полный: компонентам JSX обычно нужен export или хотя бы функция, возвращающая JSX. Распространённые синтаксические ошибки включают: 1) Незакрытые теги JSX — проверьте, что у каждого открывающего тега есть соответствующий закрывающий тег или самозакрывающаяся разметка; 2) Несоответствующие фигурные скобки — спарены ли скобки выражений {} в JSX; 3) Незакрытые кавычки строк — проверьте все одинарные кавычки/двойные кавычки/обратные кавычки; 4) Использование зарезервированных слов в JSX — например, class нужно писать как className, for — как htmlFor; 5) Несколько корневых элементов — JSX допускает только один корневой элемент, несколько элементов нужно оборачивать в <>...</> или <div>. Сообщения об ошибках обычно указывают номер строки и причину, которые можно использовать для локализации.

Нет реакции или неправильный формат после загрузки файла?

Сначала убедитесь, что расширение файла корректное — файлы .jsx/.tsx/.js/.ts/.css/.html/.json можно загружать. Если расширение файла нестандартное, инструмент может некорректно распознать формат языка, в результате форматирование не будет соответствовать ожиданиям. Решения: 1) Гарантируйте, что расширение файла в стандартном формате; 2) После загрузки проверьте, что выбор языка в левом верхнем углу корректный, при неверном — можно переключить вручную; 3) Убедитесь, что содержимое файла — чистый текст, а не бинарный файл; 4) Слишком большие файлы (более 1МБ) могут вызывать зависания браузера, рекомендуется использовать десктопные инструменты для обработки.

Форматированный код отличается от результата моего локального Prettier?

Возможные причины: 1) Разница версий — этот инструмент использует Prettier v3, если в вашем проекте используется версия v2, некоторые детали могут отличаться (например, изменение значения по умолчанию конечной запятой); 2) Разные конфигурации — проверьте, согласуются ли параметры, такие как ширина печати, отступ, кавычки, конечная запятая, с конфигурацией проекта; 3) Разные парсеры — JSX использует парсер Babel, TSX — парсер TypeScript, убедитесь, что выбран нужный; 4) Разница плагинов — если локальный Prettier имеет установленные дополнительные плагины (например, prettier-plugin-tailwindcss), этот инструмент не включает эти плагины. Рекомендуется настроить конфигурацию этого инструмента так, чтобы она соответствовала .prettierrc проекта.

Код не работает корректно после сжатия JSX?

Сжатие JSX использует движок Terser, который сначала компилирует JSX в обычный JavaScript перед сжатием. Если сжатый код не работает, проверьте: 1) Не слишком ли агрессивна конфигурация сжатия — например, включение toplevel может изменить поведение модуля; 2) Использует ли код eval или динамический доступ к свойствам — обфускация переменных может вызвать несоответствие имён; 3) Зависит ли от конкретных имён функций или классов — если да, нужно включить опции keep_fnames или keep_classnames. Для сжатия в производственной среде рекомендуется использовать инструменты сборки проекта (Vite/Webpack), у них более полные конфигурации и экосистема плагинов.

Глоссарий

JSX
Сокращение от JavaScript XML, расширение синтаксиса JavaScript, введённое React, которое позволяет писать структуры тегов, похожие на HTML, в JS. После компиляции преобразуется в вызовы React.createElement().
Prettier
Самый популярный убеждённый (opinionated) инструмент форматирования кода на сегодняшний день, поддерживает JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown и т.д., стал фактическим стандартом форматирования фронтенд-кода.
Babel
Компилятор JavaScript, который может преобразовывать новые синтаксисы, такие как ES6+/JSX/TS, в код ES5, совместимый со старыми браузерами, также служит базовым движком Prettier для анализа JSX.
Terser
Один из самых популярных в отрасли компрессоров (minifier) JavaScript/JSX, поддерживает обфускацию переменных, устранение мёртвого кода, сжатие кода и т.д. Является компрессором по умолчанию для инструментов сборки, таких как Webpack/Vite.
Print Width
Один из центральных параметров Prettier, обозначает максимальное количество символов в строке кода, с автоматическим переносом при превышении этой ширины. По умолчанию 80 символов, распространённые настройки 80/100/120.
Trailing Comma
Добавление запятой также после последнего элемента в многострочных структурах, таких как массивы, объекты и параметры функции. Может сделать Git diff чище и избежать синтаксических ошибок. Prettier поддерживает три режима: none/es5/all.
Mangle
Техника сокращения имён переменных/функций при сжатии кода, заменяющая осмысленные длинные имена на короткие, такие как a/b/c, уменьшая объём кода и также увеличивая сложность чтения.
Dead Code Elimination
Техника оптимизации компрессоров, удаляющая код, который никогда не будет выполняться (например, код при условии false, неиспользуемые переменные и функции), уменьшая объём продукта.
CodeMirror
Компонент редактора кода для браузера, используемый этим инструментом (версия 6), предоставляет профессиональные функции редактирования, такие как подсветка синтаксиса, номера строк, сопоставление скобок, широко применяется в различных онлайн IDE.
LZ-String
Алгоритм сжатия LZ, реализованный на JavaScript, используется для эффективного сжатия и хранения содержимого кода в hash URL. Высокая степень сжатия и быстрая скорость декодирования, подходит для сценариев ссылок обмена.
localStorage
API локального хранилища ключ-значение, предоставляемое браузером, ёмкость около 5-10МБ, данные сохраняются постоянно (если не очищать активно). Этот инструмент использует его для хранения истории форматирования.
ESLint
Инструмент статической проверки кода JavaScript/TypeScript (Linter), отвечающий в основном за качество кода и лучшие практики, обычно используется в паре с Prettier (Prettier отвечает за формат, ESLint — за качество).

Поддерживаемые языки и форматы файлов

Инструмент поддерживает 7 распространённых языков фронтенда, которые можно свободно переключать через меню в левом верхнем углу:

ЯзыкРасширение файлаДвижок форматированияДвижок сжатия
JavaScript.js, .mjs, .cjsPrettier (Babel)Terser
TypeScript.ts, .mts, .ctsPrettier (TypeScript)Terser (сначала убирает типы)
JSX.jsxPrettier (Babel)Terser
TSX.tsxPrettier (TypeScript)Terser (сначала убирает типы)
CSS.cssPrettier (PostCSS)CSSO
HTML.html, .htmPrettier (HTML)Пользовательская реализация
JSON.jsonPrettier (JSON)JSON.stringify

Обзор настроек форматирования

12 настраиваемых параметров форматирования и их назначение:

Пункт настройкиВозможные значенияЗначение по умолчаниюОписание
tabWidth Размер отступа2 / 4 / 8 / Tab2 пробелаКоличество пробелов на каждый уровень отступа, или использование символа Tab
semi Точка с запятойtrue / falsetrueДобавлять ли точку с запятой в конце инструкций
singleQuote Одинарные кавычкиtrue / falsefalse (двойные кавычки)Используют ли строки JS одинарные или двойные кавычки
trailingComma Конечная запятаяnone / es5 / alles5Добавлять ли конечную запятую после последнего элемента в многострочных структурах
bracketSpacing Интервал в скобкахtrue / falsetrueДобавлять ли пробел внутри фигурных скобок объектов
arrowParens Скобки стрелочной функцииalways / avoidalwaysДобавлять ли скобки при одном параметре стрелочной функции
printWidth Ширина печатиЧисло (рекомендуется 80-120)80Максимальное количество символов в строке, автоматический перенос при превышении
jsxSingleQuote Одинарные кавычки JSXtrue / falsefalseЗначения атрибутов JSX используют одинарные кавычки (по умолчанию: двойные)
jsxBracketSameLine Скобка JSX на той же строкеtrue / falsefalseБудет ли правая скобка многострочного JSX на той же строке с последним атрибутом
quoteProps Кавычки свойствas-needed / preserve / consistentas-neededКогда добавлять кавычки к именам свойств объектов

Сравнение эффектов до и после сжатия JSX

На примере типичного компонента React показываем изменение объёма до и после сжатия:

Пункт сравненияФорматировано (разработка)Сжато (продакшен)Степень сжатия
Объём кодаОколо 2.5 KBОколо 0.8 KB~68%
Количество строкОколо 80 строк1 строка~99%
Имена переменныхОсмысленные именаОдиночные буквы a/b/c/d—
КомментарииВсе комментарии сохраненыВсе удалены—
ЧитаемостьВысокая (отладка и чтение)Очень низкая (читается только машиной)—
Применимые сценарииРазработка, отладка, ревьюПроизводственное развёртывание, распределение CDN—

Privacy & Security

Все операции этого инструмента форматирования JSX выполняются полностью локально в браузере: вводимый или загружаемый вами код форматируется и сжимается только в JavaScript в браузере, не отправляется по сети ни на какой внешний сервер. Prettier и Terser — библиотеки чисто на JavaScript, которые могут выполняться напрямую на стороне браузера. История сохраняется в localStorage (локальном хранилище) браузера, видна только на текущем устройстве и браузере. Функция обмена URL сжимает код через LZ-String и кодирует его в части hash URL (содержимое после # не отправляется на сервер). Страница не использует отслеживание Cookie, не собирает содержимое кода, вводимого пользователем. Вы можете использовать этот инструмент офлайн, с нормальной работой центральных функций.

Authoritative References