فيجوال ستوديو كود احد افضل البرامج التي يمكن استخدامها في مجال البرمجة و برنامج Visual Studio Code محرر للنص البرمجي من مايكروسوفت، المحرر مفتوح المصدر ويعمل على نظم التشغيل ويندوز وماك أو إس ولينكس، يعتمد المحرر على بيئة إلكترون، وتم إطلاقه من قبل مايكروسوفت في أبريل 2015.
افضل اضافات برنامج فيجول كود استوديو
اذا كنت تستخدم VS code في عملية البرمجة وأنت ماتعرف هذي الاختصارات Extensions اذآ انت تضيع الكثير من وقتك الثمين لذلك في السطور التالية نستعرض اهم وافضل اضافات اختصار الوقت للمبرمج بيفيدك كثير أثناء البرمجة:
اضافات برنامج فيجوال ستوديو كود
Live Server
مع كل تعديل تسويه أكيد تحتاج تشوفه بالمتصفح (Browser) بس مايطفشك انك تسوي Reload كل شوي؟ 👀
هالاختصار بمجرد ما تحفظ الكود وتفتح المتصفح بيسوي Reload بشكل تلقائي !
رهيييييب
Code Spell Checker
اذا كتبت أي كلمة غير السنتاكس بشكل غلط (المحتوى اللي بين الـ tags)، هالاختصار بيحط خط تحت الكلمة الخطأ لأنه بيبحث بالمعاجم عنها واذا ماحصلها بينبهك.
Bracket Pair Colorizer
قد فتحت أقواس أو tag ومع كثافة الكود ماعرفت وين نهايته؟ في الاختصار هذا بتنسى هالمشكلة للأبد😉
هو يغير لون بداية ونهاية كل tag بلون موحد عشان تعرفه وتميزه عن غيره ✅
Auto Rename Tag
لنفترض انك فتحت tag معين لكن بعد فترة حبيت تغيره .. اذا غيرت البداية يبيلك تحذف النهاية وترجع تكتبها .. ماتحس انه ياخذ وقت؟ 😅
هالاختصار بمجرد ماتغير أي tag على طول يغير نهايته !
يفك أزممممة
GetLens
اذا تشتغل انت واكثر من شخص على نفس المشروع بـ Git، هالاختصار بمجرد تسوي click على أي سطر بيطلع لك مين اللي سواه، متى سواه، وكيف كان الكود قبل مايسويه 🤯!!
CSS Peek
لنفترض عندك id او class بـ HTML ..
اذا تبي تعرف ايش كتبت بالـ CSS لهذا الجزء، يبيلك تروح للـ External sheet وتدوره وبعدها تشوف..
لكن هالاختصار بينقذك، بمجرد تضغط على الـ class او id بيفتح لك pop up window ويوريك الـ CSS الخاص فيه !! واو
Colorize
كتبت رقم اللون لكن شكيت بدرجته ؟
هالاختصار يساعدك.. حرفيًا !
بيلون لك الارقام بدرجة اللون اللي اخترته بحيث يصير واضح لك قبل ماتسوي Run
Bookmarks
اتوقع واضح من اسمه 😂
بيحط لك علامة على أي سطر تبيه بحيث اذا انت جالس تسوي debugging وتنقلت بين ملفاتك ورجعت للملف تعرف وين كنت بأي سطر ..
أسطوري 🥲🥲
Polacode
امممم .. قد واجهتك مشكلة وحبيت ترسل جزء من كودك لشخص ثاني عشان يسوي trace معك؟ اكيد سويت screenshot صح؟ ماكان واضح غالبا وصورت السكرين كامل وحوسة شوي تقص الصورة والخ..
مع هالاختصار بمجرد ماتسوي highlight على الكود اللي تبيه بيسوي لك صورة فيها الكود بشكل مرتب جدًا 🙏
Tabnine
هالاختصار اتوقع بيغطي عليهم كلهم !!
تخيل انك يوم تكتب أي كود فيه شخص يساعدك
هالاختصار عبارة عن ذكاء اصطناعي يمشي معك ويتوقع الكود اللي بتكمل فيه السطر 🤯!!!!
قوووي 🔥🔥
طيب الحين بركز شوي على بعض الاختصارات لكتابة الـ tags في HTML داخل الـ VS code ..
ركز معي يلا
- اذا جيت تكتب اي tag وبتحط له id ..
انسى طريقتك القديمة وطبق هذي 👇🏻
tag#id ثم Enter
مثال : nav#main
- اذا جيت تكتب اي tag وبتحط له class ..
انسى طريقتك القديمة وطبق هذي 👇🏻
tag.className ثم Enter
مثال : nav.main
- اذا جيت تكتب اي نص داخل tag
انسى طريقتك القديمة وطبق هذي 👇🏻
tag{النص} ثم Enter
مثال : li{coffee}
- اذا جيت تكتب عناصر متداخلة ..
tag داخل tag داخل tag
انسى طريقتك القديمة وطبق هذي 👇🏻
tag>tag>tag ثم Enter
مثال : nav>p>span
- تبي تكتب أكثر من tag من نفس النوع ؟ ليه تكتبهم حبة حبة 😂!
مثلًا تبي تكتب أكثر من li
كل اللي عليك تكتبها كذا:
tag*numberOfDuplications ثم Enter
مثال : li*7
- تبي تكتب أكثر من tag لكنهم مختلفين ؟ ليه تكتبهم حبة حبة 😂!!
مثلًا تبي تكتب div وبعدها p وبعدها nav
كل اللي عليك تسويه:
tag1+tag2+tag3 ثم Enter
مثال : div+p+nav
طيب .. خلنا نصعبها شوي 👀
اذا جيت بتسوي مثلا عشرين li وكل واحد تبي له اسم الكلاس نفسه لكن متبوع برقم Unique ..
اكيد بتقول بضيف الاسم بنفسي وبكل مرة بغير الرقم ..
ماتحسه مرهق؟ جبت لك الحل 😎
$
هي سر الحل (الترقيم يبدا من 1)
كل اللي عليك تسويه:
tag.className$*numberOfDuplications
مثال :
li.item$*20 ثم Enter
انصدم معي 🤯👇🏻
فيه كثيييررر اختصارات موجودة، اكتشف اللي يسهل شغلك ويخليك مروق وانت تكتب أي جزء منه ..
موفقييييين❤️❤️
• • •
بواسطة: Omar🐳
@SWE_Omar
Software Engineering Student @_ksu
| Trainee @SAP
| Leader at @ftcksu
, @GDSC_KSU
, @DIU_ksu
| As long as you’re waking up, you are still in the game!
مقالات أخرى قد تفيدك:
