📋 محتويات الصفحة
📖 الوصف
إضافة 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)
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
Color Picker
إضافة VS Code لاختيار الألوان