إذا كنت تبرمج يوميًا، فستعرف أن وجود محرر جيد الضبط يحدث الفرق بين يوم مثمر ومهرجان من الإحباطات. أصبح برنامج Visual Studio Code محررًا مرجعيًا بفضل أدائه ونظام الإضافات الخاص به، ومجتمع ضخم يواصل ابتكار أدوات جديدة.
لا يكمن السحر الحقيقي لبرنامج VS Code في المحرر الأساسي فحسب، بل في نظامه البيئي أيضًا. تضيف مئات الإضافات ميزات متقدمة مثل الإكمال التلقائي، وأدوات فحص الأخطاء، والسمات، والخوادم المحلية، وتصحيح الأخطاء، والأيقونات، وتكامل Git، والذكاء الاصطناعي، وغير ذلك الكثير.ستجد في هذا الدليل مجموعة كاملة للغاية من الإضافات الموصى بها: من الإضافات الأساسية لأي لغة، إلى تلك الخاصة بلغات JavaScript و Python و PHP و HTML/CSS و TypeScript والعمل اليومي مع Git أو Docker أو Markdown.
ما هو برنامج VS Code ولماذا تعتبر إضافاته مهمة للغاية؟
Visual Studio Code هو محرر أكواد مجاني ومتعدد المنصات تم تطويره بواسطة مايكروسوفت، وهو متوفر لأنظمة ويندوز وماك أو إس ولينكس، ويُعد من بين أفضل بيئات التطوير.
يتضمن بالفعل ميزات قوية للغاية جاهزة للاستخدام مباشرة: تمييز بناء الجملة، و IntelliSense، وتصحيح الأخطاء المتكامل، ومحطة طرفية، وتكامل Git، ودعم أساسي للعديد من اللغاتلكن الأمر يتطور حقًا عندما تبدأ بتثبيت الإضافات لتكييف البيئة مع طريقة عملك.
تم تصميم بنية VS Code لتكون قابلة للتوسيع بدرجة كبيرة: يمكن تحسين أو استبدال كل جانب من جوانب المحرر تقريبًا، بدءًا من نظام تصحيح الأخطاء وحتى السمات والأيقونات أو الإكمال التلقائي للغة معينة.
علاوة على ذلك، لا يوجد برنامج واحد فقط لـ VS Code: يمكنك استخدام النسخة الرسمية أو البدائل مفتوحة المصدر مثل VSCodiumوالتي تزيل بيانات القياس عن بعد وبعض الأجزاء الخاصة، ولكنها تحافظ على التوافق مع معظم الإضافات.
كيفية تثبيت وإدارة الإضافات في VS Code
تثبيت الإضافات في VS Code سهل للغاية. يتم إنجاز كل شيء من داخل واجهة المحرر نفسها.دون الحاجة إلى تنزيل الملفات يدويًا.
لإضافة ميزات جديدة، افتح المحرر وانتقل إلى لوحة الإضافات (أيقونة مربعة في الشريط الجانبي أو اختصار). Ctrl+Shift+X / Cmd+Shift+X على نظام macOS). ومن هناك، ابحث بالاسم أو الكلمة المفتاحية. الامتداد الذي يهمك.
عندما تجد إضافة مثيرة للاهتمام، تحقق من ورقة المعلومات الخاصة بها: عدد التنزيلات، والتقييمات، والتوافق، ولقطات الشاشةسيعطيك ذلك مؤشراً جيداً حول ما إذا كان الأمر يستحق التثبيت أم لا.
لإكمال العملية، ما عليك سوى النقر على زر التثبيت. يتم تفعيل معظم الإضافات على الفوريتطلب بعضها إعادة تحميل نافذة المحرر، ويحتاج القليل منها إلى تكوين إضافي (على سبيل المثال، تلك التي تعتمد على أدوات خارجية مثل ESLint، وPHP Debug مع Xdebug، وما إلى ذلك).
إضافات عامة أساسية لأي مشروع
هناك مجموعة من الإضافات التي يجب على الجميع تقريبًا تثبيتها، بغض النظر عن اللغة أو التقنية التي يستخدمونها. إنهم يركزون على الإنتاجية، والتنسيق، والتعاون، والتحكم في الإصدارات، وتجربة المستخدم..
أجمل
أجمل هو منسق الكود القياسي بحكم الواقع في عالم جافا سكريبت والعديد من اللغات الأخرى، يقوم تلقائيًا بإعادة كتابة التعليمات البرمجية الخاصة بك وفقًا لقواعد أسلوب محددة جيدًا.
وهو قادر على التنسيق جافا سكريبت، تايب سكريبت، JSX، TSX، JSON، HTML، CSS، SCSS، Less، YAML، GraphQL، Markdown، Vue، Angular وغيرها الكثير. الفكرة هي أن النقاشات حول استخدام علامات الاقتباس المفردة أو المزدوجة، والفاصلة المنقوطة أو عدم استخدامها، ومواضع استخدام الأقواس، وما إلى ذلك، ستختفي لأن يتبع المشروع بأكمله نفس النهج.
يمكنك استخدام الإعدادات الافتراضية أو إنشاء قواعدك الخاصة باستخدام أنواع الملفات .prettierrcالشيء المعتاد هو تفعيل تنسيق عند الحفظبحيث يكون الكود نظيفًا ومتسقًا في كل مرة تضغط فيها على Ctrl+S.
ESLint
بينما يركز برنامج Prettier على جانب البرمجة، يركز برنامج ESLint على الجودة والممارسات الجيدةإنها أداة فحص الأخطاء الأكثر استخدامًا في مشاريع جافا سكريبت وتايب سكريبت الحديثة.
تتيح إضافة ESLint لبرنامج VS Code تشغيل التحليل في الخلفية أثناء الكتابة. يعرض الأخطاء والتحذيرات مباشرة على الكود.تسليط الضوء على الأسطر الإشكالية وتقديم اقتراحات سريعة لتصحيحها.
يمكنك استخدام التكوينات الشائعة الاستخدام مثل توصيات Airbnb أو Standard أو ESLint الرسميةأو يمكنك تحديد قواعدك الخاصة لتكييفها مع المشروع. كما أنه متوافق مع الإضافات الخاصة بأطر العمل مثل React وVue وNode.js.
تعليقات أفضل
في المشاريع الكبيرة، ينتهي الأمر بالتعليقات إلى أن تكون فوضى مشوشة يصعب متابعتها. تتيح لك ميزة "التعليقات المحسّنة" تصنيف التعليقات بصريًا باستخدام الألوان وفقًا للبادئة التي تستخدمها.
على سبيل المثال، يمكنك كتابة تعليقات من النوع الجميع، تحذير، هام، سؤالإلخ، ولكل منها أسلوبها الخاص. وهذا يُسهّل كثيراً تحديد المهام المعلقة، أو الملاحظات الهامة، أو الشروحات الرئيسية عند مراجعة الكود.
المدقق الإملائي للكود
على الرغم من أنه قد يبدو وكأنه تفصيل بسيط، تبدو الأخطاء الإملائية في أسماء المتغيرات أو التعليقات أو نصوص واجهة المستخدم سيئة للغاية.يعمل مدقق الإملاء البرمجي كمدقق إملائي للبرامج.
يحلل المعرفات والسلاسل والتعليقات و ضع علامة على الكلمات المشبوهةيقدم البرنامج اقتراحات لتصحيح الأخطاء. ويمكن استخدامه مع لغات برمجة متعددة، وهو مفيد للغاية عند كتابة التوثيق أو النصوص المرئية للمستخدم ضمن الكود.
عدسة الخطأ
يعرض برنامج VS Code بالفعل الأخطاء والتحذيرات، ولكن في بعض الأحيان تمر دون أن يلاحظها أحد. عدسة الخطأ تجعل تجاهلها مستحيلاً عرض معلومات التشخيص مباشرة بجوار السطر المتأثر وفي هامش المحرر.
سترى ذلك بنظرة سريعة حيث تتركز الأخطاء في ملف واحددون الحاجة إلى فتح لوحة المشكلات. في المشاريع الكبيرة التي تحتوي على العديد من أدوات التحليل والتحقق من الأخطاء، يُعدّ هذا الأمر مفيدًا للغاية لضمان عدم إغفال أي شيء.
عداء كود
إذا كنت ترغب في المحاولة أجزاء صغيرة من التعليمات البرمجية دون الحاجة إلى تجميع مشروع كامليُعدّ برنامج Code Runner عمليًا للغاية. فهو يسمح لك بتشغيل التعليمات البرمجية من لغات متعددة (JavaScript، Python، C، C++، Java، PHP، وغيرها) مباشرة من المحرر.
يمكنك تشغيل الملف الحالي أو الكتلة المحددة فقط، عرض المخرجات على لوحة مدمجة أو في طرفية VS Code نفسها، وتخصيص الأوامر المستخدمة لكل لغة.
مسار Intellisense
عند العمل مع العديد من الأصول والواردات والمسارات النسبية، فإن كتابتها يدويًا خطأ مؤكد. خاصية الإكمال التلقائي لمسارات الملفات والمجلدات (Path Intellisense) أثناء كتابة السلاسل النصية مع المسارات.
يعمل على استيراد ملفات JavaScript/TypeScript، ومراجع CSS، ومسارات صور HTML وبشكل عام، في أي سياق يكتشف فيه VS Code أنك تكتب مسارًا، فإنه يوفر الوقت ويتجنب الأخطاء الإملائية المزعجة.
vscode-icons، وسمة أيقونات Material، وحزم أيقونات أخرى
لا تقتصر الرموز على الجانب الجمالي فحسب. يُتيح لك تصميم الأيقونات الجيد التعرف على نوع الملف على الفور. بمجرد النظر إلى المتصفح.
أيقونات VSCode، أو سمة أيقونات Material، أو أيقونات VSCode الرائعة، أو سمات محددة مثل أيقونات أبسط في VSCode مع Angular توفر هذه الأدوات أيقونات مخصصة للغات والأطر وملفات التكوين (Angular، Docker، env، إلخ).
إن اختيار أحدهما أو الآخر مسألة ذوق، ولكن أي منها يحسن بشكل كبير من سهولة قراءة شجرة الملفاتوخاصة في المشاريع ذات الوحدة الواحدة أو المشاريع الكبيرة.
جيت لينس
ربما يكون GitLens أقوى إضافة للعمل مع Git من VS Codeيرتقي هذا النظام بالتحكم في الإصدارات إلى مستوى آخر من خلال دمج سجل التغييرات بالكامل داخل المحرر.
يسمح لك بالرؤية من قام بتغيير كل سطر ومتى (المسؤولية)، تاريخ الملف، مقارنة المراجعات، استكشاف الفروع والوسوموغير ذلك الكثير. كما يعرض أيضًا تعليقات توضيحية سياقية على الكود تتضمن معلومات حول آخر عملية إيداع.
إذا كنت تعمل ضمن فريق، فمن الرائع أن تفهم أسباب بعض التغييرات، ومراجعة حالات التراجع، وإجراء مراجعة للتعليمات البرمجية دون مغادرة المحرر.
حصة لايف
للبرمجة الثنائية أو الإرشاد عن بعد، تُعد ميزة المشاركة المباشرة من أفضل الميزات المتاحة.يتيح لك ذلك مشاركة جلسة VS Code الخاصة بك مع شخص آخر في الوقت الفعلي.
بإمكانكما كلاكما قم بتحرير نفس الملف، وقم بتصحيح الأخطاء معًا، وشارك المحطات الطرفية والخوادم المحلية. بل ويمكنه فتح دردشة مدمجة. إنه مثالي لحل المشكلات المعقدة أو لتعليم شخص ما كيفية العمل على مشروع معين.
إضافات خاصة بلغة جافا سكريبت وتايب سكريبت
يُعد نظام JavaScript و TypeScript البيئي أحد أكثر الأنظمة التي يحظى بدعم كبير من VS Code. إذا كنت تعمل في مجال تطوير الواجهة الأمامية، أو الواجهة الخلفية باستخدام Node، أو تطوير البرامج المتكاملة، فإن هذه الإضافات ستوفر لك ساعات عديدة..
مقتطفات من كود JavaScript (ES6)
إن كتابة نفس الهياكل مراراً وتكراراً أمر ممل. تضيف مقتطفات كود JavaScript (ES6) الكثير من المقتطفات للصياغة الحديثة من جافا سكريبت وتس.
باستخدام الاختصارات القصيرة يمكنك إنشاء الدوال السهمية، والفئات، والاستيرادات، و console.log، وهياكل الحلقات وأكثر من ذلك بكثير. إنه مثالي للحفظ بشكل أقل والكتابة بشكل أسرع.
ميزة الإكمال التلقائي لـ npm وامتداد npm
عندما تعمل مع العديد من الحزم، فإن تذكر الأسماء الدقيقة ليس بالأمر الممتع. يقوم برنامج npm Intellisense بإكمال أسماء الوحدات النمطية المثبتة تلقائيًا في وارداتك ومتطلباتك.
في الوقت نفسه، يتكامل ملحق npm الرسمي لـ VS Code مع ملف package.json لعرض وتشغيل البرامج النصية بنقرة واحدة، يمكنك عرض التبعيات وإدارة المهام الروتينية دون فتح الطرفية.
تكلفة الاستيراد
حجم الحزمة في الواجهة الأمامية مهم للغاية. تحسب تكلفة الاستيراد الحجم التقريبي لكل عملية استيراد ويظهرها بجوار السطر المقابل.
بهذه الطريقة، ستعرف على الفور ما إذا كنت تستخدم مكتبة ضخمة لأمر تافه، ويمكنك تقييم التغييرات مثل استخدم الاستيراد الجزئي، أو التحميل الكسول، أو بدائل أخف وزنًا..
كووكا.جي إس
يعمل Quokka.js كـ مفكرة تفاعلية للغة جافا سكريبت وتايب سكريبت داخل VS Code. يقوم بتنفيذ التعليمات البرمجية أثناء كتابتها ويعرض النتائج وقيم المتغيرات في التعليقات التوضيحية المضمنة.
انه مثالي ل اختبر الأفكار السريعة، وافهم واجهات برمجة التطبيقات الجديدة، أو قم بتصحيح الأخطاء في الوظائف الصغيرة دون الحاجة إلى بناء مشروع كامل من الصفر. يتوفر بنسخة مجانية بميزات مفيدة للغاية، ونسخة مدفوعة بميزات إضافية.
مقتطفات ES7 React/Redux/GraphQL/React-Native ومقتطفات React بسيطة
إذا كنت تعمل مع نظام React البيئي، فإن هذين الامتدادين كنز ثمين. توفر مقتطفات ES7 React/Redux/GraphQL/React-Native مقتطفات للمكونات، والخطافات، وRedux، وGraphQL، وReact Nativeيغطي جميع الأنماط الشائعة تقريباً.
أما مقتطفات React البسيطة، من ناحية أخرى، فتركز على مجموعة أصغر من المقتطفات البرمجية لـ React الحديثة (المكونات الوظيفية، والاستيرادات الأساسية، وما إلى ذلك)، وهو مثالي إذا كنت تريد شيئًا أقل إرهاقًا ولكنه بنفس القدر من الإنتاجية.
جافا سكريبت وتايب سكريبت الإصدار الليلي
إذا كنت ترغب في البقاء على اطلاع دائم باللغات، يمنحك JavaScript and TypeScript Nightly إمكانية الوصول إلى الإصدار الليلي من خادم لغة TypeScript. يستخدم هذا البرنامج VS Code.
هذا يعني إضافة ميزات جديدة، وتحسينات في الأداء، وإصلاحات للأخطاء قبل وصولها إلى الإصدار المستقر - وهو أمر مثالي لـ اختبار ميزات اللغة الجديدة واكتشاف التغييرات المستقبلية قد يؤثر ذلك على التعليمات البرمجية الخاصة بك.
إضافات بايثون
يصبح VS Code، مع الإضافات المناسبة، بيئة تطوير متكاملة (IDE) ممتازة للغة بايثونإذا كنت تعمل في تطوير الواجهة الخلفية أو علم البيانات أو الأتمتة باستخدام هذه اللغة، فإن هذه الأمور شبه إلزامية.
بايثون (الامتداد الرسمي)
امتداد بايثون الرسمي من مايكروسوفت هو حجر الزاوية للعمل مع هذه اللغة في VS Codeبدون ذلك، يكون الدعم محدودًا للغاية.
تقدم IntelliSense، تصحيح الأخطاء، الاختبار، التكامل مع البيئات الافتراضية، تنسيق التعليمات البرمجية (Black، autopep8)، فحص الأخطاء باستخدام Pylint أو Flake8 والعديد من الوظائف الأساسية الأخرى.
بيلانس
بايلانس هو خادم لغة متقدم للغة بايثون مما يعزز الامتداد الرسمي بشكل أكبر. فهو يوفر تحليلاً ثابتاً سريعاً، وإكمالاً تلقائياً محسّناً، وفحصاً دقيقاً جداً للأنواع.
إذا كنت تستخدم تعليقات توضيحية للأنواع أو ترغب في اكتشاف الأخطاء قبل تشغيل الكود، يُحسّن برنامج Pylance تجربة التطوير بشكل كبير. في المشاريع المتوسطة والكبيرة.
كوكب المشتري
تتضمن إضافة Jupyter دفاتر الملاحظات بصيغة .ipynb مباشرة في VS Codeيمكنك إنشاء الخلايا وفتحها وتشغيلها تمامًا كما هو الحال في Jupyter الكلاسيكي، ولكن من المحرر.
فهو مفيد بشكل خاص لـ تحليل البيانات، والتعلم الآلي، والتصور، والنمذجة السريعة، حيث يجمع بين أفضل ما في أجهزة الكمبيوتر المحمولة ومزايا المحرر المتكامل.
مولد توثيق بايثون
عادةً ما تكون الوثائق الداخلية في لغة بايثون على شكل سلاسل توثيق. يقوم مولد سلاسل التوثيق في بايثون بإنشاء الهيكل الأساسي لسلسلة التوثيق تلقائيًا للوظائف والفئات والأساليب.
عند كتابة علامات الاقتباس الافتتاحية، يقوم الامتداد بإنشاء حقول للوصف والمعلمات وقيمة الإرجاع يعتمد ذلك على توقيع الدالة، مما يشجع على كتابة كود موثق جيدًا دون أن يكون ذلك عبئًا كبيرًا.
PHP وامتدادات الواجهة الخلفية
لا تزال لغة PHP عنصرًا أساسيًا في تطوير واجهات برمجة تطبيقات الويب، كما أن برنامج VS Code يمتلك نظام بيئي ناضج للغاية من الإضافات لهذه اللغة.
PHP IntelliSense و Intelephense
كانت خدمة PHP IntelliSense من أوائل إضافات الإكمال التلقائي الجادة للغة PHP. وهي توفر اقتراحات بشأن الدوال، والفئات، والأساليب، ومساحات الأسماء، والمتغيراتبالإضافة إلى التنقل الأساسي إلى التعريفات.
يذهب برنامج PHP Intelephense خطوة أبعد من ذلك: تحليل سريع وعميق للغاية، وإعادة هيكلة، وبحث مرجعي، ودعم محدّث لـ PHP 7 و 8 وأكثر من ذلك. حتى النسخة المجانية تتفوق بالفعل على معظم البدائل.
مانع التوثيق في PHP
للحفاظ على توثيق جيد في المشاريع الكبيرة، يقوم برنامج PHP DocBlocker بإنشاء تعليقات DocBlock كامل للوظائف والأساليب والفئات والخصائص.
في الكتابة / ** عند استخدام دالة، يتم ملء المعاملات ونوع القيمة المرجعة تلقائيًا، مما يحفز توثيق واجهات برمجة التطبيقات الداخلية والعامة بشكل صحيح.
ملحن
يُعدّ Composer المعيار القياسي لإدارة التبعيات في لغة PHP. ويتكامل الملحق الخاص به مع VS Code من أجل تشغيل الأوامر الشائعة (التثبيت، التحديث، المتطلبات) من لوحة الألوان، بالإضافة إلى توفير ميزة الإكمال التلقائي والتمييز في composer.json.
وهذا يجعله أكثر راحة بكثير إدارة المكتبات والأطر والبرامج النصية دون الحاجة إلى التبديل باستمرار بين المحرر والطرفية.
تصحيح PHP
إن تصحيح أخطاء PHP باستخدام var_dump له سحره إلى حد ما. يضيف PHP Debug مصحح أخطاء كامل يعتمد على Xdebug. داخل برنامج VS Code.
بواسطته يمكنك قم بتعيين نقاط توقف، وافحص المتغيرات، وتتبع تنفيذ التعليمات البرمجية خطوة بخطوة وتحليل تسلسل استدعاء الدوال. يتطلب الإعداد الأولي بعض العناية، ولكن بمجرد إعداده، يصبح أداة أساسية.
إضافات لتطوير HTML وCSS والواجهات الأمامية
إذا كنت تعمل في الجانب المرئي من الويب، فهناك العديد من الإضافات التي إنها تحول VS Code إلى بيئة مريحة للغاية للتصميم والتنسيق..
خادم حي
يقوم الخادم المباشر بتثبيت خادم تطوير محلي مع إعادة تحميل تلقائيةيؤدي النقر على "تشغيل مباشر" إلى فتح موقعك في متصفحك وتحديث الصفحة في كل مرة تقوم فيها بحفظ ملف.
انها مثالية ل لغة HTML خالصة، ونماذج أولية سريعة، وتصميم ثابت، ومشاريع واجهة أمامية بسيطةحيث أن رؤية التغييرات على الفور تُحدث فرقاً كبيراً.
دعم HTML و CSS
تعمل هذه الإضافة على تحسين التكامل بين HTML و CSS. يوفر ميزة الإكمال التلقائي الذكي للفئات والمعرفات المحددة في أوراق الأنماط الخاصة بك. عند كتابة لغة HTML، والعكس صحيح.
كما يقترح خصائص CSS (بما في ذلك بادئات الموردين) ويعمل بشكل رائع عند دمجه مع Emmet، مما يسرع بشكل كبير من سير عمل التخطيط.
ميزة IntelliSense لأسماء فئات CSS وميزة IntelliSense لـ Tailwind CSS
تقوم ميزة IntelliSense لأسماء فئات CSS بتحليل ملفات CSS أو SCSS أو Less الخاصة بك إلى توفير خاصية الإكمال التلقائي لأسماء الفئات في لغة HTMLيُعد هذا مفيدًا بشكل خاص عندما تكون هناك أدوات أو فئات ذات أسماء طويلة.
إذا كنت تستخدم Tailwind، فإن ميزة Tailwind CSS IntelliSense تذهب خطوة أبعد، حيث توفر ميزة الإكمال التلقائي الخاصة بأدوات Tailwind، والتحقق من الأخطاء، والتوثيق المضمن، وهو أمر شبه إلزامي للعمل بشكل مريح مع هذا الإطار.
CSS Peek و CSS Lint
تتيح لك خاصية CSS Peek استعرض بسرعة وانتقل إلى تعريف CSS الخاص بفئة أو معرّف من خلال HTML، إما في نافذة منبثقة أو عن طريق فتح الملف المقابل.
يعمل CSS Lint كأداة تدقيق لملفات الأنماط، تحديد الأخطاء أو الأنماط الإشكالية (الخصائص المكررة، والقواعد غير الفعالة، وما إلى ذلك)، مما يساعد على الحفاظ على CSS أنظف وأكثر قابلية للصيانة.
إعادة تسمية العلامة تلقائيًا وتمييز العلامة المطابقة
تتولى خاصية إعادة تسمية العلامات التلقائية مهمة بسيطة بقدر ما هي مفيدة: عند تغيير علامة الفتح لعنصر HTML أو XML، يتم تحديث علامة الإغلاق. تلقائياً حتى لا تصبح غير متزامنة.
تمييز العلامات المتطابقة زوج الفتح/الإغلاق للعلامة التي يوجد بها المؤشريُعد هذا الأمر عمليًا للغاية في المستندات الكبيرة أو تلك التي تحتوي على هياكل متداخلة للغاية.
معاينة الصورة، مُحسِّن الصورة، وتمييز الألوان
معاينة الصورة تُظهر صورة مصغرة للصورة المشار إليها في المسار عن طريق تحريك المؤشر فوقه أو في الهامش، مما يساعد على التحقق من صحة المسارات دون فتح الملف بشكل منفصل.
يتيح مُحسِّن الصور ضغط الصور (مع فقدان البيانات أو بدون فقدانها) من داخل المحرر نفسهمما يجعل أصولك جاهزة للإنتاج دون الحاجة إلى استخدام أدوات خارجية.
يُبرز تمييز اللون رموز الألوان (سداسي عشري، RGB، HSL، إلخ) مع لونها الفعلي كخلفية أو خط سفليمما يجعل العمل مع لوحات الألوان المعقدة أسهل بكثير.
إضافات لزيادة الإنتاجية، والتصميم والتخصيص
بالإضافة إلى أدوات التطوير الأساسية، هناك عدد لا بأس به من الإضافات المصممة لـ لجعل حياتك اليومية أكثر راحة ومحررك أكثر جاذبية للعين.
قوالب لبرنامج VS Code
تؤثر السمات بشكل مباشر على راحتك البصرية. ومن بين السمات الأكثر شيوعًا والموصى بها ما يلي: ظلال أرجوانية، ثيم مادي، نايت أول، هورايزون، نوكتيس أو فلاتلاند مونوكاي.
لكل منها شخصيتها الخاصة: أنظمة ألوان داكنة زاهية، ولوحات ألوان مصممة لتقليل إجهاد العين، وتدرجات فاتحة وداكنة، أو حتى سمات أحادية اللون بالكامل لأولئك الذين لا يرغبون في أي تشتيت.
الطاووس
عندما تفتح عدة مشاريع في وقت واحد، فمن السهل أن تشعر بالارتباك. يتيح لك تطبيق Peacock تغيير لون التمييز لنافذة VS Code لكل مشروع على حدة.بحيث يمكنك بنظرة سريعة معرفة ما إذا كنت تقوم بتحرير الواجهة الخلفية أو الواجهة الأمامية أو خدمة مصغرة محددة.
إنها إضافة بسيطة ولكنها مفيدة للغاية إذا عادةً ما يكون لديك عدة مساحات عمل مفتوحة في وقت واحد..
قوس قزح وأقواس قوس قزح
ألوان قوس قزح ذات مسافات بادئة أعمدة المسافة البادئة بنغمات مختلفة، مما يساعد على رؤية بنية الكود بسهولة.
يقوم برنامج Rainbow Brackets بشيء مشابه مع الأقواس، والمعقوفات، والأقواس المعقوفةتخصيص لون مختلف لكل مستوى من مستويات التداخل. وبفضل هذين الخيارين، يصبح تحديد موقع قوس مفقود أو كتلة ذات مسافة بادئة غير مناسبة أسهل بكثير.
شجرة المهام
إذا كنت تستخدم تعليقات مثل TODO أو FIXME أو BUG، يقوم تطبيق Todo Tree بفحص مساحة العمل الخاصة بك وإنشاء لوحة تحكم تحتوي على جميع هذه التعليقات التوضيحية منظمة على شكل شجرة.
من هناك يمكنك انتقل مباشرة إلى كل نقطة في الكود حيث توجد مهام معلقة أو مشاكل محددة، مما يحول قائمة المهام إلى نوع من مدير المهام المصغر المرتبط بالمستودع.
GitHub Copilot و Tabnine و ChatGPT/AI
لقد حققت أدوات الإكمال التلقائي القائمة على الذكاء الاصطناعي دخولاً قوياً. يقترح كل من GitHub Copilot و Tabnine أسطرًا أو كتلًا كاملة من التعليمات البرمجية بناءً على السياق أو الاختبارات السابقة أو التعليقات.
تتيح الإضافات التي تدمج ChatGPT أو نماذج مماثلة في VS Code اطلب شرحًا للتعليمات البرمجية، أو أعد هيكلة الدوال، أو أنشئ اختبارات. دون الحاجة إلى مغادرة المحرر. تتطلب هذه الأدوات مفاتيح API، ولكنها تُعدّ أدوات مساعدة فعّالة للغاية في عملية التطوير إذا استُخدمت بحكمة.
Markdown الكل في واحد ومعاينة Markdown المحسّنة
إذا كنت توثق المشاريع أو تكتب منشورات تقنية، يُضيف تطبيق Markdown All in One اختصارات، ومعاينة محسّنة، وإنشاء فهرس، وميزات أخرى مريحة. للعمل مع لغة Markdown.
بالإضافة إلى ملحقات المعاينة على غرار GitHub، ستحصل على تجربة كتابة قريبة جدًا من الشكل الذي ستظهر به ملفات README أو مقالاتك لاحقًا على الويب
Docker، وSSH عن بُعد، وWSL عن بُعد
في البيئات المهنية، من الشائع جداً العمل مع الحاويات أو الأجهزة البعيدة. تتيح لك إضافة Docker الرسمية إدارة الصور والحاويات والشبكات ووحدات التخزين. من الشريط الجانبي، بالإضافة إلى تسهيل تصحيح الأخطاء داخل الحاويات.
تتيح لك خاصيتا SSH و WSL عن بُعد ما يلي: افتح المجلدات البعيدة أو بيئات لينكس (WSL) كما لو كانت مشاريع محليةتنفيذ الأوامر وتصحيح الأخطاء مباشرة هناك، ولكن مع سهولة استخدام واجهة VS Code.
مع اختيار جميع هذه الإضافات وتكوينها بشكل جيد، يتحول برنامج Visual Studio Code من كونه محررًا بسيطًا وخفيفًا إلى بيئة تطوير مخصصة، مصممة خصيصًا لتناسب مجموعتك التقنية، وطريقة عملك، ومشاريعك.إن إيجاد التوازن بين عدم تحميلها فوق طاقتها وامتلاك الأدوات التي تحتاجها فقط هو المفتاح لاكتساب السرعة والراحة والجودة في برمجة يومك.
