Emmet (Visual Studio Code)

Emmet (Visual Studio Code)

Emmet (Visual Studio Code)

Emmet adalah fitur di Visual Studio Code (VS Code) yang memungkinkan penulisan kode HTML dan CSS lebih cepat dengan menggunakan ekspansi singkatan (abbreviations).

Emmet (Visual Studio Code)

1. Struktur Dasar HTML (! atau html:5)

Singkatan:

!

atau

html:5

Ekspansi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   ....
</body>
</html>

Fungsi:
Membuat template dasar HTML dalam satu ketikan.

Emmet (Visual Studio Code)

2. Membuat Elemen HTML

a) Elemen Dasar

Singkatan:

div

Ekspansi:

<div></div>

Fungsi:
Membuat elemen <div> dengan cepat.

Emmet (Visual Studio Code)

b) Elemen dengan Class (.)

Singkatan:

div.container

Ekspansi:

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

Fungsi:
Membuat elemen <div> dengan class container.

Emmet (Visual Studio Code)

c) Elemen dengan ID (#)

Singkatan:

section#hero

Ekspansi:

<section id="hero"></section>

Fungsi:
Membuat elemen <section> dengan id="hero".

Emmet (Visual Studio Code)

d) Elemen Bersarang (>)

Singkatan:

nav>ul>li

Ekspansi:

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

Fungsi:
Membuat elemen yang bersarang (parent-child relationship).

Emmet (Visual Studio Code)

3. Duplikasi Elemen (*)

Singkatan:

ul>li*5

Ekspansi:

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

Fungsi:
Membuat 5 buah elemen <li> di dalam <ul>.

Emmet (Visual Studio Code)

4. Menambahkan Teks Placeholder ({})

Singkatan:

p{Ini adalah paragraf contoh}

Ekspansi:

<p>Ini adalah paragraf contoh</p>

Fungsi:
Menambahkan teks langsung ke dalam elemen.

Emmet (Visual Studio Code)

5. Membuat Beberapa Elemen dengan Class dan ID

Singkatan:

div#main.container

Ekspansi:

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

Fungsi:
Membuat elemen <div> dengan id="main" dan class="container".

Emmet (Visual Studio Code)

6. Menggunakan Grup (())

Singkatan:

div>(header>h1)+section+footer

Ekspansi:

<div>
    <header>
        <h1></h1>
    </header>
    <section></section>
    <footer></footer>
</div>

Fungsi:
Membuat struktur yang kompleks dengan grup elemen.

Emmet (Visual Studio Code)

7. Elemen Bersaudara (+)

Singkatan:

h1+p

Ekspansi:

<h1></h1>
<p></p>

Fungsi:
Membuat elemen bersaudara (sibling elements).

Emmet (Visual Studio Code)

8. Menambahkan Atribut ([])

Singkatan:

input[type="text" placeholder="Masukkan nama"]

Ekspansi:

<input type="text" placeholder="Masukkan nama">

Fungsi:
Menambahkan atribut langsung ke elemen.

Emmet (Visual Studio Code)

9. Elemen Auto-numbering ($)

Singkatan:

ul>li.item$*3

Ekspansi:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

Fungsi:
Menambahkan angka otomatis pada class.