Prettier چیست؟

خب Prettier یک Code Formatter خودکار است که کدهای شما را به صورت استاندارد و یکدست فرمت می‌کند. این ابزار باعث می‌شود کدها تمیز، خوانا و هماهنگ باشند.

مثال:

قبل از فرمت شدن:

const name = "Ali";

بعد از فرمت شدن:

const name = "Ali";

چرا فایل .prettierrc مهم است؟

1. یکدست بودن کد در تیم

وقتی چند نفر روی یک پروژه React کار می‌کنند، سلیقه‌ها متفاوت است. .prettierrc مشخص می‌کند همه از یک قانون فرمت استفاده کنند.

2. کاهش خطاهای Merge در Git

فرمت‌های متفاوت باعث تغییرات اضافی در commitها می‌شود. Prettier این مشکل را کاهش می‌دهد.

3. تمرکز روی منطق برنامه

به جای درگیر شدن با فاصله و کوتیشن، تمرکز روی منطق برنامه می‌ماند.

نصب Prettier در پروژه React

داخل پوشه پروژه:

npm install --save-dev prettier

یا:

yarn add --dev prettier

ساخت فایل تنظیمات

در روت پروژه یکی از فایل‌های زیر را بسازید:

.prettierrc

یا:

.prettierrc.json

نمونه کانفیگ مناسب برای React

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

توضیح گزینه‌های مهم

• semi → گذاشتن سمی‌کالن
• singleQuote → استفاده از ' به جای "
• trailingComma → گذاشتن کاما در انتهای آبجکت و آرایه
• printWidth → حداکثر طول هر خط
• tabWidth → تعداد فاصله برای indent
• arrowParens → پرانتز برای پارامترهای arrow function

اجرای Prettier

اجرای دستی

npx prettier --write .

کل پروژه را فرمت می‌کند.

استفاده در VS Code

1. افزونه Prettier - Code formatter را نصب کنید.
2. و Format On Save را فعال کنید.
3. سپس Default Formatter را روی Prettier قرار دهید.

از این به بعد با هر بار ذخیره فایل، کد به صورت خودکار فرمت می‌شود.

ترکیب با ESLint

اگر از ESLint استفاده می‌کنید، بهتر است این پکیج را نصب کنید:

npm install --save-dev eslint-config-prettier

این کار از تداخل قوانین ESLint و Prettier جلوگیری می‌کند.

مطالعه بیشتر در مورد ESLint، پیشنهاد می‌کنم مقاله [ESLint-React-Guide]

(/en/blog/react/Prettier-React-Guide) رو هم بخونی.

جمع‌بندی

استفاده از .prettierrc باعث می‌شود:

• کدها تمیز و خوانا باشند
• کار تیمی ساده‌تر شود
• اختلاف سلیقه حذف شود
• تمرکز روی منطق برنامه باقی بماند