Question 1

Что такое Prettier Config Generator?

Accepted Answer

Бесплатный интерактивный веб-инструмент для визуальной настройки каждой опции Prettier и мгновенного копирования файла .prettierrc.

Question 2

Что такое Prettier и зачем его использовать?

Accepted Answer

Prettier — форматтер кода, обеспечивающий единый стиль во всём проекте и устраняющий споры о стиле на код-ревью.

Question 3

Что такое файл .prettierrc?

Accepted Answer

Файл конфигурации в корне проекта, указывающий Prettier как форматировать код.

Question 4

Как использовать этот инструмент для генерации конфигурации?

Accepted Answer

Выберите опции Prettier на главной странице. Конфигурация обновляется в реальном времени. Нажмите "Копировать конфигурацию" и вставьте JSON в файл .prettierrc.

Question 5

Prettier Config Generator бесплатен?

Accepted Answer

Да, полностью бесплатен. Без регистрации, без аккаунта, без ограничений.

Question 6

Охватывает ли инструмент все опции Prettier?

Accepted Answer

Да. Включены все официально поддерживаемые опции с описаниями и значениями по умолчанию.

Question 7

Как скопировать и использовать сгенерированную конфигурацию?

Accepted Answer

На десктопе нажмите "Копировать конфигурацию" в боковой панели, на мобильном — плавающую кнопку.

Question 8

В чём разница между .prettierrc, prettier.config.js и ключом prettier в package.json?

Accepted Answer

Все три — допустимые способы. .prettierrc поддерживает JSON/YAML, prettier.config.js — JavaScript-модуль, ключ prettier в package.json — всё в одном файле.

Question 9

Работает ли Prettier с TypeScript, React и Vue?

Accepted Answer

Да. Встроенная поддержка TypeScript, JSX/TSX, Vue-компонентов и многого другого.

Question 10

Как интегрировать Prettier с VS Code?

Accepted Answer

Установите расширение "Prettier - Code formatter" и добавьте formatOnSave: true в настройки VS Code.

Question 11

Как запустить Prettier на всём проекте?

Accepted Answer

Выполните npx prettier --write . в корне проекта.

Question 12

Какие языки и типы файлов поддерживает Prettier?

Accepted Answer

JavaScript, TypeScript, JSX, CSS, HTML, Vue, JSON, YAML, Markdown и другие.

Question 13

Как исключить файлы из форматирования Prettier?

Accepted Answer

Создайте файл .prettierignore в корне проекта.

Question 14

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

Accepted Answer

Да. Установите eslint-config-prettier.

Question 15

Что делает опция printWidth?

Accepted Answer

Задаёт целевую длину строки. По умолчанию 80.

Question 16

В чём разница между singleQuote и jsxSingleQuote?

Accepted Answer

singleQuote управляет кавычками в JS/TS, jsxSingleQuote — атрибутами JSX.

Question 17

Как пользоваться поиском на сайте?

Accepted Answer

Используйте строку поиска вверху страницы.

Question 18

Поддерживает ли сайт тёмную тему?

Accepted Answer

Да. Нажмите кнопку переключения темы в шапке.

Question 19

Какова конфигурация Prettier по умолчанию?

Accepted Answer

printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Question 20

Как сообщить об ошибке или внести вклад?

Accepted Answer

Откройте issue или pull request в репозитории GitHub.

Question 21

Какие версии Prettier поддерживает этот инструмент?

Accepted Answer

Вы можете выбрать любой релиз Prettier 3.x из выпадающего списка версий — от 3.0 до 3.6 плюс "latest". Бандл выбранной версии загружается по требованию из jsDelivr, поэтому список опций всегда соответствует реальной схеме этого релиза.

Question 22

Какие языки можно форматировать на вкладке «Ваш код»?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, шаблоны Angular, JSON, JSON5, JSON с комментариями, Markdown, MDX, YAML и GraphQL. Парсер определяется автоматически по вводу, но вы можете переопределить его в выпадающем списке.

Question 23

Как работает ссылка для шаринга?

Accepted Answer

Нажмите кнопку шаринга, и текущая версия Prettier, выбранные опции, код и переопределение парсера сжимаются LZ в хеш URL и копируются в буфер обмена. Открытие этой ссылки восстанавливает точно такую же конфигурацию. Ничего не отправляется на сервер — всё остаётся в браузере.

Question 24

Что означает счётчик токенов рядом с diff?

Accepted Answer

Он показывает, сколько токенов ИИ обойдутся ваш ввод и вывод в выбранной модели. GPT-4o / GPT-4 / GPT-3.5 используют официальные BPE-токенизаторы для точного подсчёта; Claude, Gemini, Llama и Mistral используют посимвольное приближение с префиксом "~".

Question 25

Сохраняется ли работа после перезагрузки страницы?

Accepted Answer

Да. Ваша версия Prettier, выбор опций и настройки разделённого вида / токенизатора сохраняются в localStorage, поэтому перезагрузка всё восстанавливает. Хеш ссылки для шаринга имеет приоритет, если он присутствует при открытии страницы.

Question 26

Почему иногда появляется полоса ошибки форматирования?

Accepted Answer

Когда парсер Prettier не может разобрать ваш ввод — обычно потому, что выбранный парсер не соответствует коду (например, выбран CSS, а вы вставили JSX) — сообщение об ошибке появляется красной полосой над diff. Смените парсер на соответствующий коду — и ошибка исчезнет.

Question 27

Можно ли предварительно проверить мою конфигурацию на языках, отличных от JavaScript?

Accepted Answer

Да. Во вкладке Preview есть собственный parser dropdown рядом с переключателем diff, и к каждому parser прилагается специально подготовленный пример — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, а также TypeScript / JS. Переключение parser переформатирует соответствующий пример с текущими опциями, поэтому языкозависимые опции вроде proseWrap, htmlWhitespaceSensitivity и vueIndentScriptAndStyle получают возможность продемонстрировать свой эффект. Ваш выбор сохраняется между перезагрузками.

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