Install EMMET di Sublime Text

 
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
View Mode
Views:

996


Replies:4

Install EMMET di Sublime Text

Ahay... Mau Ngoding HTML, CSS, PHP dan lain-lain secara ringkas di Sublime Text? Bingung Caranya cukup mudah, tinggal kita install Package Control di Sublime Text`nya man Ketawa

Buat paman-paman yang udah punya Sublime Text terus masih ngerasa cara koding paman 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.

"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 artikelnya 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.

[Image: initializers.gif]

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

[Image: classes-ids.gif]

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.

[Image: nesting.gif]

GROUPING

Kita juga bisa menjadikan kelompok seperti pada operasi matematika (.foo>h1)+(.bar>h2) hasilnya

<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>

[Image: grouping.gif]

PENAMAAN TAG IMPLISIT

Untuk menyatakan tag dengan class-nya kita tinggal mengetikkan div.item nanti keluarannya jadi

<div class="item"></div>

[Image: implicit-tags.gif]

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

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

[Image: multiplication.gif]

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

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

[Image: numbering.gif]

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;

[Image: values.gif]

Bukan cuma pixel, ukuran yang lainnya pun bisa seperti h10p+m5e jadi

height: 10%;
margin: 5em;

Berikut daftarnya
  • p → %
  • e → em
  • x → ex
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

@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
   url('FileName.woff') format('woff'),
   url('FileName.ttf') format('truetype'),
   url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}

[Image: extra.gif]

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;

[Image: fuzzy-search.gif]

VENDOR PREFIXIES

Suka pakai CSS3? coba ketik trs bukan singkatan dari 'terus' yah hahaha tapi ini transition nanti keluarannya

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

[Image: vendor-prefixes.gif]

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

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ff), to(#000));
background-image: -webkit-linear-gradient(left, #ff 50%, #000);
background-image: -moz-linear-gradient(left, #ff 50%, #000);
background-image: -o-linear-gradient(left, #ff 50%, #000);
background-image: linear-gradient(left, #ff 50%, #000);

[Image: gradient.gif]

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

<p>Lorem ipsum dolor.</p>
<p>Nihil, labore, laudantium.</p>
<p>Facilis, debitis, maiores.</p>

[Image: lorem.gif]

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 paman untuk pake Emmet. Terakhir dari saya selamat mencoba! Hehe

Refrensi

(This post was last modified: 13-05-2014 12:01 AM by SunDi3yansyah.)

RT: Install EMMET di Sublime Text

mantab kali Huhu Ketawa

RT: Install EMMET di Sublime Text

mantap nih Hehe tutorial cracknya dong paman Sedih

RT: Install EMMET di Sublime Text

Paman, punya kerak nya gak ?
Hehe

kalo punya minta dong, paman ?

Mintamohon

RT: Install EMMET di Sublime Text

Oke nanti saya share Hehe
kampoeng