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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Відкрийте issue або pull request у репозиторії GitHub. Проєкт вітає внески будь-якого роду, включаючи нові функції, виправлення помилок та поліпшення перекладів.

Ви можете вибрати будь-який реліз Prettier 3.x з випадаючого списку версій — від 3.0 до 3.6 плюс «latest». Пакет вибраної версії завантажується на вимогу з jsDelivr, тому список опцій завжди відповідає фактичній схемі цього релізу.

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

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

Вона показує, скільки AI-токенів коштуватимуть ваші вхідні та вихідні дані для обраної моделі. GPT-4o / GPT-4 / GPT-3.5 використовують офіційні BPE-токенізатори для точного підрахунку; Claude, Gemini, Llama та Mistral використовують символьне наближення з префіксом «~».

Так. Ваша версія Prettier, вибрані опції та налаштування розділеного перегляду / токенізатора зберігаються в localStorage, тому перезавантаження відновлює все. Хеш посилання для поширення має пріоритет, якщо він присутній при відкритті сторінки.

Коли парсер Prettier не може розібрати ваш ввід — зазвичай тому, що обраний парсер не відповідає коду (наприклад, обрано CSS, але вставлено JSX) — повідомлення про помилку з'являється в червоній смузі над порівнянням. Перемкніть парсер на відповідний вашому коду — і помилка зникне.

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