أهم اختصارات لوحة المفاتيح على مُحرر Visual Studio Code
من بين أهم ما يُميّز مُحرر النّصوص البرمجية Visual Studio Code قدرته على تسهيل كتابة شيفرات HTML وبالأخص قدرته على إكمال ما شرعت في كتابته. تعرف هذه الخاصية بـ Emmet snippets
سنستعرض بشكل سريع أهم الاختصارات التي يجب عليك معرفتها
إكمال كتابة وسوم HTML
ربما قد لاحظت بأننا كنا نقوم بكتابة مُختلف وسوم HTML بشكل كامل، وهو أمر قد يكون مفيدًا لك في بداية مشوار تعلّمك برمجة الويب، لكن مع مرور الوقت سيصبح الأمر مملًا وقد تشرع في البحث عن طُرق لاختصار ذلك.
لحسن الحظ، يوفّر مُحرر Visual Studio Code ذلك. على سبيل المثال لا الحصر، ليست هناك حاجة لكتابة رمز القوس المثلث <> مع أي من الوسم. جرب التّالي: اكتب html واضغط على زر tab بعد ذلك، ستلاحظ بأن المُحرر قام بتحويل ذلك مُباشرة إلى <html></html>
نفس الأمر مع body والتي سيتم تحويلها مُباشرة إلى <body></body> أو a والتي سيتم تحويلها مُباشرة إلى <a href=""></a>
إضافة الأصناف والمعرّفات إلى الوسوم بشكل سريع
قد يكون تحويل a إلى وسم<a href=""></a> أمرًا مُذهلًا، لكن هل تعلم بأنه بإمكانك توليد وسم a يحتوي أصنافا ومعرفًا وما إلى ذلك بشكل سريع أيضًا.
جّرب التّالي: اكتب a.classOne.classTwo#myID ثم اضغط على زر tab، سيتم تحويلها مُباشرة إلى
<a href="" class="classOne classTwo" id="myID"></a>
ستحصل على نتيجة مُماثلة مع عدة وسوم أخرى أيضا (مثل div).
الأمر مع وسم div أفضل بكثير حيث أنك لا تحتاج إلى كتابة div في بداية الجملة.
جرّب التّالي: اكتب .classOne.classTwo#MyID ثم اضغط على tab، سيفهم المُحرر مباشرة بأنك ترغب في إنشاء div يحمل صنفين ومعرفًا وسيكون بتحويلها مُباشرة إلى
<div class="classOne classTwo" id="MyID"></div>
خواص مُتقدّمة
يسمح مُحرّر Visual Studio Code باستخدام اختصارات مُتقدّمة. على سبيل المثال، يُمكنك إنشاء قائمة غير مرتّبة تحتوي 5 عناصر بكتابة التّالي:
ul>li*5 ثم الضغط على زر tab
وسينتج عن ذلك:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
المزيد
ستجد كامل اختصارات Emmet التي يدعمها Visual Studio Code على هذا الرّابط:
{ هنا - سبحان الله }
تعليقات
إرسال تعليق