Question 1

Що таке Prettier Config Generator?

Accepted Answer

Prettier Config Generator — це безкоштовний інтерактивний вебінструмент, який дозволяє візуально налаштувати кожну опцію Prettier і миттєво скопіювати отриманий файл .prettierrc. Ручне редагування не потрібне.

Question 2

Що таке Prettier і чому я маю його використовувати?

Accepted Answer

Prettier — це форматер коду з власною думкою, що забезпечує єдиний стиль у вашій кодовій базі. Він прибирає весь оригінальний стиль і перевиводить ваш код у єдиному форматі, усуваючи суперечки про стиль під час code review.

Question 3

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

Accepted Answer

Файл .prettierrc — це конфігураційний файл, розміщений у корені вашого проєкту, який вказує Prettier, як форматувати ваш код. Він контролює опції на кшталт відступів, стилю лапок і ширини рядка.

Question 4

Як використати цей інструмент для генерації моєї конфігурації?

Accepted Answer

Виберіть бажані опції Prettier на головній сторінці. Ваша конфігурація оновлюється в реальному часі на бічній панелі. Натисніть «Скопіювати конфігурацію», щоб скопіювати JSON у буфер обміну, потім вставте його у файл .prettierrc у корені вашого проєкту.

Question 5

Чи безкоштовний Prettier Config Generator?

Accepted Answer

Так, повністю безкоштовний. Без реєстрації, без потреби в обліковому записі та без обмежень використання. Інструмент також з відкритим кодом на GitHub.

Question 6

Чи охоплює цей інструмент усі опції Prettier?

Accepted Answer

Так. Цей інструмент включає кожну офіційно підтримувану опцію Prettier з описами та значеннями за замовчуванням, показаними для кожної, щоб ви могли робити обґрунтовані вибори.

Question 7

Як скопіювати та використати згенеровану конфігурацію?

Accepted Answer

Натисніть кнопку «Скопіювати конфігурацію» на бічній панелі на десктопі або торкніться плаваючої кнопки дії на мобільному пристрої. Вставте скопійований JSON-вміст у новий файл з назвою .prettierrc у корені каталогу проєкту.

Question 8

Яка різниця між .prettierrc, prettier.config.js та ключем prettier у package.json?

Accepted Answer

Усі три — допустимі способи налаштування Prettier. .prettierrc підтримує JSON або YAML. prettier.config.js — це модуль JavaScript і дозволяє динамічну конфігурацію. Ключ prettier у package.json зберігає все в одному файлі. Функціональність однакова — це питання вподобань.

Question 9

Чи працює Prettier з TypeScript, React та Vue?

Accepted Answer

Так. Prettier має вбудовану підтримку TypeScript, JSX/TSX (React), однофайлових компонентів Vue та багатьох інших форматів. Для деяких фреймворків може знадобитися встановлення додаткових плагінів.

Question 10

Як інтегрувати Prettier з VS Code?

Accepted Answer

Встановіть розширення «Prettier - Code formatter» з marketplace VS Code. Потім додайте "editor.defaultFormatter": "esbenp.prettier-vscode" та "editor.formatOnSave": true до налаштувань VS Code.

Question 11

Як запустити Prettier на всьому проєкті?

Accepted Answer

Запустіть npx prettier --write . у корені проєкту. Це відформатує всі підтримувані файли. Додайте prettier як dev-залежність через npm install --save-dev prettier для узгоджених результатів у вашій команді.

Question 12

Які мови та типи файлів підтримує Prettier?

Accepted Answer

Prettier підтримує JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown та інше. Його також можна розширити плагінами для додаткових мов.

Question 13

Як ігнорувати файли при форматуванні Prettier?

Accepted Answer

Створіть файл .prettierignore у корені вашого проєкту, використовуючи той самий синтаксис, що й .gitignore. Перелічені там файли та каталоги Prettier пропускатиме.

Question 14

Чи можна використовувати Prettier разом з ESLint?

Accepted Answer

Так. Встановіть eslint-config-prettier, щоб вимкнути правила форматування ESLint, які конфліктують з Prettier. Використовуйте Prettier для форматування, а ESLint для правил якості коду — вони ідеально доповнюють одне одного.

Question 15

Що робить опція printWidth?

Accepted Answer

printWidth вказує Prettier довжину рядка, у яку він має намагатися вмістити код. За замовчуванням 80. Це м'яка ціль — Prettier перевищить її, якщо розбиття рядка зробить код менш читабельним.

Question 16

Яка різниця між singleQuote та jsxSingleQuote?

Accepted Answer

singleQuote контролює, чи використовує Prettier одинарні лапки в рядках JavaScript/TypeScript. jsxSingleQuote контролює саме рядки атрибутів JSX. Їх можна задавати незалежно.

Question 17

Як користуватися пошуком на цьому сайті?

Accepted Answer

Використовуйте панель пошуку у верхній частині сторінки, щоб фільтрувати опції Prettier за назвою, описом або ключовим словом. Результати оновлюються миттєво під час введення.

Question 18

Чи підтримує цей сайт темний режим?

Accepted Answer

Так. Натисніть кнопку перемикання теми в заголовку, щоб перемикатися між світлим режимом, темним режимом і системними налаштуваннями. Ваш вибір зберігається автоматично.

Question 19

Яка стандартна конфігурація Prettier?

Accepted Answer

Значення Prettier за замовчуванням: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true та arrowParens: "always".

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

Що означає кількість токенів поруч із порівнянням?

Accepted Answer

Вона показує, скільки AI-токенів коштуватимуть ваші вхідні та вихідні дані для обраної моделі. 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) — повідомлення про помилку з'являється в червоній смузі над порівнянням. Перемкніть парсер на відповідний вашому коду — і помилка зникне.

Question 27

Чи можу я переглядати свою конфігурацію проти мов, відмінних від JavaScript?

Accepted Answer

Так. Вкладка Перегляд має власний випадаючий список парсерів поруч із перемикачем порівняння, і кожен парсер має спеціально створений зразок — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL плюс TypeScript / JS. Перемикання парсерів повторно форматує відповідний зразок з вашими поточними опціями, тому мовно-специфічні опції на кшталт proseWrap, htmlWhitespaceSensitivity та vueIndentScriptAndStyle мають місце для демонстрації свого ефекту. Ваш вибір зберігається між перезавантаженнями.

Поширені запитання