پرسش‌های متداول

Prettier Config Generator یک ابزار وب تعاملی و رایگان است که به شما اجازه می‌دهد به‌صورت بصری هر گزینه Prettier را پیکربندی کنید و بلافاصله فایل .prettierrc حاصل را کپی کنید. هیچ ویرایش دستی لازم نیست.

Prettier یک قالب‌بند کد دارای نظر است که سبک یکنواختی را در کل کدبیس شما اعمال می‌کند. تمام سبک‌های اصلی را حذف کرده و کد شما را با قالبی یکدست بازنویسی می‌کند و بحث‌های سلیقه‌ای در بازبینی کد را از بین می‌برد.

فایل .prettierrc یک فایل پیکربندی است که در ریشه پروژه قرار می‌گیرد و به Prettier می‌گوید چگونه کد شما را قالب‌بندی کند. این فایل گزینه‌هایی مانند تورفتگی، سبک نقل‌قول و عرض خط را کنترل می‌کند.

گزینه‌های Prettier موردنظر خود را در صفحه اصلی انتخاب کنید. پیکربندی شما در نوار کناری به‌صورت بلادرنگ به‌روزرسانی می‌شود. روی «Copy Config» کلیک کنید تا JSON در کلیپ‌بورد کپی شود، سپس آن را در فایل .prettierrc در ریشه پروژه خود بچسبانید.

بله، کاملاً رایگان. نه ثبت‌نام لازم است، نه حسابی نیاز است و نه محدودیتی در استفاده وجود دارد. این ابزار همچنین در GitHub منبع‌باز است.

بله. این ابزار شامل تمام گزینه‌های رسمی پشتیبانی‌شده Prettier است، با توضیحات و مقادیر پیش‌فرض برای هرکدام، تا بتوانید انتخاب‌های آگاهانه‌ای داشته باشید.

روی دکمه «Copy Config» در نوار کناری دسکتاپ کلیک کنید یا روی دکمه شناور در موبایل ضربه بزنید. محتوای JSON کپی‌شده را در فایلی جدید با نام .prettierrc در ریشه دایرکتوری پروژه خود بچسبانید.

هر سه روش معتبری برای پیکربندی Prettier هستند. .prettierrc از JSON یا YAML پشتیبانی می‌کند. prettier.config.js یک ماژول JavaScript است و امکان پیکربندی پویا را می‌دهد. کلید prettier در package.json همه چیز را در یک فایل نگه می‌دارد. عملکرد یکسان است — مسئله سلیقه‌ای است.

بله. Prettier از TypeScript، JSX/TSX (React)، کامپوننت‌های تک‌فایلی Vue و بسیاری قالب‌های دیگر پشتیبانی داخلی دارد. برای برخی فریم‌ورک‌ها ممکن است نیاز به نصب افزونه‌های اضافی داشته باشید.

افزونه «Prettier - Code formatter» را از فروشگاه VS Code نصب کنید. سپس "editor.defaultFormatter": "esbenp.prettier-vscode" و "editor.formatOnSave": true را به تنظیمات VS Code خود اضافه کنید.

در ریشه پروژه خود npx prettier --write . را اجرا کنید. این کار همه فایل‌های پشتیبانی‌شده را قالب‌بندی می‌کند. برای نتایج یکسان در تیم، Prettier را به عنوان وابستگی توسعه با 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 می‌گوید چه طول خطی را برای جا دادن کد در آن هدف بگیرد. مقدار پیش‌فرض ۸۰ است. این یک هدف نرم است — اگر شکستن خط کد را خواناناتر کند، 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. parser به‌صورت خودکار از ورودی تشخیص داده می‌شود، اما می‌توانید آن را با فهرست بازشدنی بازنویسی کنید.

روی دکمه اشتراک‌گذاری کلیک کنید و نسخه فعلی Prettier، گزینه‌های انتخاب‌شده، کد و parser سفارشی با lz-string فشرده‌سازی شده و به هش URL اضافه می‌شوند، سپس در کلیپ‌بورد شما کپی می‌شوند. باز کردن آن لینک پیکربندی دقیقاً مشابه را بازیابی می‌کند. هیچ‌چیز به سرور ارسال نمی‌شود — همه چیز در مرورگر باقی می‌ماند.

این نشان می‌دهد که ورودی و خروجی شما در مدل انتخاب‌شده چند توکن هوش مصنوعی هزینه دارد. GPT-4o / GPT-4 / GPT-3.5 از توکن‌سازهای رسمی BPE برای شمارش دقیق استفاده می‌کنند؛ Claude، Gemini، Llama و Mistral از تقریب مبتنی بر کاراکتر استفاده می‌کنند که با «~» پیشوند دارد.

بله. نسخه Prettier، انتخاب گزینه‌ها و تنظیمات نمای دوستونی / توکن‌ساز شما در localStorage ذخیره می‌شود، بنابراین بارگذاری مجدد همه چیز را بازیابی می‌کند. اگر هنگام باز کردن صفحه هش URL قابل اشتراک موجود باشد، اولویت با آن است.

وقتی parser در Prettier نتواند ورودی شما را تجزیه کند — معمولاً به این دلیل که parser انتخاب‌شده با کد مطابقت ندارد (مثلاً CSS انتخاب شده ولی JSX چسبانده‌اید) — پیام خطا در نواری قرمز بالای diff ظاهر می‌شود. parser را با کد خود مطابقت دهید تا خطا پاک شود.

بله. زبانه Preview فهرست بازشدنی parser مخصوص خود را در کنار سوئیچ diff دارد و هر parser با یک نمونه ساخته‌شده برای همان زبان همراه است — CSS، SCSS، Less، HTML، Vue، Angular، JSON / JSON5 / JSONC، Markdown، MDX، YAML، GraphQL و همچنین TypeScript / JS. تغییر parser نمونه مربوطه را با گزینه‌های فعلی شما دوباره قالب‌بندی می‌کند، بنابراین گزینه‌های مخصوص زبان مانند proseWrap، htmlWhitespaceSensitivity و vueIndentScriptAndStyle جایی برای نشان دادن اثر خود دارند. انتخاب شما در بارگذاری‌های مجدد باقی می‌ماند.