Emmet, yang sebelumnya dikenal sebagai Zen Coding, adalah salah satu alat terbaik yang harus Anda miliki untuk meningkatkan produktivitas Anda saat coding HTML atau CSS. Ini berfungsi seperti penyelesaian kode, tetapi lebih kuat dan menakjubkan. Itu dapat mengotomatiskan HTML / CSS Anda dari bentuk sederhana ke yang kompleks.
Emmet menawarkan dukungan yang baik untuk editor teks atau IDE (Lingkungan Pengembangan Terpadu) seperti Dreamweaver, Eclipse, Teks Sublime, TextMate, Expresso, Coda, Kurung, Notepad ++, PHPStorm dan banyak lagi. Ini juga mendukung alat pengeditan online seperti JSFiddle, JSBin, CodePen, IceCoder dan Codio .
Cara kerja Emmet adalah dengan mengetikkan tombol keyboard tab Anda ketika selesai menulis sintaks. Berikut ini adalah simbol Emmet paling umum yang dapat Anda gunakan. Untuk melihatnya dalam aksi, silakan lanjutkan membaca.
Emmet - Trik Terbaik HTML
Anda akan kagum ketika menulis HTML dengan Emmet seperti yang saya lakukan. Seperti yang dinyatakan sebelumnya, Emmet mampu menyingkat HTML sederhana menjadi sangat kompleks. Dan mereka ditulis hanya pada satu baris kode. Secara default, jika Anda menyingkat nama tag yang tidak dikenal, Emmet akan secara otomatis menulis tag yang Anda tulis. Lihat animasi di bawah ini untuk memahaminya dengan mudah.
1. Bersarang
Untuk membuat sarang beberapa elemen, Anda hanya perlu menambahkan tanda yang lebih besar > setelah setiap tag yang ingin Anda gunakan. Misalnya, ketika saya ingin memiliki header dengan nav, div, ul dan li di dalamnya saya hanya perlu mengetikkan header>nav>div>ul>li dan tombol tab hit.
2. Saudara kandung
Jika Anda tidak ingin membuat sarang elemen Anda, Anda bisa menggunakan tanda tambah + diikuti dengan tag yang ingin Anda tambahkan. Contoh, header+section+article+footer akan memberikan tempat yang berbeda untuk header, section, article, dan footer .
3. Naik
Ketika Anda berada di dalam elemen anak dan ingin memiliki elemen lain di luar anak itu, Anda dapat dengan mudah memanjat satu elemen dengan tanda ^ . Jika Anda mengetiknya dua kali, maka Anda akan naik dua elemen dan seterusnya. Sebagai contoh, jika Anda mengetik header>div>h1>nav Anda akan memiliki elemen nav masih di dalam h1. Untuk mengeluarkannya, ganti saja tanda > terakhir dengan ^ .
4. Tambahkan Kelas
Emmet juga dapat memasukkan nama kelas pilihan Anda di dalam tag. Tanda yang akan Anda gunakan sama dengan pemilih kelas di CSS yang sama dengan titik . tanda. Sebagai contoh, jika saya ingin memiliki div dengan kelas .container, h1 dengan .title dan nav dengan .fixed, maka saya hanya perlu menulis div.container>header>h1.title+nav.fixed .
Jika Anda ingin memiliki lebih dari satu kelas di dalamnya, ketikkan kelas tambahan Anda setelah kelas pertama bersama dengan titik . tanda. Contoh: div.container.center akan menghasilkan .
5. Tambahkan ID
Selain kelas, Anda juga dapat menambahkan ID di dalam tag Anda dengan tanda # . Penggunaannya sama seperti menambahkan kelas tetapi Anda tidak boleh mengetikkan ID ganda di dalamnya. Jika Anda mencoba melakukannya, Emmet hanya akan membaca ID terakhir yang Anda ketikkan.
6. Tambahkan Teks
Emmet tidak sesederhana hanya menyingkat beberapa tag, Anda bahkan dapat menambahkan baris teks di dalamnya. Untuk menambahkan beberapa teks, Anda hanya perlu membungkus teks dengan tanda kurung {} . Anda tidak perlu menambahkan tanda > lebih besar karena teks akan secara otomatis ditambahkan di dalam tag.
7. Tambahkan Atribut
Jika Anda ingin menambahkan atribut lain selain dari kelas dan id, tempatkan atribut yang ingin Anda tambahkan tanda kurung [] . Sebagai contoh, saya ingin memiliki gambar yang memiliki sumber logo.png dengan alt logo, jadi saya cukup ketik img[src="logo.png"] .
8. Pengelompokan
Saat Anda ingin memiliki elemen dengan banyak nested di dalamnya, maka mengelompokkannya dengan tanda () akan membantu Anda mencapainya dengan mudah. Contoh, saya ingin memiliki wadah yang memiliki tajuk dengan h1 dan nav di dalam dan bagian lain di luar tajuk, saya hanya akan menulis: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Perkalian
Fitur ini dapat menjadi salah satu favorit Anda dari Emmet. Seperti dengan perkalian, kita dapat mengalikan elemen apa pun sebanyak yang kita inginkan. Untuk menggunakannya cukup tambahkan tanda bintang * setelah elemen yang ingin Anda kalikan dan tambahkan nomor elemen. Misalnya, saya ingin menulis lima item li di dalam ul, maka sintaks yang tepat adalah ul>li*5 .
10. Penomoran Otomatis
Penomoran otomatis akan membantu Anda dengan mudah menulis nama berbeda dengan meningkatnya angka. Sintaks yang tepat untuk fitur ini adalah tanda dolar $ . Penomoran otomatis paling baik digunakan dengan perkalian. Contoh, saya ingin menambahkan item li saya sebelumnya dengan kelas dari item1 ke item5 . Jadi, saya hanya perlu menambahkan nama kelas tambahan dengan tanda dolar: ul>li.item$*5 .
11. Lorem
Jika Anda terbiasa menulis beberapa teks dummy dengan membuka generator lipsum seperti lipsum.com, dengan Emmet Anda tidak perlu melakukannya lagi. Emmet juga mendukung generator teks dummy dengan sintaks lorem atau lipsum . Anda juga dapat menentukan berapa lama teks Anda akan menjadi. Misalnya, saya ingin memiliki beberapa teks dengan panjang 10 kata, maka saya akan mengetik lorem10 .
12. Dokumen Otomatis
Saat Anda memulai proyek baru, alih-alih menulis struktur html secara manual atau menyalin rekatkan dari sumber lain, Emmet dapat melakukannya untuk Anda lebih baik. Yang perlu Anda lakukan adalah mengetik seruan ! masuk, tekan tab dan keajaiban terjadi. Itu akan menghasilkan struktur dokumen HTML5 untuk Anda, jika Anda ingin menggunakan HTML4 sebagai gantinya, cukup ketik html:4t .
13. Tautan
Jika Anda memiliki file favicon, rss atau CSS eksternal yang ingin Anda tambahkan ke dokumen Anda, Anda dapat menggunakan trik tautan untuk menulisnya lebih cepat. Untuk memasukkan favicon, ketik link:favicon maka itu akan menghasilkan Anda tautan favicon dengan nama file favicon.ico default di dalamnya. Dan untuk css, link:css akan menghasilkan Anda tautan CSS dengan nama style style.css default di dalamnya. Dan RSS akan menjadi rss.xml sebagai nama default.
Anda dapat menggabungkannya dengan tanda tambah + untuk menghasilkan sumber daya yang lebih cepat.
14. Jangkar
Secara default, saat Anda mengetik tag lalu menekan tab, Anda akan mendapatkan tag lengkap dengan atribut href di dalamnya. Tetapi Anda dapat menambahkan nilai // jika Anda mengkombinasikannya dengan tautan, misalnya a:link Dan jika Anda ingin memiliki tautan surat, gunakanlah a:mail .
15. Skipping Cerdas
Trik HTML terakhir yang akan saya berikan adalah fitur melompat pintar. Pada dasarnya, Anda tidak harus menulis nama tag ketika Anda ingin memiliki kelas atau id di dalamnya. Ini hanya berlaku pada beberapa kondisi tertentu.
Pertama, jika Anda ingin memiliki div dengan ID atau kelas di dalamnya, Anda tidak perlu menulis nama tag, cukup langsung menulis id atau simbol kelas bersama dengan namanya.
Kedua, ketika Anda berada di dalam tag ul, Anda lewati menulis tag li jika memiliki kelas atau id.
Dan yang terakhir diterapkan dalam tag table . Anda dapat melewati penulisan tr dan td tag jika mereka memiliki kelas atau id dan Emmet akan secara otomatis menambahkannya untuk Anda.
Emmet - Trik CSS Terbaik
Setelah Anda mempelajari beberapa trik HTML, sekarang saatnya untuk CSS. Beberapa simbol umum yang ditunjukkan pada gambar atas tidak akan berfungsi dengan CSS. Mereka lebih besar dan memanjat simbol. Jika Anda menggunakannya, mereka akan menghasilkan seperti simbol plus + . Jadi, ayo berangkat.
1. Lebar & Tinggi
Mendefinisikan width dan height dengan Emmet sangat mudah. Anda hanya perlu menulis kata pertama dari mereka diikuti oleh ukuran yang ingin Anda tambahkan. Secara default, jika Anda tidak menentukan unit, Emmet akan menghasilkannya dengan unit px . Simbol satuan yang tersedia adalah persen % dan em .
2. Teks
Ada beberapa simbol properti teks yang mudah digunakan dan akan dihasilkan dengan nilai default. ta akan menghasilkan text-align dengan nilai left, td akan menjadi text-decoration none nilai dan tt akan menjadi text-transform dengan nilai uppercase besar.
3. Latar Belakang
Untuk menambahkan latar belakang, cukup gunakan singkatan bg . Anda dapat menggabungkannya dengan bgi untuk mendapatkan background-image, bgc untuk background-color dan bgr untuk background-repeat . Anda juga dapat menulis bg+ untuk mendapatkan daftar lengkap properti latar belakang.
4. Huruf Wajah
Tanda plus tidak hanya berlaku untuk latar belakang. Untuk @font-face, Anda cukup menulis @f+ untuk daftar lengkap properti @font-face . Jika Anda mengetik @f tanpa tanda tambah, maka Anda akan mendapatkan dasar @font-face saja.
5. Lain-lain
Trik hebat lainnya adalah Anda dapat menyingkat penulisan animation dengan teks anim . Jika Anda menambahkan tanda minus, Anda akan mendapatkan properti animasi dengan nilai penuh. Ada juga @kf teks yang akan menghasilkan daftar lengkap @keyframe .
Kesimpulan
Emmet adalah alat penghemat waktu yang sangat besar untuk merampingkan proses pengembangan Anda. Jika Anda hanya mengenal Emmet, belum terlambat untuk mencobanya sekarang. Trik-trik itu hanyalah beberapa fitur Emmet. Ada banyak simbol dan sintaks lain di Emmet, terutama untuk CSS. Cukup buka Emmet docs atau cheat sheet untuk melanjutkan bacaan Anda.
