📋 محتويات الصفحة
📖 الوصف
إضافة Prettier الرسمية لـ VS Code تدمج منسق الكود Prettier داخل المحرر. تنسق الكود تلقائياً عند الحفظ أو يدوياً بضغطة زر، تدعم JavaScript, TypeScript, CSS, HTML, JSON, وغيرها.
🎯 يستخدم في
مجالات استخدام هذه الأداة
تنسيق الكود تلقائياً
ضمان نمط كود موحد في الفريق
تنسيق ملفات JSON
Markdown
YAML
Format on Save
تنسيق ملفات JSX
TSX
تنسيق GraphQL و CSS-in-JS
✨ المميزات
أبرز مميزات هذه الأداة
تنسيق تلقائي عند الحفظ (Format on Save)
دعم 30+ لغة ونظام
Format Selection لتنسيق جزء محدد
دعم Flat Config و .prettierrc
تسليط الضوء على المشاكل في الكود
تكامل مع ESLint
Quick Access من Command Palette
دعم .prettierignore
⚠️ العيوب
نقاط يجب مراعاتها
قد يتعارض مع ESLint rules
خيارات تنسيق محدودة (By Design)
يتطلب تكوين صحيح
لا يدعم جميع اللغات (بعض اللغات تحتاج plugins)
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}📚 أدوات أخرى في Extensions
قد يعجبك أيضاً
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
CSS Modules
⭐إضافة VS Code لدعم CSS Modules
Error Lens
⭐إضافة VS Code لعرض الأخطاء في السطر (Inline Diagnostics)
ESLint
⭐إضافة VS Code للتحقق من جودة الكود