VS Clone

محرر أكواد مستوحى من VS Code

قمت بتطوير واجهة متقدمة لمحاكاة محرر الأكواد الشهير Visual Studio Code باستخدام React، مع التركيز على بناء تجربة استخدام احترافية تشبه بيئة التطوير الحقيقية داخل المتصفح.

يهدف المشروع إلى توفير بيئة عمل متكاملة لإدارة الملفات وكتابة الأكواد بطريقة منظمة وسلسة، مع تصميم حديث وأداء عالي.

=> التقنيات المستخدمة:

React

TypeScript / Tailwind / CSS

=> أبرز المميزات:

مستكشف الملفات (File Explorer):

عرض هيكل الملفات والمجلدات بشكل هرمي.

إمكانية فتح وإغلاق المجلدات.

دعم أيقونات ديناميكية لأنواع ملفات متعددة.

تمييز الملف أو المجلد النشط بشكل واضح.

إدارة التبويبات (Tabs):

فتح عدة ملفات في نفس الوقت.

تحديد التبويب النشط بشكل واضح.

إغلاق التبويبات بسهولة مع إدارة الحالة.

الحفاظ على حالة التبويبات أثناء العمل.

إبراز الكود (Syntax Highlighting):

عرض الكود بتنسيق واضح وألوان مريحة.

دعم أرقام الأسطر لتسهيل القراءة والتنقل.

دعم عدة لغات برمجية.

قائمة سياقية (Context Menu):

تنفيذ إجراءات سريعة من خلال النقر بزر الفأرة الأيمن.

إغلاق تبويب أو جميع التبويبات.

ظهور القائمة في موقع المؤشر.

واجهة مرنة (Resizable Layout):

إمكانية تغيير حجم الشريط الجانبي.

إخفاء/إظهار لوحة الملفات.

حفظ إعدادات الواجهة تلقائيًا.

مميزات إضافية:

شاشة ترحيبية عند عدم فتح ملفات.

تصميم حديث مستوحى من VS Code.

واجهة متجاوبة تعمل على جميع الأجهزة.

=> الهدف من المشروع:

بناء محرر أكواد تفاعلي يحاكي تجربة VS Code داخل المتصفح باستخدام React، مع التركيز على الأداء وتنظيم المكونات (Component Architecture).

=> ما يميز المشروع:

بنية React منظمة وقابلة للتوسع.

تجربة مستخدم قريبة من الأدوات الاحترافية.

تصميم نظيف وأداء عالي.