Uzun süre boyunca emmet nedir bilmeden kod yazdım. En son kuzenimin kullandığını gördükten sonra öğrenmeye karar verdim. Son zamanlarda laptop kullandığım için bayağı bir yararını gördüm. Bundan ötürü bildiğim kadarını forumda paylaşmak istedim
Burada paylaşacağım bilgiler sadece yazımı ile alakalıdır. Daha detaylı bilgiye buradan ulaşabilirsiniz
Genişletmek için kendi IDE ayarlarınızda bulunan , bu işleve bağlı tuşu kullanmanız gerekmektedir. Bu tuş genellikle TAB yada SPACE tuşu oluyor.
1 - Sadece tag oluşturma
Tag oluşturmak için sadece tag adını yazıp genişletmemiz yeterlidir
Örneğin:
span <!-- Genişletildiği zaman --> <span></span> b <!-- Genişletildiği zaman --> <b></b> input <!-- Genişletildiği zaman --> <input type="text">2 - CSS class bağlama
CSS classları . (nokta) ile elementlere bağlanabilir.
.alert <!-- Genişletildiği zaman --> <div class="alert"></div> .alert.alert-danger <!-- Genişletildiği zaman --> <div class="alert alert-danger"></div> input.form-control <!-- Genişletildiği zaman --> <input type="text" class="form-control">3 - HTML ağacı oluşturma
ul>li <!-- Genişletildiği zaman --> <ul> <li></li> </ul> ul.list-group>li.list-group-item <!-- Genişletildiği zaman --> <ul class="list-group"> <li class="list-group-item"></li> </ul>4 - Aynı elementten birden çok oluşturulması:
ul.list-group>li.list-group-item*3 <!-- Genişletildiği zaman --> <ul class="list-group"> <li class="list-group-item"></li> <li class="list-group-item"></li> <li class="list-group-item"></li> </ul> table>tbody>tr>td*4 <!-- Genişletildiği zaman --> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>5 - Aynı ağaç seviyesinde birden çok dal oluşturma
.row>.col-md-4+.col-md-8 <!-- Genişletildiği zaman --> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> .form-group>label+input.form-control <!-- Genişletildiği zaman --> <div class="form-group"> <label></label> <input type="text" class="form-control"> </div>6 - Gruplandırma
Gruplandırılacak kısım parantezler arasına alınır
table>(thead>tr>th)+(tbody>tr>td) <!-- Genişletildiği zaman --> <table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <!-- Biraz karıştırılalım --> table.table.table-bordered.table-striped.table-responsive>(thead>tr>th*5)+(tbody>tr>td*5) <!-- Genişletildiği zaman --> <table class="table table-bordered table-striped table-responsive"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>7 - ID belirtme
input#kullaniciadi <!-- Genişletildiği zaman --> <input type="text" id="kullaniciadi">8 - Ek özellikleri belirtme
Özellikle input ve button elementlerinde işe yaramakta. Köşeli parantez kullanıyoruz.
input[type="number"] <!-- Genişletildiği zaman --> <input type="number"> input[type="number"][name="kullaniciadi"] <!-- Genişletildiği zaman --> <input type="number" name="kullaniciadi"> <!-- butonlarda --> button.btn.btn-success[type="submit"]>i.mdi.mdi-content-save <!-- Genişletildiği zaman --> <button class="btn btn-success" type="submit"><i class="mdi mdi-content-save"></i></button>Emmet sadece HTML için değil, CSS içinde kullanılabilir. Cheatsheet'e bakarak diğer kullanımları da inceleyebilirsiniz.
Umarım bu bilgiler size yardımcı olur.
Kolay gelsin.
