إعدادات يجب تغييرها بعد تحميل VSCode
1- الخط:
استخدام الخط الافتراضي في VSCode لا يساعد أغلب الأحيان في قراءة الأكواد بشكل جيد لذا من خلال الدخول الى الاعدادات ومن ثم البحث عن “Font Family” يمكنك تغيير الخط, لكن قبل تغييره لابد من تحميله على جهازك.
يعد خط “Fira Code” أحد أشهر الخطوط المجانية المناسبة لكتابة الأكواد البرمجية يمكن تحميله من هنا.
بعد تحميل الخط واختياره من الاعدادات اذهب الى ملف “settings.json“ من خلال المسار:
تأكد من اضافة الكود التالي الى الملف لضمان عمل جميع رموز الخط.
2- الحفظ التلقائي للملفات:
بعد الدخول الى الاعدادات ابحث عن “autosave” ستجد عدة خيارات اختر “afterDelay” ثم قم بزيادة الفاصل الزمني من 1000 ميلي ثانية الى 3000 ميلي على الاقل وذلك لضمان عدم استهلاك موارد الجهاز بشكل كبير.
3- ايقاف التحديث التلقائي:
الحصول على أحدث نسخة من أي تطبيق هو في الغالب أمر جيد لكن القيام بذلك أئناء كتابة الأكواد سيضعف أداء الجهاز لذا قم بايقاف التحديث التلقائي لكل من VSCode و الاضافات من خلال البحث عن “auto update” ضمن الاعدادات.
4- اخفاء رموز وشارات Git
يعتبر نظام التحكم في الاصدارات (Git) أحد أكثر الأدوات المساعدة للمبرمجين لكن الشارات والرموز التي تظهر التغييرات سواء في المحرر أو في مستعرض الملفات الجانبي مزعجة لمعظم المبرمجين.
ابحث ضمن الاعدادات عن “Scm Diff Decorations” وقم بتغييرها الى “none”.
ابحث عن “Git Decorations“ وألغي تحديدها.
5- اضافة بعض الألوان الى الكود:
وذلك من خلال البحث في الاعدادات عن “BracketPairs” وتحويل الخيارين الظاهرين الى “true”.
6- اعادة التسمية التلقائية
من خلال البحث ضمن الاعدادات عن “editor.linkedEditing” وتفعيلها.
7- اظهار نقاط بدل الفراغات:
من خلال البحث ضمن الاعدادات عن “RenderWhitespace” وتعديلها الى “boundary”.
8- ازالة الرموز والقوائم غير الضرورية:
أزل المسار الذي يظهر أعلى الملفات من خلال البحث ضمن الاعدادات عن “Breadcrumbs” ثم الغاء تحديدها.
أزل القوائم الرئيسية في الأعلى من خلال الذهاب الى View ثم Apperance ثم Menu Bar.
أزل الرموز الجانبية غير الضرورية من خلال الضغط بزر الماوس الأيمن على الشريط الجانبي ومن ثم اختيار ما تحتاجه فقط.
أزل رمز الاشعارات في شريط الحالة أسفل المحرر فغالبا لن تحتاجه وذلك بالضغط بزر الماوس الأيمن.
9- أظهر شريط البحث
من خلال الذهاب الى الاعدادات ومن ثم البحث عن “commandCente”.
10- اخغاء أحد شريطي التمرير
لن تحتاج الى أكثر من شريط تمرير واحد ضمن VSCode لذا قم يإخفاء أحدها:
لإخفاء شريط الـ Minimap ابحث ضمن الاعدادات عن “editor.minimap.enabled“ وقم بالغاء التحديد.
لإخفاء شريط التمرير العادي ابحث ضمن الاعدادات عن “editor.scrollbar.vertical scrollbar size“ وقم بتغيير قيمته الى “0“.
11- الاكمال التلقائي في ملفات JSX
بدلا من الكتابة اليدوية لرموز HTML في ملفات JSX قم بتفعيل الاكمال التلقائي من خلال البحث ضمن الاعدادات عن “Emmet: Include Languages“ اضغط “Add Item“ وأدخل القيم التالية:
Key = javascript
Value = javascriptreact
هذه القيم خاصة بـ React ولتفعيلها على مكتبات أخرى يمكن ادخال قيم أخرى.
12- أضف بعض الـ Animation
من خلال البحث ضمن الاعدادات عن “Cursor Smooth Caret Animation“ واجعلها “on“
ابحث عن “Cursor Blinking“ وقم بتغييرها الى “expand“
اضافات أساسية لا بد من تحميلها:
Prettier — Code formatter
منسق أكواد: JavaScript · HTML · JSX · JSON . CSS
Material Icon Theme
ايقونات بلغة تصميم Material Design ضمن VSCode
Live Server
يوفر خادم محلي لتطوير المواقع مع ميزة التحديث التلقائي
indent-rainbow
يجعل المسافة البادئة أسهل في القراءة
Rainbow Tags
تلوين HTML Tags وفق مستوياتها المختلفة
Toggle Excluded Files
اظهار/اخفاء الملفات المستبعدة (المخفية) في مستكشف الملفات
markdownlint
يساعد في عرض واكتشاف أخطاء الملفات المكتوب بلغة Markdown
VS Code ES7+ React/Redux/React-Native/JS snippets
يساعد في اختصار كتابة أكواد React
ESLint
يساعد في اكتشاف اخطاء JavaScript ومكتباتها
Path Intellisense
يساعد في اكمال أسماء الملفات تلقائيا
Npm Intellisense
يساعد في الاكمال التلقائي لـ npm modules ضمن import statements
Auto Import - ES6, TS, JSX, TSX
يساعد في الاكمال التلقائي لـ modules ضمن import statements
Auto Rename Tag
يساعد في اعادة تسمية HTML Tags حتى في ملفات الـ JSX