Koding HTML+CSS Ringkas Pakai Emmet di Sublime Text
Buat kamu-kamu yang udah punya Sublime Text terus masih ngerasa cara
koding kamu masih lama, butuh sesuatu yang baru biar kalau pasang tag
tiba-tiba langsung ada ga perlu terlalu inget tinggal pencet tab doang,
kalian pasti suka dengan plugin yang satu ini namanya Emmet. Dulunya
bernama Zen Coding kalau kata Smashing Magazine mah
"Emmet is the most productive and time-saving text-editor plugin you will ever see."
Keren banget kan tuh kalian bisa mempercepat kodingan dengan mengetikkan
beberapa singkatan khusus trus kalo kita tekan tab maka akan keluar
suatu potongan kode komplek.
Sebelum itu coba cek dulu aja nih videonya biar tambah wow.
Cara Install
Kalau kalian udah install Package Control cara installnya tinggal CTRL+SHIFT+P
→ “install” → ENTER → “emmet” → ENTER. Belum tahu Package Control baca dulu artikel
disini
.
Bagaimana cara kerjanya?
Menulis kode HTML itu kita sadari memang memakan waktu, harus buka tutup
tagnya, belum kurungnya, dan segala macam yang harus kita ketik ulang.
Memang semua code editor juga punya code completion sendiri tapi
keluarnya kan cuma sepotong. Kalau dengan Emmet dari sepotong itu jadi
kode yang komplek jadi tidak terlalu banyak ngetik tinggal isi aja.
Beberapa hal yang dapat dilakukan si Emmet ini adalah sebagai berikut.
HTML Abbreviations
Initializers
Mulai suatu dokumen HTML baru bisa secepat kilat (lebay) tinggal ketik !
atau html:5, trus tekan Tab, secara ajaib akan keluar template HTML5
doctype yang udah siap kita isi didalamnya. Keren kan, jadi kita tidak
perlu lagi bikin buka tutup tag tinggal sekali potongan kode aja jadi
semua.
- html:5 atau ! untuk HTML5 doctype
- html:xt untuk XHTML trasitional doctype
- html:4s untuk HTML4 strict doctype
Menambah Class, ID, Teks dan Atribut
Syntax yang digunakan Emmet untuk mendeskripsikan suatu elemen sama
seperti CSS selector, misalnya p.menu#header maka keluaranya akan
menjadi
Nesting
Bukan cuma sebatas gabungan satu tag seperti diatas namun kita juga bisa
juga bersarang (nesting). Operasinya harus diawali operator > kalau
mau bersarang. Bisa pakai + juga untuk satu level. Terakhir bisa pakai ^
biar nambah satu level lagi dibawahnya.
Grouping
Kita juga bisa menjadikan kelompok seperti pada operasi matematika (.foo>h1)+(.bar>h2) hasilnya
Penamaan Tag Implisit
Untuk menyatakan tag dengan class-nya kita tinggal mengetikkan div.item nanti keluarannya jadi
1 | <div class="item"></div> |
Multiplikasi
Mau tambah listingnya banyak ga perlu repot tulis tag li nya, pakai
operator * untuk mendefinisikan berapa banyaknya. Misalnya ul>li*3
maka keluarannya menjadi
Penomoran
Gabungan multiplikasi juga pakai nomer, cukup tambah operator $ pada
nama elemen dan multiplikasi akan bekerja sesuai input yang diberikan.
Jika mengetik ol>li.item$*3 maka menjadi
2 | <li class="item1"></li> |
3 | <li class="item2"></li> |
4 | <li class="item3"></li> |
CSS Abbreviations
Values
Bukan hanya bisa digunakan pada tag HTML tapi bisa juga pada tag CSS.
Semisal kita mau memasukan nilai width pada suatu css tinggal ketik w100
jadi deh width: 100px;
Bukan cuma pixel, ukuran yang lainnya pun bisa seperti h10p+m5e jadi
Berikut daftarnya
Operator Tambahan
Ada beberapa tambahan lagi yang bisa digunakan misal kita mau membuat
template @font-face dengan cepat tinggal ketik @f+ maka keluar seperti
ini
02 | font-family: 'FontName'; |
03 | src: url('FileName.eot'); |
04 | src: url('FileName.eot?#iefix') format('embedded-opentype'), |
05 | url('FileName.woff') format('woff'), |
06 | url('FileName.ttf') format('truetype'), |
07 | url('FileName.svg#FontName') format('svg'); |
Fuzzy Search
Emmet juga bisa mencari tag yang hampir mirip dengan apa yang kita ketik
misal ov:h dan ov-h dan ovh dan oh akan mengeluarkan hasil yang sama
yaitu overflow: hidden;
Vendor Prefixies
Suka pakai CSS3? coba ketik trs bukan singkatan dari 'terus' yah hahaha tapi ini transition nanti keluarannya
1 | -webkit-transition: prop time; |
2 | -moz-transition: prop time; |
3 | -ms-transition: prop time; |
4 | -o-transition: prop time; |
Daftar yang lainnya
- w → -webkit-
- m → -moz-
- s → -ms-
- o → -o-
Gradient
CSS3 itu ada gradasi juga, mau buat gradasi coba ketik saja lg(left, #ff 50%, #000) keluarannya menjadi
1 | background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ff), to(#000)); |
2 | background-image: -webkit-linear-gradient(left, #ff 50%, #000); |
3 | background-image: -moz-linear-gradient(left, #ff 50%, #000); |
4 | background-image: -o-linear-gradient(left, #ff 50%, #000); |
5 | background-image: linear-gradient(left, #ff 50%, #000); |
Extra
Lorem Ipsum
Memang ada plugin khusus juga untuk Lorem Ipsum ini tapi Emmet pun
menyediakannya ketik lorem atau ipsum nanti langsung keluar deh itu
kalimat. Lebih keren lagi coba ketik p*3>lorem3 keluarannya jadi
1 | <p>Lorem ipsum dolor.</p> |
2 | <p>Nihil, labore, laudantium.</p> |
3 | <p>Facilis, debitis, maiores.</p> |
Kesimpulan
Sebenarnya Emmet bukan hanya untuk Sublime Text masih banyak Aplikasi
Editor yang didukung. Kemampuan si Emmet ini juga bukan cuma yang
dijelaskan di atas lebih lengkap silakan cek saja
websitenya dengan
dokumentasi yang mantap dan
cheat sheet yang bisa jadi contekan kamu untuk pake Emmet. Terakhir dari saya selamat mencoba! :D
Buat kamu-kamu yang udah punya Sublime Text terus masih ngerasa cara
koding kamu masih lama, butuh sesuatu yang baru biar kalau pasang tag
tiba-tiba langsung ada ga perlu terlalu inget tinggal pencet tab doang,
kalian pasti suka dengan plugin yang satu ini namanya Emmet. Dulunya
bernama Zen Coding kalau kata Smashing Magazine mah
0 komentar:
Posting Komentar