جميع اختصارات محرر Visual Studio Code لجميع لغات البرمجة

.

الاسم

بريد إلكتروني *

رسالة *

إعلان أدسنس

آخر المواضيع

مقالات

السبت، 6 يناير 2018

11:49:00 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
جميع اختصارات محرر Visual Studio Code لجميع لغات البرمجة

أهم اختصارات لوحة المفاتيح على مُحرر 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 على هذا الرّابط:


إرسال تعليق

كتب تعلم اللغة الإنجليزية