Prettier يوحّد الشكل

الحزمة هي المصدر

Prettier فورماتر رأيه جاهز: عرض السطر، الاقتباس، الفاصلة المنقوطة، وفين السطر يتكسر. أنت مش بتكتب ستايل من الصفر. أنت بتقلب مفاتيح قليلة فوق الافتراضي.

التثبيت في أدوات التطوير، وبنسخة ثابتة. Prettier لو اتحدث لوحده ممكن يعيد تنسيق المستودع كله في commit شكله “مفيش تغيير منطقي”:

npm install --save-dev --save-exact prettier

--save-dev يحطها في أدوات التطوير. --save-exact يكتب الرقم من غير علامة تسمح بالتحديث الصامت. أمر زي npm prettier --save-exact مش تثبيت. npm هيفهم الكلمة دي أمر تشغيل، مش إضافة حزمة.

بـ pnpm: pnpm add -D -E prettier.

ملف الإعدادات يغلب الافتراضي

أنشئ .prettierrc في جذر المشروع. المفاتيح اللي جواه بس هي اللي بتتغير. الباقي يفضل زي ما Prettier خارج من المصنع.

{  "semi": false}

semi عن آخر الجملة، مش عن كل سطر. true يحط فاصلة منقوطة بعد الجملة. false يشيلها. والسطر الفاضي والسطر المكمل لجملة مش هياخد فاصلة زيادة عشان “سطر جديد”.

الافتراضي أصلًا semi: true. يعني ملف فيه القيمة دي مش هيغيّر حاجة. عشان تشوف إن الملف غالب الافتراضي، حط false ونسّق ملف فيه جمل.

المحرك بيدوّر على .prettierrc من فولدر الملف وطالع لجوه المشروع. مش محتاج تعلّمه المكان لو الملف في الجذر.

الامتداد يربط الحفظ، والحزمة تنفّذ

ثبّت امتداد Prettier في Cursor أو VS Code عشان اختصار التنسيق و”نسّق لما أحفظ” يوصلوا للحزمة. من غير الامتداد، الحزمة لسه بتشتغل من الطرفية. من غير الحزمة، الامتداد ممكن ينسّق بنسخته هو.

إعدادات المحرر للمشروع بس تتحط في .vscode/settings.json وتتتساب في Git، عشان الجهاز الجديد يفتح المشروع ومن غير ما كل واحد يظبط إعداداته بإيده:

{  "editor.defaultFormatter": "esbenp.prettier-vscode",  "editor.formatOnSave": true}

defaultFormatter يقول للمحرر: اللي ينسّق هو امتداد Prettier، مش منسّق تاني. formatOnSave يشغّله مع الحفظ. Cursor يقرأ نفس الملف.

لو ملف الإعدادات مش في المكان المعتاد، ساعتها بس تزود "prettier.configPath": ".prettierrc". في الجذر، الامتداد يلاقيه لوحده.

أمر يكتب، وأمر يفحص بس

npx prettier --write app.jsnpx prettier --check app.jsnpx prettier --check .

--write يظبط الملف في مكانه. --check ميغيّرش حاجة. لو الملف محتاج تنسيق، الأمر يطلع برقم غير صفر، وده اللي يخلى الـ CI يفشل. النقطة في آخر أمر تعني المشروع كله، مع احترام التجاهل.

الشرطة شرطتين عاديتين. شرطة طويلة أو مسافة بين الشرطتين والأمر بتخلي الطرفية تشوف علم تاني.

التجاهل زي git

.prettierignore بنفس قواعد .gitignore. اسم في كل سطر.

distcoveragepnpm-lock.yaml

node_modules متجاهل من Prettier أصلًا. كتابته مفيش ضرر، لكن الاسم الصحيح فيه شرطة سفلية: node_modules مش كلمة واحدة ملزوقة.

*.css يعني “متظبطش أي CSS”. اعملها بس لو الفريق قرر كده، مش كعادة. ملف القفل (pnpm-lock.yaml أو package-lock.json) بيتولد، فتنسيقه بيعمل diff ضخم من غير فايدة.

خلّصت الفصل لما

• تثبّت Prettier كأداة تطوير وبنسخة ثابتة
• تفرق semi عن فكرة فاصلة في كل سطر
• تشغّل التنسيق من الحفظ ومن --write
• تستخدم --check من غير ما الملف يتغير
• تتجاهل مخرجات البناء بملف ignore