مجرة - Majarah
طريقك الى العالم

جميع اختصارات محرر Visual Studio Code

المحرر هو بمثابة الاخ الروحي لكل مبرمج ويجب ان يكون اختيارك للمحرر
لا يقل اهمية عن اختيارك لشريك حياتك !! 
لأنه سيكمل معك الطريق حتى تكون مبرمج ناجح .
وفي هذا الموضوع سنتحدث عن محرر فيجوال ستوديو كود (Visual Studio Code)
ويعتبر محرر Visual Studio Code من أفضل المحررات الموجودة على الاطلاق
إن لم يكن الأفضل 
وهو محرر مفتوح المصدر صمم بواسطة شركة مايكروسوفت عام 2015
يعمل على جميع انظمة التشغيل 
وهو مصمم بواسطة اللغات الاتيه :-
JavaScript - TypeScript - Css


ومن مميزات هذا المحرر 
1 - تصميم جذاب وانيق يدخل المبرمج في جو من التركيز
2 - العشرات من الاضافات التي تساعد المبرمج
 

من بين أهم ما يُميّز مُحرر النّصوص البرمجية Visual Studio Code قدرته على تسهيل كتابة شيفرات HTML وبالأخص قدرته على إكمال ما شرعت في كتابته. تعرف هذه الخاصية بـ Emmet snippets

 

سنستعرض بشكل سريع أهم الاختصارات التي يجب عليك معرفتها

إكمال كتابة وسوم HTML

ربما قد لاحظت بأننا كنا نقوم بكتابة مُختلف وسوم HTML بشكل كامل، وهو أمر قد يكون مفيدًا لك في بداية مشوار تعلّمك برمجة الويب، لكن مع مرور الوقت سيصبح الأمر مملًا وقد تشرع في البحث عن طُرق لاختصار ذلك.

لحسن الحظ، يوفّر مُحرر Visual Studio Code ذلك. على سبيل المثال لا الحصر، ليست هناك حاجة لكتابة رمز القوس المثلث <> مع أي من الوسم. جرب التّالي: اكتب html واضغط على زر tab بعد ذلك، ستلاحظ بأن المُحرر قام بتحويل ذلك مُباشرة إلى

نفس الأمر مع body والتي سيتم تحويلها مُباشرة إلى

  أو a والتي سيتم تحويلها مُباشرة إلى , إضافة الأصناف والمعرّفات إلى الوسوم بشكل سريع قد يكون تحويل a إلى وسم أمرًا مُذهلًا، لكن هل تعلم بأنه بإمكانك توليد وسم a يحتوي أصنافا ومعرفًا وما إلى ذلك بشكل سريع أيضًا.

جّرب التّالي: اكتب a.classOne.classTwo#myID ثم اضغط على زر tab، سيتم تحويلها مُباشرة إلى

ستحصل على نتيجة مُماثلة مع عدة وسوم أخرى أيضا (مثل div).

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

جرّب التّالي: اكتب .classOne.classTwo#MyID ثم اضغط على tab، سيفهم المُحرر مباشرة بأنك ترغب في إنشاء div يحمل صنفين ومعرفًا وسيكون بتحويلها مُباشرة إلى 

 

 

 

 

خواص مُتقدّمة

يسمح مُحرّر Visual Studio Code باستخدام اختصارات مُتقدّمة. على سبيل المثال، يُمكنك إنشاء قائمة غير مرتّبة تحتوي 5 عناصر بكتابة التّالي:

ul>li*5 ثم الضغط على زر tab

وسينتج عن ذلك:

   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
 

ستجد كامل اختصارات Emmet التي يدعمها Visual Studio Code على هذا الرّابط:

http://docs.emmet.io/cheat-sheet/

لما لا تترك تعليق