Uvod

Emmet je sjajan plugin za ubrzano pisanje koda koji može da se doda mnogim poznatim text editorima i IDE. Poseduje određene skraćenice koje, kada se kombinuju, daju gotov kod koji je mnogo duži i kompleksniji. Instalira se kao dodatak (plugin) a instalacija zavisi od IDE aplikacije u koju se implementira. Opisao sam kako se Emmet plugin instalira u sklopu PHP Storm-a na stranici “Instalacija alata za web development”. Koristi se tako što se u editoru ispiše skraćenica (eng. abbreviation) nakon čega se pritisne “okidač dugme”, default-no dugme je TAB.

Emmet syntax

> (nivo na niže)

nav>ul>li*3

+ (isti nivo)

div+p+bq

^ (nivo na više)

div>p>span+em^bq

( ) grupisanje

div>(header>ul>li*2>a)+footer>p

. (klase)

p.class1.class2.class3

# (ID)

form#search

$ (dinamički broj)

Primer br.1

ul>li.item$*5

Primer br.2

ul>li.item$$$*5

Primer br.3

ul>li.item$@3*5

Primer br.4

ul>li.item$@-*5

{ } (tekst)

a{Click me}

[ ] (atributi)

p[title=”Hello world”]

Emmet HTML skraćenice

Na sledećim primerima su prikazane često koriščene skraćenice:

!!!

!

lorem

Generiše različite rečenice od 30 reči.

lorem5

Generiše različite rečenice od 5 reči.

a

br

link

img

iframe

form

input

label

video

bq

btn

Podelite:

Ostavite komentar