Code Formatter (Prettier) — Форматировщик кода

Что делает этот форматировщик кода

Этот инструмент запускает Prettier — форматировщик кода с жёстко заданным стилем, которым пользуется значительная часть экосистемы JavaScript, — прямо в вашем браузере. Prettier не просто исправляет отступы: он разбирает исходный код в синтаксическое дерево и печатает его заново по небольшому набору правил. Поэтому результат всегда единообразен, каким бы неряшливым ни был исходный код: длинные списки аргументов переносятся, объекты разбиваются на несколько строк только тогда, когда превышают ширину строки, кавычки и точки с запятой следуют одному соглашению, а лишние пробелы в конце строк исчезают.

Вы можете форматировать JavaScript, JSX, TypeScript и TSX, три основных диалекта таблиц стилей (CSS, SCSS и Less), HTML со встроенными стилями и скриптами, JSON, схемы и запросы GraphQL, документы Markdown и конфигурационные файлы YAML. Для каждого языка используется собственный плагин Prettier, и загружается только нужный, так что страница остаётся лёгкой, пока вы действительно что-то не отформатируете.

Описание параметров

Print width (ширина строки) — это длина строки, в пределах которой Prettier старается оставаться; по умолчанию это 80, а в командах с широкими мониторами часто выбирают 100 или 120. Tab width задаёт, сколько пробелов занимает один уровень отступа, а Indent with переключает между пробелами и настоящими символами табуляции. Semicolons определяет, завершаются ли инструкции в JavaScript и TypeScript точкой с запятой; если параметр выключен, Prettier ставит её только там, где без неё возникает неоднозначность. Single quotes отдаёт предпочтение ' вместо " для строк, если это не требует экранирования. Эти параметры один к одному соответствуют настройкам в файле .prettierrc, так что вы можете воспроизвести конфигурацию своего проекта.

Приватно и практично

Всё происходит локально: форматировщик никогда не загружает ваш код, не сохраняет его и не отправляет ни в какой API. Поэтому им безопасно пользоваться для проприетарного кода, конфигурационных файлов с внутренними именами хостов или фрагментов, скопированных во время инцидента в продакшене. Когда парсер находит синтаксическую ошибку, сообщение показывает строку и столбец, а курсор переходит в это место входных данных — так можно быстро найти пропущенную скобку в большом файле JSON или YAML. В повседневной работе держите Prettier в редакторе и CI; а этой страницей пользуйтесь, когда работаете на компьютере без привычных инструментов, просматриваете фрагмент кода из чата или приводите код в порядок перед вставкой в документацию.