כתיבת קוד במהירות שלא הכרתם באמצעות Emmet

הכירו את Emmet – תוספת פופולרית לעורכי קוד שתקצר פלאים את זמן כתיבת הקוד שלכם.
חובה לכל מתכנת.

אז מה זה בעצם Emmet?

בגדול – כלי שמשנה את חייהם של מתכנתים.
בקטן – תוספת לעורכי קוד שמאפשרת לנו לכתוב קוד במהירות באמצעות קיצורים מגניבים למדי.

איך מתקינים?

ישנם עורכי קוד שייתכן ש-Emmet כבר מותקן. בכל אופן, בעמוד הבא תוכלו לבחור בעורך הקוד בו אתם משתמשים ולמצוא את ההסבר הקצר עבור ההתקנה של התוסף.
כברירת מחדל ברוב עורכי הקוד, Emmet "פועל" על ידי לחיצה על מקש ה-Tab או מקש ה-Enter לכן כדאי לבדוק לפני כן.
בדיקה נוספת שכדאי לעשות היא לחפש את האפשרות במסך ההגדות.

Emmet מותקן? קדימה, קיצורים!

HTML

על מנת ליצור תגית כלשהי, מספיק לרשום את שם התגית, למשל div וללחוץ על מקש ה-Tab, והפלא קרה מיידית, קיבלנו תגית DIV תקינה:

<div></div>

מה אם נרצה ליצור div עם class מסויים?
כתבו את הדבר הבא ולחצו על מקש הפלא, Tab:

div.container

ומיד קיבלנו:

<div class="container"></div>

אם היינו מעוניינים ב-ID, כמובן שהיינו משתמשים ב-#.

ומה אם נרצה ליצור אלמנט בתור אלמנט?

div>p.mainText>lorem

ייצור עבורנו את הדבר הבא:

<div>
    <p class="mainText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt dicta eaque est
        expedita facilis hic laudantium minima, neque nobis, non optio, placeat quia quos reprehenderit repudiandae
        suscipit temporibus voluptatibus?</p>
</div>

כן, עם מלל ה-lorem המפורסם..מבריק.

ומה עם ריבוי אלמטים? למשל רשימה שמכילה 8 itemים?

ul>li*8

ונקבל:

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

CSS

מה עם לקצר קוד CSS?

נתחיל בקיצור כתיבת צבעי hex, כתבו את הדבר הבא ולחצו על Tab:

color:#dc

מיד נקבל את קוד הצבע המלא:

color:#dcdcdc;

פקודת font-weight:

fw700

ייצור עבורנו:

font-weight: 700;

קיצור פקודת width:

w50p

ונקבל:

width: 50%;

פקודת padding:

p20px40px

ונקבל:

padding: 20px 40px;

אני די בטוח שהבנתם את העיקרון ואת גודל הקסם..
במידה ואהבתם, תוכלו לקרוא עוד כאן.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


2 תגובות בנושא “כתיבת קוד במהירות שלא הכרתם באמצעות Emmet”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *