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

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

В JavaScript есть несколько конструкций, которые полностью выводят из строя простой подход подсчёта фигурных скобок и точек с запятой. Шаблонные строки могут содержать произвольный текст между обратными кавычками, включая символы, выглядящие в точности как код, — `` `function() { return "not real code"; }` `` это одно строковое значение, а не три выражения, и форматировщик, не отслеживающий границы шаблонных строк, неверно их истолкует. Литералы регулярных выражений ещё хуже: `/{}/ ` содержит символы, похожие на фигурные скобки, но являющиеся частью самого шаблона регулярного выражения, а не структурным синтаксисом. Автоматическая расстановка точек с запятой добавляет третий уровень сложности, поскольку JavaScript позволяет опускать точки с запятой во многих контекстах и определяет конец выражения по правилам, которые наивный построчный форматировщик не способен правильно воспроизвести. Настоящий разбор языка в полноценное синтаксическое дерево, как это делает Prettier, — это то, что позволяет избежать всех трёх видов сбоев: упрощённый форматировщик, ошибающийся хотя бы в одном из них на продакшен-коде, — это риск, а не удобство.

Prettier форматирует код — унифицирует пробелы, переносы строк, стиль кавычек и подобные оформительские решения — и явно не проверяет, корректен ли код, типобезопасен ли он и свободен ли от ошибок. Файл с ошибкой типа, обращением к неопределённой переменной или логической ошибкой отформатируется без единой жалобы, если он синтаксически валиден, потому что форматирование и проверка типов — это отдельные задачи, которыми занимаются отдельные инструменты. Именно компилятор TypeScript или линтер вроде ESLint отвечает за проверку корректности; задача этого инструмента заканчивается на том, чтобы сделать код единообразным и читаемым по стилю.

Табы или пробелы, одинарные кавычки или двойные, точки с запятой или без них — ни один из этих выборов сколько-нибудь заметно не влияет на то, как работает код, а споры о них раньше отнимали реальное время в код-ревью, не имея никакого отношения к корректности. Настоящая ценность Prettier — в том, что он полностью убирает этот спор со стола: небольшой, продуманный набор правил форматирования, применяемый автоматически и одинаково везде, означает, что дискуссия решается один раз, в конфигурации, а не повторяется в каждом последующем pull request.

Каждая доступная здесь настройка — ширина отступа, точки с запятой, стиль кавычек — отражает реальный параметр конфигурации Prettier, поэтому, вставив код из проекта с известным `.prettierrc` и выставив те же самые настройки здесь, вы получите ровно тот же результат, который выдал бы инструментарий этого проекта, — без необходимости ничего устанавливать локально просто для того, чтобы проверить, как отформатируется фрагмент кода.