كيفية كتابة كود سريع

في هذه المقالة سنتحدث عن كيفية الكتابة بشكل أسرع في محرر visual studio code طريقة كتابة كورد سريع بإستعمال Emmet إعتبرها مثل إختصارات لكتابة الأوسام هنا سنتعرف على طريقة كتابة عنصر داخل عنصر بطريقة سريعة كنا في السابقة نفتح وسم وننهيه و نغلقه و نكتبه داخله وسم آخر وهذا بطئ جدااا لهذا سنكتب بطرقة ال Emmet أولا لكتابة عنصر داخل عنصر نكتب هكذا

div>h1

ستكون النتيجة عند الطغظ على Enter

<div>
    <h1></h1>
</div>

كما ترون بدل كتابة كل هذا سنكت بطريقة مختصرة كنا ترون الآن كيف أكتب نص داخلها بهذه الطريقة :

div>h1{Hello World}

كما ترون بسيطة نطغظ على Enter ستكون النتيجة <div> <h1>Hello World</h1> </div>

<div>
    <h1>Hello World</h1>
</div>

أعجبك الأمر نعم ستكون الآن سريعا في كتابة الكود الخاص بك الآن لكتابة السمات أو attributes هنا لكتابة attributes id and class نكتب بهذه الطريقة

.nama

ستكون النتيجة عند الطغظ على Enter

<div class="name"></div>

كما ترون نحدد الكلاس فقط بنقطة هنا لماذا ظهر معنا div لأنه وسم مشهور لتحديد عنصر معين نكتب

h1.test

النتيجة ستكون

<h1 class="test"></h1>

كنا ترون أمر بسيط نفس الشيء بالنسبة لل id نعم أعتقد أنك خممت فيها انت ذكي نستعمل بذل النقطة علامة الهاش # لكتابة ال id

#nama

ستكون النتيجة

<div id="name"></div>

كما ترون أمر بسيط هنا لدينا عنصر div لتغييره نكتب هكذا

p#test

ستكون النتيجة

<p id="test"></p>

هنا تعرفنا على ال id و ال class لعمل attributes أخرى نكتب هكذا

div[title="test"]

بهذه الطريقة هناك يمكنك كتابة أي سمة تريدها نطغظ على Enter ستكون النتيجة

<div title="test"></div>

الآن إذا أردنا كتابة عنصران مع بعض يعني ليس عنصر داخل عنصر سنكتب عنصر يليه عنصر نكتب هكذا بعلامة +

div+p

ستكون النتيجة عند الطغظ على Enter <div></div> <p></p>

<div></div>
<p></p>

كنا ترون الأمر بسيط جدا الأن مع التكرار يمكننا تكرار العنصر أكثر من مرة بدلا من كتابتها بنفسك مثلا تريد عمل 100 li ستكتبها بنفسك ولكن بإستعمال ال Emmet ستكتبها في ثانية نستعمل هنا علامة *

ul > li * 3

هنا ستكون النتيجة

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

هنا كما ترون يمكنك دمج كل ماسبق نعم ومكتابة نص داخلها و attribute معينة هناك العديد من العلامات و الإختصارات يمكنك البحث عن المزيد مثل grouping علامة $ علامة ^ هناك العديد ماذا تنتظر كن سريعا في كتابة الكود الخاص بك وشكرا أتمنى أن تعجبكم مقالتنا المتواضعة و البسيطة وشكرا لكم.