Penggunaan Plugin Emmet Pada Sublime Text

Penggunaan Plugin Emmet Pada Sublime Text – Setelah kita sudah berhasil menginstall Package Control, maka kita bisa menginstall plugin apapun yang dapat digunakan dalam aplikasi kode editor sublime text. Salah satunya Emmet, yang merupakan salah satu plugin sublime text yang akan sering digunakan. Apa itu Emmet ? Emmet adalah plugin yang ada pada sublime text yang berfungsi menerjemahkan satu kode atau satu baris kode program pendek tertentu untuk menjadi sintax tertentu juga. Emmmet memiliki beberapa fungsi, diantaranya sebagai berikut:

1.Penyingkat HTML ( HTML Abbreviation )

2.Penyingkat CSS

3.Melakukan Aksi lainnya

Mungkin anda bertanya, seperti apa rupanya plugin Emmet ini. Sebagai contoh, ketika kita ingin membuat struktur HTML, dengan plugin emmet, kita hanya cukup tekan tombol ! + tab, maka akan secara langsung terbentuk struktur HTML.

Plugin Emmet sendiri sudah banyak digunakan pada aplikasi kode editor selain sublime text. Sebut saja ada Atom, Eclipse/Aptana, TextMate, Coda, Espresso, Chocolat, Komodo Edit, Notepad++, PSPad, textarea, CodeMirror, Brackets, NetBeans, dan Adobe Dreamwaver. Jadi plugin ini memang sangat bisa dihandalkan bagi user yang suka membuat design website atau web developer dan web designer, terutama yang sering menggunakan bahasa markup HTML dan CSS karena akan semakin meningkatkan workflow mereka. Untuk mengetahui mengenai plugin lebih jelas, silakan kunjungi emmet.io.

Sebelum bisa menggunakan plugin Emmet, tentu saja kita harus menginstall plugin ini terlebih dahulu. Berikut langkah-langkah instalasi-nya:

1.Klik preference di bagian menu atas, lalu pilih package control atau bisa dengan tekan tombol Ctrl + Shift + P.

2.Ketik install package, kemudian tekan enter.

3.Tunggu sampe text editor meload daftar repository-nya.

4.Kemudian ketik emmet.

5.Pilih : Emmet (ex-Zen Coding ) for Sublime Text.

6.Biarkan sampai selesai install-nya.

7.Restart.

Setelah kita sudah selesai meng-install, selanjutnya kita akan coba menggunakan sekaligus memahami plugin emmet ini secara lebih mendalam sesuai dengan fungsi plugin Emmet yang sudah disebutkan di atas:

1. Penyingkat HTML ( HTML Abbreviation )

Salah satu fungsi plugin Emmet adalah untuk menyingkat penulisan baris kode HTML. sebagai contoh, ketika kita menuliskan baris kode berikut:

.container>(.header>ul.nav>li*5>a{Nomor $$})+(.main>h2{Judul Artikel}+p>lorem25)

Maka, sublime text akan menghasilkan baris-baris kode berikut, setelah tombol tab ditekan:

<div class="container">
	<div class="header">
		<ul class="nav">
			<li><a href="">Nomor 01</a></li>
			<li><a href="">Nomor 02</a></li>
			<li><a href="">Nomor 03</a></li>
			<li><a href="">Nomor 04</a></li>
			<li><a href="">Nomor 05</a></li>
		</ul>
	</div>
	<div class="main">
		<h2>Judul Artikel</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit incidunt ea obcaecati. Praesentium molestias aliquid, perspiciatis, ex quibusdam accusamus explicabo cum, eligendi vero ratione, architecto!</p>
	</div>
</div>

Bagian ini, akan dijelaskan sintax-sintax atau keyword yang digunakan pada plugin emmet secara lebih detil untuk menjelaskan kode baris html. Berikut penjelasannya :

●  Tanda lebih besar dari ( > )

Tanda ini memiliki arti “di dalam”, fungsinya untuk menyimpan atau membuat sebuah elemen yang di dalamnya terdapat satu elemen lain

Contoh sintak :

div>p

Hasilnya :

<div>
	<p></p>
</div>

Cara bacanya : Ada 1 div yang di dalamnya ada 1 paragraph

● Identifikasi class ( . )

Untuk mengidentifikasi perintah membuat class. Plugin emmet sudah cerdas mengidentifikasi elemen class yang direpresentasikan dengan tanda titik ( .) yang kita buat dengan membedakan antara elemen block atau inline. contoh nya sebagai berikut :

Contoh sintak :

.container

Hasilnya :

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

Keterangan: Tag <div> adalah elemen jenis elemen block, maka emmet akan langsung membuat class di dalam tag <div>.

Contoh sintak :

p>.tulisan

Hasilnya:

<p><span class="tulisan"></span></p>

Keterangan : Tag <p> adalah jenis elemen inline, karena itu akan langsung otomatis dibuatkan tag <span> di dalamnya.

Contoh sintak :           

ul>.link

Hasilnya :

<ul>
	<li class="link"></li>
</ul>

Keterangan : Tag <li> adalah jenis elemen block, karena itu emmet langsung membuat class di dalam tag <li>.

● Tanda plus ( + )

Fungsi tanda plus ( + ) dalam plugin emmet adalah untuk membuat elemen yang sejajar, jadi bukan anak atau elemen di dalamnya.

Contoh sintak :

div>h1+p

Hasilnya :

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

● Tanda bintang/perkalian ( * )

Tanda multiplikasi atau perkalian ( * ) adalah untuk memberitahu kode editor berapa bantak elemen tertentu yang akan kita buat.

Contoh sintak :

ul>li*5

Hasilnya :

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

● Tanda kurung buka dan kurung tutup ( () )

Fungsi dari sintak ini untuk melakukan grouping elemen html

Contoh sintak :

.container>(.header>ul.nav>li*5)+(.main>h2)

Hasilnya :

<div class="container">
	<div class="header">
		<ul class="nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="main">
		<h2></h2>
	</div>
</div>

● Tanda kurung kurawal buka dan tutup ( {} )

Fungsi sintak dari tanda ini untuk menuliskan text yang ada dalam tag html

Contoh sintak :

p{hello world !}

Hasilnya :

<p>hello world !</p>

● Tanda dollar ( $ )

Fungsi sintak ini untuk menambahkan urutan text yang dibuat di dalam sintak html. Tanda dollar ini juga bisa ditambahkan lebih dari satu untuk memberi tanda 0 di sebelum urutan sesungguhnya :

Contoh sintak :

ul>li*5>{Nomor $}

Hasilnya :

<ul>
	<li>Nomor 1</li>
	<li>Nomor 2</li>
	<li>Nomor 3</li>
	<li>Nomor 4</li>
	<li>Nomor 5</li>
</ul>

Contoh sintak :

ul>li*5>{Nomor $$$$}

Hasilnya :

<ul>
	<li>Nomor 0001</li>
	<li>Nomor 0002</li>
	<li>Nomor 0003</li>
	<li>Nomor 0004</li>
	<li>Nomor 0005</li>
</ul>

● Lorem

Fungsi dari tulisan lorem adalah untuk membuat paragraf secara random. Standarnya kalo kita tidak menggunakan plugin emmet, text random ini akan membuat sekitar 80-100 karakter kata. Namun dengan plugin emmet kita bisa mengatur jumlah kata yang kita ingginkan. Standar emmet kalo tidak menuliskan angka yang kita mau, akan membuat 40 kata.

Contoh sintak :

p*2>lorem25

Hasilnya :

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat esse dignissimos quod iusto sit, id fugiat adipisci illo qui itaque asperiores, architecto ducimus mollitia molestias.</p>
<p>Fugiat libero, nam suscipit neque vel quis ipsam architecto praesentium aspernatur magnam. Repellendus inventore autem rem molestias, vel! Non ipsa, maxime, distinctio soluta voluptatem recusandae.</p>

2. Penyingkat CSS

Plugin emmet bisa digunakan pada file css. Perlu dicatat, pada file css, konsep fuzzy searching akan bekerja. Ok langsung saja, bagaimana plugin emmet bisa bekerja pada file css. Berikut penjelasan dan contoh-contohnya. Pertama buat halaman html yang dihubungan dengan file css :

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">

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

</body>
</html>

Berikut untuk contoh css-nya :

Contoh sintak :

.container {
	w500
}

Keterangan : sintak untuk membuat lebar/width sebesar 500px.

Hasilnya setelah ditab :

.container {
	width: 500px;
}

Contoh sintak :

.container {
	width: 500px;
	h1000
}

Keterangan : sintak untuk membuat tinggi/height sebesar 1000px.

Hasilnya setelah ditab :

.container {
	width: 500px;
	height: 1000px;
}

Contoh sintak :

.container {
	w80p
}

Keterangan : sintak untuk membuat lebar/width responsive dengan satuan persen.

Hasilnya setelah ditab :

.container {
	width: 80%;
}

Contoh sintak :

.container {
	m20
}

Keterangan : sintak ini untuk membuat margin kanan, kiri, atas, bawah 20px.

Hasilnya setelah ditab :

.container {
	margin: 20px;
}

Contoh sintak :

.container {
	m20-auto
}

Keterangan : sintak untuk membuat margin atas bawah 20px dan samping kanan kiri auto.

Hasilnya setelah ditab :

.container {
	margin: 20px auto;
}

Contoh sintak :

.container {
	m20-30-25-35
}

Keterangan : sintak untuk membuat margin atas 20px, samping kanan 30px, bawah 25px, dan samping kiri 35px.

Hasilnya setelah ditab :

.container {
	margin: 20px 30px 25px 35px;
}

Contoh sintak :

.container {
	c
}

Keterangan : sintak untuk membuat warna, dengan kondisi nilainya #000.

Hasilnya setelah ditab :

.container {
	color: #000;
}

Contoh sintak :

.container {
	c#234234
}

Keterangan : sintak untuk memberi warna dengan nilai hexadecimal #234234.

Hasilnya setelah ditab :

.container {
	color: #234234;
}

Contoh sintak :

.container {
	bgc
}

Keterangan : sintak untuk memberi warna background dengan nilai default #fff atau putih.

Hasilnya setelah ditab :

.container {
	background-color: #fff;
}

Contoh sintak :

.container {
	bdrs20
}

Keterangan : sintak untuk membuat border radius sebesar 20px pada masing-masing sudut kotak.

Hasilnya setelah ditab :

.container {
	border-radius: 20px;
}

Contoh sintak :

.container {
	-bdrs20
}

Keterangan : sintak untuk membuat border radius 20px agar compatible bekerja disetiap browser.

Hasilnya setelah ditab :

.container {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}

3. Melakukan Aksi lainnya

Plugin emmet memiliki kemampuan untuk melakukan aksi-aksi lain sehingga sangat memudahkan user dalam melakukan koding. Untuk tahu lebih lengkap hal-hal apa saja yang bisa dilakukan plugin emmet, silakan kunjungi : docs.emmet.io .

Share :