👩🏿‍🎨 👨🏾‍✈️ 🧑🏼‍🤝‍🧑🏻 العمل الاحترافي في VS Code: 4 نصائح 🧙🏿 ⏮️ ✋🏽

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

1. باستخدام مؤشرات متعددة

قد يحدث أن يحتاج المبرمج إلى إدخال نفس النص في عدة أماكن في نفس الوقت.

على سبيل المثال ، في التعليمات البرمجية التالية ، يمكنك إضافة سمة class=«odd»إلى العناصر الأول والثالث والخامس <li>. وإلى العناصر الثانية والرابعة والسادسة ، تحتاج إلى إضافة سمة class=«even».

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

هذا هو الشكل الذي يجب أن يبدو عليه في المحرر.

كود في المحرر

كيف تحل هذه المشكلة؟ اعتدت أن أفعل ذلكclass=«odd»على النحو التالي: أدخلت شيئًا مثل النصفي مكان واحد ثم نسخته إلى الحافظة وألصقه أينما احتجت إليه. ومع ذلك ، بعد أن علمت عن القدرة على العمل مع مؤشرات متعددة في VS Code ، توقفت عن فعل ذلك. لقد زاد هذا بشكل كبير من كفاءة عملي.

على وجه الخصوص ، نحن نتحدث عن ما يلي. لإضافة عدة مؤشرات إلى النص ، تحتاج إلى الضغط باستمرار على مفتاحAltعلى لوحة المفاتيح (في macOS - المفتاحOption) والنقر على الأماكن التي يجب أن تظهر فيها المؤشرات. بعد ذلك ، سيظهر كل شيء يتم إدخاله من لوحة المفاتيح في نفس الوقت أينما توجد مؤشرات.

استخدام مؤشرات متعددة

دعني أذكرك أننا نتحدث عن اختصارات لوحة المفاتيح التالية:

ويندوز: Alt+ .
ماك: Option+ .

2. إعادة تسمية الكيانات والأمر إعادة تسمية الرمز

الآن دعنا نتعلم حيلة بسيطة أخرى.

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

دعنا نتخيل أن لدينا رمزًا مشابهًا للرمز أدناه. نحن بحاجة إلى استبدال جميع التكرارات fooبـ bar. كيف افعلها؟

function foo(){
  // ...
}
foo();
foo();
foo();

إذا قمت بتغيير كل سطر يدويًا ، فإن هذا الأسلوب له عدة عيوب:

الكثير من العمل اليدوي.
احتمال كبير لوقوع أخطاء.

لحل هذه المشكلة ، يمكنك استخدام أمر قائمة السياق Rename Symbol.

استخدام

أمر القائمة " إعادة تسمية الرمز " يتم استدعاء هذه القائمة عند النقر بزر الماوس الأيمن فوق النص المحدد. هناك طريقة أخرى لاستدعاء هذا الأمر وهي الضغط F2بعد تحديد النص المراد تحريره.

3. نقل الخطوط المحددة لأعلى ولأسفل

تحتاج أحيانًا إلى نقل نوع من رمز البرنامج أو نص عادي لأعلى أو لأسفل في المستند. يمكن حل هذه المشكلة على النحو التالي:

حدد النص.
في نظام Windows ، سنستخدم اختصار لوحة المفاتيح Alt+ لتحريك النص لأعلى. لتحريك النص لأسفل ، على التوالي ، استخدم اختصار لوحة المفاتيح Alt+ .
في macOS ، المفتاح Altهو مفتاح Options.

هذا ما يبدو عليه.

تحريك النص لأعلى ولأسفل

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

4. المقتطفات

أثناء كتابة التعليمات البرمجية ، يتعين علينا باستمرار إدخال نفس التركيبات المتكررة من لوحة المفاتيح.

على سبيل المثال ، تحتوي ملفات HTML5 دائمًا على بنية المستند الأساسية التالية:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

وعند كتابة حلقات for في JavaScript ، نقوم دائمًا بإدخال مقتطفات التعليمات البرمجية التالية:

for(let i = 0; i < ; i++){
  
}

هناك العديد من الأمثلة المماثلة. إذا كان عليك إدخال هذه الأجزاء من التعليمات البرمجية يدويًا ، فإن القيام بذلك كلما احتجت إليها ، فسيكون ذلك غير فعال للغاية.

لحسن الحظ ، يوفر لنا VS Code آلية إكمال تلقائي قابلة للتكوين. هذا ما يبدو عليه.

الإكمال التلقائي

لنتحدث عن كيفية إعداد VS Code والحصول على ما هو مبين في الشكل السابق.

▍ إنشاء ملف التكوين

لإعداد الإكمال التلقائي في VS Code ، يجب عليك أولاً إنشاء ملف التكوين المناسب. يقرأ المحرر هذا الملف باستخدام الآليات المناسبة. لإنشاء هذا الملف ، عليك الذهاب إلى القائمة ، كما هو موضح في الشكل التالي Code > Preferences > User Snippets.

أمر قائمة مقتطفات المستخدم

ستظهر اللوحة التالية.

لوحة للعمل مع المقتطفات

هنا يمكنك تحديد ملفات التكوين الموجودة وتحريرها. يمكنك أيضًا إنشاء ملف تكوين جديد هنا. سوف نفعل ذلك بالضبط. سيؤدي

تحديد أمر هناNew Global Snippets fileإلى إنشاء ملف تكوين متاح عالميًا. إذا قمت بتحديد أمر العرضNew Snippets file for 'test'، فسيتم إنشاء ملف متاح محليًا في مساحة العمل الحالية.

سنقوم بإنشاء ملف محلي.

بعد تحديد الأمر ،New Snippets file for 'test'سيطلب النظام اسم الملف.

إدخال اسم

الملف الجديد لقد أنشأنا ملف تكوين ، لكنه فارغ حتى الآن.

ملف تكوين فارغ جديد

لراحتك ، لقد سجلت العملية بأكملها الموضحة أعلاه وقمت بتقديمها هنا كملف gif متحرك.

إنشاء ملف تكوين جديد

▍إنشاء المقتطفات

يخزن ملف التكوين البيانات بتنسيق JSON. هنا مثال على محتواها.

محتويات ملف التكوين

هنا هي نفسها ، لكن بنص عادي:

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

أولاً ، دعنا نلقي نظرة على المجال «html5 autocomplete». معنى هذا الحقل هو فقط إعلام المبرمج بغرض المقتطف. يمكنك إضافة أي شيء هنا.

دعونا نفهم ذلك الآن بالمجال «prefix»: «html5». الغرض منه هو وصف الاختصار الذي قمنا بتعيينه ، والذي يقوم المحرر بتوسيعه إلى جزء من التعليمات البرمجية. عندما نقوم بإدخال نص في المحرر html5، يقوم المحرر تلقائيًا باستبداله بما هو محدد في العنصر «body».

جزء«body»: […]يحتوي على الكود الذي يجب على المحرر إدراجه في المستند بدلاً من البادئة التي أدخلناها. نظرًا لأن هذا الرمز يمكن أن يتكون من العديد من الأسطر ، يتم تمثيل هذا الحقل بمصفوفة. كل عنصر في المصفوفة هو سطر واحد من التعليمات البرمجية. إذا "ترجمنا" البناء الذي درسناه للتو إلى لغة كود HTML العادي ، فسنجد أنه مكافئ لما يلي:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

الآن بعد أن أصبح لدينا ملف تكوين بسيط تحت تصرفنا ، فلنختبره.

اختبار ملف التكوين

مقتطفات النطاق

لقد تأكدنا من أن ملف التكوين الخاص بنا يسمح بالإكمال التلقائي. لكن لها عيب واحد. الحقيقة هي أن البناء الذي يمثله البادئة html5يستخدم فقط في ملفات HTML. لا نحتاج هذا البناء في ملفات جافا سكريبت.

في مثل هذه الحالات ، تكون القدرة على تحديد نطاق المقتطفات مفيدة للغاية. أي أننا نتحدث عن حقل «scope»: «html»يجب إضافته إلى وصف المقتطف.

قصر نطاق المقتطف على ملفات HTML

لنجرب نظامنا مرة أخرى. لنجرب البادئةhtml5في ملف HTML وفي ملف JS.

اختبار المقتطف في ملف HTML و JS

في ملف JS ، كما ترى ،html5لا يؤديالإدخالإلى أي شيء خاص. وهذا بالضبط ما نحتاجه.

▍ المؤشر

لنجرب الإكمال التلقائي مرة أخرى بناءً على الملف الذي أنشأناه. دعنا نلقي نظرة فاحصة عليها. وهل فيه عيوب؟

التحقيق في إدخال الإكمال التلقائي يمكنك

أن ترى أنه بعد إدراج كتلة رمز في المحرر ، ينتقل المؤشر تلقائيًا إلى نهاية هذه الكتلة. لكن كتلة التعليمات البرمجية التي يتم إدراجها تلقائيًا في المستند هي مجرد فراغ لا يزال بحاجة إلى العمل عليه. على وجه الخصوص ، تحتاج إلى إدخال محتوى العلامة <title>.

سيكون أكثر ملاءمة لاستخدام آلية إكمال المدخلات الخاصة بنا إذا تم وضع المؤشر تلقائيًا بين أجزاء الفتح والإغلاق للعلامة <title>.

للقيام بذلك ، يمكننا استخدام بنية خاصة في ملف التكوين $0. هذا ما يبدو عليه.

تعيين موقع المؤشر

الآن ، بعد أن يكون الرمز في المستند ، يتم وضع المؤشر تلقائيًا في مكانه في ملف التكوين$0.

يتم وضع المؤشر في الموقع المطلوب

▍ مثال

الآن ، لتعزيز ما تعلمناه للتو ، دعونا نلقي نظرة على مثال جديد.

نود أن foriتظهر البنية التالية تلقائيًا بعد إدخال نص في ملف JavaScript أو TypeScript :

for(let i = 0; i < ; i++){
}

وأيضًا - بحيث يتم وضع المؤشر تلقائيًا بعد ذلك i <.

ليس عليك النظر إلى حل هذه المشكلة في الوقت الحالي. حاول حلها بنفسك.

بشكل عام ، يمكن تمثيل حل هذه المشكلة بملف التكوين التالي:

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

هنا عرض.

يتم استخدام

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

ما هي الميزات التي يمتلكها VS Code لمساعدتك في عملك اليومي؟

العمل الاحترافي في VS Code: 4 نصائح