• Szerző: Sallai András
• Copyright © Sallai András, 2017, 2019, 2020, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Az emmet alapvető webfejlesztő eszközöket tartalmaz. A szövegszerkesztők, általában lehetővé teszik az úgynevezett snippet (apróság) használatát. Ezek nagyon jó módszerek, de menet közben nem módosíthatók.

Az emmet a snippetek ötletét egy új szintre emeli. Beírás közben, a rövidítéstől függően dinamikusan, állíthatók elő különböző kimenetek.

Weblap:

• https://docs.emmet.io/

Kódok:

• https://docs.emmet.io/cheat-sheet/

ul>li*5

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

Szeretnénk létrehozni egy ul elemet, abban 5 darab li elemet.

div>h1+div>ul>li*5

<div>
    <h1></h1>
    <div>
        <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
        </ul>
    </div>
</div>

A div-en belül legyen egy h1 és egy újabb div elem. Az újabb div elemen belül legyen egy ul elem, amiben legyen 5 darab li elem.

• > azon belül
• + mellette
• * ennyi darab
• . osztály megadása
• # azonosító megadása

Újabb példák a lehetséges eredménnyel:

div.doboz*5

    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>

ul>li*5

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

div#item$*3

    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>

a{lap}
      <a href="">lap</a>

link
      <link rel="stylesheet" href="" />

link:css
      <link rel="stylesheet" href="style.css" />

input
     <input type="text" />

inp
    <input type="text" name="" id="" />

btn:s
   <button type="submit"></button>

pos
   position: relative;

fl
   float:left;

bd+
  border:1px solid #000;

m
    margin: ;

p
   padding:;

ta
    text-align:left;

bgc
    background-color:#fff;

c
    color:#000;

td
    text-decoration:none;

A kódellenőrző, angolul linter. A következő listában néhány hasznos linter csomag nevét láthatjuk:

• linter-jsscs
• linter-jshint
• linter-stylint

A higlight-selected csomag hatása:

• a kijelölt szöveget a highlight-selected megkeresi a kódban
• minden újabb találatot bekeretez, kiemel

Nagyon hasznos csomag, hasznos rövidítéseket kapunk a csomaggal.

• fe
• cl
• cw
• fi
• gi
• fn
• st
• us

Telepítése:

apm install pigments

A csomag a forráskódban beállított színkódok és nevek hátterét azzal a színnel színezi, amit reprezentál.

apm install color-picker

Színválasztó:

• CTRL-ALT-C

Java bővítmény foglalhatja.

apm install atom-live-server

Indítás:

• Alt + Ctrl +l

Vagy ha az foglalt, akkor:

• Packages > atom-live-server

A kijelölt szöveget megadott elemmel veszi körbe. Alapértelmezetten a p elem jelenik meg, de ha elkezdünk gépelni, átírja.

Telepítés:

apm install atom-tag-wrapper

Alt+Shift+w

Telepítés:

apm install v-bootstrap4

html-[enter]

• https://atom.io/packages/v-bootstrap4