Close Popup
Eng

Emmet

2018.03.26

Az Emmet egy ingyenes plugin, ami a legtöbb ismert szerkesztőhöz letölthető és arra hivatott, hogy meggyorsítsa a munkafolyamatokat.

Az Emmet egy ingyenes plugin, ami a legtöbb ismert szerkesztőhöz letölthető és arra hivatott, hogy meggyorsítsa a munkafolyamatokat.
 
A legfontosabb támogatott programok:

  • Sublime
  • Atom Text
  • Coda
  • Eclipse/Aptana
  • TextMate 2
  • Notepad++
  • NetBeans
  • Adobe Dreamweaver

 Az Emmet css-szerű rövidítéseket alakít html kóddá.

Segítségével villámgyorsan elkészíthetjük egy weboldal HTML struktúráját (természetesen nem csak erre jó, de most ezen a vonalon fogjuk vizsgálni).
A működése hihetetlenül egyszerű, csak beírjuk a rövidítést és nyomunk egy "TAB"-ot (fontos, hogy a kurzor a rövidítés végén álljon).
 
Nézzük is meg a működését különböző példákon keresztül:

1. HTML elem "ID"-val:

div#megnevezes -> <div id="megnevezes"></div>
p#megnevezes -> <p id="megnevezes"></p>
span#megnevezes -> <span id="megnevezes"></span>

2. HTML elem "class"-al:

div.megnevezes -> <div class="megnevezes"></div>
p.megnevezes -> <p class="megnevezes"></p>
span.megnevezes -> <span class="megnevezes"></span>
 
3. Gyermek elemek létrehozása

div.megnevezes>p.leiras
 
<div class="megnevezes">
<p class="leiras"></p>
</div>
 
4. Testvér elemek létrehozása

div.megnevezes+div.leiras
 
<div class="megnevezes"></div>
<div class="leiras"></div>
 
 
Végezetül pedig készítettünk pár gifet amin élesben is látható, hogy mennyire hatékony eszközről van szó és milyen mértékben tudjuk vele meggyorsítani a kódolási folyamatokat.
 
HTML5 váz

html5 vaz

navigáció

navigacio
 

unordered list készítése adott elemekből villámgyorsan (CTRL+SHIFT+G billenytűkombinációval hívható elő a panel)

unordered list
 
különböző rövidítések akcióban

roviditesek