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 )

dua.Penyingkat CSS

tiga.Melakukan Aksi lainnya

Mungkin anda bertanya, misalnya apa rupanya plugin Emmet ini. Sebagai contoh, ketika kita ingin menciptakan struktur HTML, menggunakan plugin emmet, kita hanya cukup tekan tombol ! Tab, maka akan secara pribadi terbentuk struktur HTML.

Plugin Emmet sendiri sudah banyak digunakan dalam pelaksanaan 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 yg suka membuat design website atau web developer dan web designer, terutama yg tak jarang menggunakan bahasa markup HTML & CSS lantaran akan semakin mempertinggi workflow mereka. Untuk mengetahui tentang plugin lebih kentara, 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 terselesaikan install-nya.

7.Restart.

Setelah kita sudah terselesaikan meng-install, selanjutnya kita akan coba memakai sekaligus tahu plugin emmet ini secara lebih mendalam sesuai dengan fungsi plugin Emmet yg telah disebutkan pada atas:

1. Penyingkat HTML ( HTML Abbreviation )

Salah satu fungsi plugin Emmet merupakan buat menyingkat penulisan baris kode HTML. Sebagai model, ketika kita menuliskan baris kode berikut:

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

Maka, sublime text akan membentuk baris-baris kode berikut, selesainya 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 yg dipakai pada plugin emmet secara lebih detil buat menjelaskan kode baris html. Berikut penjelasannya :

● Tanda lebih besar dari ( > )

Tanda ini mempunyai arti ?Di dalam?, kegunaannya buat menyimpan atau membuat sebuah elemen yang pada dalamnya terdapat satu elemen lain

Contoh sintak :

			div>p

Hasilnya :

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

Cara bacanya : Ada 1 div yg di dalamnya terdapat 1 paragraph

? Identifikasi group ( . )

Untuk mengidentifikasi perintah membuat group. Plugin emmet sudah cerdas mengidentifikasi elemen group yang direpresentasikan menggunakan indikasi titik ( .) yang kita buat menggunakan 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 indikasi plus ( ) pada plugin emmet merupakan buat membuat elemen yang sejajar, jadi bukan anak atau elemen pada dalamnya.

Contoh sintak :

			div>h1+p

Hasilnya :

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

? Tanda bintang/perkalian ( * )

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

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 buat 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 & tutup ( )

Fungsi sintak menurut indikasi ini untuk menuliskan text yang terdapat pada tag html

Contoh sintak :

			phello world !

Hasilnya :

			<p>hello world !</p>

? Tanda dollar ( $ )

Fungsi sintak ini buat menambahkan urutan text yg dibuat pada dalam sintak html. Tanda dollar ini pula bisa ditambahkan lebih dari satu buat memberi pertanda 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 berdasarkan tulisan lorem adalah buat membuat paragraf secara random. Standarnya kalo kita nir memakai plugin emmet, text secara acak ini akan menciptakan kurang lebih 80-100 karakter istilah. Namun menggunakan plugin emmet kita mampu mengatur jumlah istilah 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>

dua. 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 sehabis ditab :

			.Container { 	width: 500px; }

Contoh sintak :

			.Container { 	width: 500px; 	h1000 }

Keterangan : sintak buat menciptakan tinggi/height sebanyak 1000px.

Hasilnya sehabis ditab :

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

Contoh sintak :

			.Container { 	w80p }

Keterangan : sintak buat menciptakan lebar/width responsive menggunakan satuan persen.

Hasilnya sehabis ditab :

			.Container { 	width: 80%; }

Contoh sintak :

			.Container { 	m20 }

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

Hasilnya sehabis ditab :

			.Container { 	margin: 20px; }

Contoh sintak :

			.Container { 	m20-auto }

Keterangan : sintak buat membuat margin atas bawah 20px & samping kanan kiri auto.

Hasilnya sehabis ditab :

			.Container { 	margin: 20px auto; }

Contoh sintak :

			.Container { 	m20-30-25-35 }

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

Hasilnya sehabis ditab :

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

Contoh sintak :

			.Container { 	c }

Keterangan : sintak buat membuat rona, menggunakan syarat nilainya #000.

Hasilnya sehabis ditab :

			.Container { 	color: #000; }

Contoh sintak :

			.Container { 	c#234234 }

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

Hasilnya sehabis ditab :

			.Container { 	color: #234234; }

Contoh sintak :

			.Container { 	bgc }

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

Hasilnya sehabis ditab :

			.Container { 	background-color: #fff; }

Contoh sintak :

			.Container { 	bdrs20 }

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

Hasilnya sehabis ditab :

			.Container { 	border-radius: 20px; }

Contoh sintak :

			.Container { 	-bdrs20 }

Keterangan : sintak buat menciptakan border radius 20px agar compatible bekerja disetiap browser.

Hasilnya sehabis ditab :

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

tiga. Melakukan Aksi lainnya

Plugin emmet mempunyai kemampuan buat melakukan aksi-aksi lain sehingga sangat memudahkan user pada melakukan koding. Untuk tahu lebih lengkap hal-hal apa saja yg bisa dilakukan plugin emmet, silakan kunjungi : docs.Emmet.Io .