ارتقِ بإنتاجيتك: إضافات VS Code لا غنى عنها للمطورين

يُعد امتلاك محرر نصوص أو أكواد جيد يتناسب مع سير عملك أمرًا بالغ الأهمية لإنتاجيتك كمطور. يأتي VS Code مزودًا بالعديد من الميزات افتراضيًا، ولكن إليك 7 إضافات ستساعدك على الارتقاء بسير عملك إلى مستوى آخر.

ما هو VS Code؟

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

إضافات VS Code: ارتقِ بإنتاجيتك

جزء مما يجعل VS Code رائعًا هو قابليته للتوسع (extensibility). فهو يتيح للمطورين الارتقاء بالمحرر بشكل إبداعي من خلال تنفيذ ميزات قد لا ترغب مايكروسوفت في دعمها، أو حتى بناء تجربة كاملة لتدوين الملاحظات فوقه باستخدام Foam. بينما تتوفر آلاف الإضافات في سوق VS Code Marketplace، هذه هي الإضافات السبع الحاسمة لسير عملي كمطور نشط.

Sublime Text Keymap and Settings Importer

قبل الانتقال إلى VS Code، كنت مستخدمًا لـ Sublime Text 3. لا يزال محرر نصوص رائعًا، ولكن عند الانتقال إلى VS Code، لم تكن العديد من الاختصارات وتعيينات المفاتيح (key mappings) هي نفسها. سمحت لي إضافة Sublime Text Keymap and Settings Importer أولاً باستيراد إعداداتي من Sublime Text، لكنها أيضًا قامت بإعداد تعيينات المفاتيح الافتراضية. هذا جعل الاختصارات التي كانت متاحة في Sublime متاحة على الفور في VS Code.

يشمل هذا اثنتين من مفضلاتي مثل التحديد المتعدد (multi-select) (تحديد شيء ثم الضغط على CMD+D / Ctrl+D) ونسخ السطر (duplicating a line) (وضع مؤشر على سطر والضغط على CMD+Shift+D / Ctrl+Shift+D).

Import Cost

يتعين على مطوري اليوم التعامل باستمرار مع التبعيات (dependencies) القادمة من مصادر مختلفة. عندما نقوم بسحب مجموعة من الأكواد المختلفة لبناء مشروعنا، فإن هذا الكود الإضافي يأتي بتكلفة.

تحسب Import Cost تقديرًا لحجم الاستيراد (import)، مما يتيح لنا رؤية مقدار الوزن الإضافي الذي سنضيفه إلى حجم مشروعنا مع هذه التبعية المضافة. يساعدنا هذا في التعرف على حجم تبعياتنا، مما يمنع التحميل الزائد العرضي للمكتبات الضخمة التي قد تؤثر على الأداء وتضر بتجربة المستخدم لعملائنا.

indent-rainbow

يُعد الأسلوب (style) عاملًا مهمًا في جعل الكود الخاص بنا قابلًا للقراءة. جزء من هذا الأسلوب هو كيفية مسافة البادئة (indent) للكود، حتى نفهم تداخل كتل الكود المختلفة. المشكلة هي أن هذا التداخل قد ينمو أحيانًا بشكل كبير، وقد يكون من الصعب محاولة العثور على أي وسم فتح (opening tag) ينتمي إلى أي وسم إغلاق (closing tag).

تضيف indent-rainbow ألوانًا إلى مسافات البادئة، مما يتيح لنا محاذاة ورؤية الوسوم التي تنتمي لبعضها البعض بسهولة.

Rainbow Brackets

على غرار مسافات البادئة، يمكن أن يؤدي الكود المعقد، خاصة عند استخدام العمليات الحسابية، إلى إنشاء أسطر كود مربكة بسهولة عندما يكون لديك استخدامات متعددة للأقواس (parenthesis) داخل نفس العبارة. على سبيل المثال، إذا أردنا تطبيق بعض العمليات الحسابية البسيطة:

const value = ((( 1 + 1 )* 2 )+ 1 )* 2;

وبينما هذا مثال بسيط، يمكن أن يخرج عن السيطرة بسهولة ويصعب تتبعه.

تُبرز Rainbow Brackets الأقواس بألوان مختلفة، مما يتيح لنا الحصول على فكرة أفضل عن أي قوس فتح ينتمي إلى أي قوس إغلاق في معادلتنا.

Settings Sync

إذا كنت تعمل عادةً بين جهازين محمولين (laptops) أو بيئتين مختلفتين، فقد تضطر إلى الحفاظ على محرر النصوص الخاص بك كما هو يدويًا، إذا كنت دقيقًا بشأن إعداداتك (مثلي تمامًا).

تسمح لك Settings Sync بحفظ إعدادات VS Code الخاصة بك في GitHub Gist. يتيح لك هذا مزامنة تلك الإعدادات عبر تثبيتات VS Code المختلفة.

Profile Switcher

بصفتي صانع محتوى، أحتاج إلى التأكد من أنني عندما أعرض شاشتي للآخرين، أستخدم ألوانًا وأحجام خطوطًا يمكن الوصول إليها (accessible colors and font sizes) تتيح للأشخاص رؤية ما أقوم بعرضه بسهولة. المشكلة هي أن هذه الإعدادات ليست ما أحب استخدامه يوميًا عندما أكون منغمسًا في كتابة الكود. تتيح لك Profile Switcher إعداد ملفات تعريف (profiles) متعددة لـ VS Code، كل منها بإعداداته الخاصة، مما يتيح لك التبديل بسهولة بين الإعدادات المختلفة.

Better Comments

بينما قد لا تبدو التعليقات (comments) مهمة عند كتابة الكود، إلا أنها حاسمة في مساعدة الآخرين على فهم هذا الكود. كما أنها عادة ما تساعدك على فهمه عندما تنظر إليه بعد عام من الآن. هذه التعليقات مفيدة، ولكن قد يكون من الصعب قراءتها، حيث إنها عادة ما تكون بلون رمادي واحد لا يبرز بالضرورة.

هنا يأتي دور Better Comments، التي تضيف نوعًا من تمييز بناء الجملة (syntax highlighting) إلى التعليقات، مضيفة ألوانًا إلى الكلمات المفتاحية والعبارات التي تساعد على قابلية قراءة تعليقات الكود الخاص بك.

Duplicate Action

هذه الأخيرة تبدو شيئًا صغيرًا، ولكن لسبب ما، لا يأتي VS Code مع القدرة على النقر بزر الماوس الأيمن على ملف ونسخه افتراضيًا. عندما أكون منغمسًا في الكود، عادةً ما أقوم بنسخ ملف، مثل قالب موجود، مما يسمح لي بتغيير المحتوى فقط. هذا يجعل إنشاء صفحة جديدة أكثر إنتاجية.

تضيف Duplicate Action ببساطة خيار Duplicate File or Folder إلى قائمة السياق (context menu) عندما تنقر بزر الماوس الأيمن على ملف أو مجلد.