📋 محتويات الصفحة
📖 الوصف
Error Lens هي إضافة لـ VS Code تعرض رسائل الخطأ والتحذير مباشرة بجانب الكود في نفس السطر. بدلاً من الاعتماد على squiggly lines فقط، تظهر الرسالة كاملة بجانب السطر المصاب.
🎯 يستخدم في
مجالات استخدام هذه الأداة
عرض أخطاء TypeScript مباشرة
عرض تحذيرات ESLint في السياق
تتبع المشاكل بشكل أسرع
تقليل الحاجة للـ Problems Panel
تحسين تجربة Debugging
فهم أخطاء الكود
✨ المميزات
أبرز مميزات هذه الأداة
عرض الأخطاء في نفس السطر (Inline)
ألوان مميزة (أحمر للخطأ، أصفر للتحذير)
دعم تشخيصات متعددة في سطر واحد
تخصيص الألوان والرموز
Jump to Problem سريع
خفيف على الأداء
توافق مع ESLint
TypeScript
إلخ
Outline margin للتمييز البصري
⚠️ العيوب
نقاط يجب مراعاتها
قد يزدحم الكود في الأسطر الطويلة
غير مناسب للشاشات الصغيرة
يتعارض مع بعض الإضافات
يتطلب تكوين مناسب
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .vscode/settings.json
{
"errorLens.enabledDiagnosticLevels": ["error", "warning", "info"],
"errorLens.enabled": true,
"errorLens.delay": 300,
"errorLens.excludeBySource": [],
"errorLens.fontStyleItalic": true,
"errorLens.onSave": true,
"errorLens.gutterIconsEnabled": true,
"errorLens.followCursor": "allLines",
"errorLens.errorColor": "#ff0000",
"errorLens.warningColor": "#ffaa00",
"errorLens.infoColor": "#00ccff"
}📚 أدوات أخرى في Extensions
قد يعجبك أيضاً
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
CSS Modules
⭐إضافة VS Code لدعم CSS Modules
ESLint
⭐إضافة VS Code للتحقق من جودة الكود
ESLint Extension
⭐إضافة VS Code للتحقق من جودة الكود (Code Linting)