Emmet’in 14 işleviyle HTML kodunuza güç katın
Emmet her geliştiricinin her zaman istediği zengin bir işlevler hazinesine sahiptir. Tab tuşuna veya bazı editörlerde Ctrl+E tuşlarına basarak aktifleştirilen ‘Kısaltmayı Genişletme’ ana işlevini zaten inceledik ama kodlama deneyiminizi zenginleştirmeye yönelik daha birçok harika özellik vardır. Web tasarım alanında özellikle de web yazılım konusunda geliştirmeler yapan arkadaşlarımız için bu yazının / incelemenin faydalı olabileceğini düşünüyoruz.
İlave özellikler
Bu makalede belirtilen tuş karşılıklarının Emmet kaynak kodundaki varsayılanlar olduğu ve bunların kod editörleri arasında farklılık gösterebileceğine dikkat edilmelidir.
Tag Çiftlerini Eşleştirme
Bu özellik, dışa doğru (Ctrl+D) veya içe doğru (Shift+Ctrl+D) çalıştırılabilir ve ilgili yönde HTML içinde eşleşen tag çiftini seçecektir. İç içe HTML taglarının büyük kısımları ile çalışırken veya kötü şekilde biçimlendirilmiş HTML kodları ile çalışma talihsizliğine uğradığınızda (hepimizin başına gelmiştir!) bu gerçekten faydalı bir özelliktir.
Eşleşen Tag Çiftine Gitme
Tag Çifti Eşleştir işlevine çok benzer olarak bu işlev Ctrl+T tuşları kullanıldığında bir HTML elemanının başlangıç ve bitiş tagları arasında hareket edecektir.
Kısaltmayla Sarma
Emmet’in sunduğu en iyi araçlardan biri olarak bu işlev seçtiğiniz HTML kodunu bir kısaltmayla saracaktır. Yapmanız gereken yer işaretini HTML kodunuz içine yerleştirmek veya bir bölüm seçmek ve ardından Shift+Ctrl+A tuşlarına basmaktır. Sizden bir kısaltma girmeniz istenecektir ve bunun genişletilmiş bir versiyonu seçiminizi saracaktır.
Nokta Düzenle / Öğe Seç’e Gitme
Bu iki işlev çok benzerdir ve kodunuz içindeki temel noktalar arasında hareket etmenize izin verir. Bu işlev fareye dokunmadan birden çok elemanı hızla düzenlemenize imkan verecektir.
Yorum Sarma/Kaldırma
Bu işlev Ctrl+/ tuşlarına basıldığında HTML kodunun seçilen kısmını yorum taglarıyla sarar veya sarımı kaldırır
Tagları Ayırma ya da Birleştirme
Ctrl+J kullanılarak taglar ayrılabilir veya birleştirilebilir.
HTML Tag Kaldırma
HTML kodu yeniden yapılandırılırken muhafaza etmek istediğiniz markup elemanlarını içeren tagları kaldırmanız kaçınılmazdır. Başlangıç ve bitiş taglarını ayrı ayrı kaldırmaktan kaçınmak için yer işaretini bir tag üzerine getirebilir ve Ctrl+K tuşlarına basabilirsiniz.
Satırları Birleştirme
Emmet, satırlar seçmeniz durumunda bu satırları sizin için birleştirme ve onları tek bir dizgiye değiştirme konusunda oldukça akıllıdır. Ancak, hiçbir şey seçilmediyse ona en yakın olan HTML tagını eşleştirecektir. Bunun için tek yapmanız gereken Ctrl+Shift+M tuşlarına basmaktır.
Resim Ölçüsü Güncelleme
HTML kodunuz içinde resimler tanımlarken, src özelliğini ayarladığınızda Shift+Ctrl+U tuşlarına basarak doğru genişlik ve yükseklik değerini ayarlayabilirsiniz. Artık resim boyutlarını hatırlamanız gerekmemektedir.
Sayıların Kullanımı
Emmetin, ağırlıklı olarak, CSS içinde sayısal değerler tanımlanırken sahip olduğu iki mükemmel özelliği vardır. Matematiksel İfadeyi Hesapla, Shift+Ctrl+Y tuşlarına basıldığında bir ifadeyi sonucuna genişletecektir. Örneğin, bu işlev kullanıldığında ‘2*3*3’ işleminin sonucu ‘9’ olarak genişletilecektir.
Diğer bir harika sayısal araç, genellikle tarayıcı geliştirici araçlarında kullanılan arttırma aracıdır. Emmet, sırasıyla Ctrl+Up/Down ve Alt+Up/Down kullanılarak tamsayı veya hane şeklinde arttırma veya azaltma yapmanıza izin verir.
CSS Değerini Yansıtma
Bu değer yer işaretinin altında olacak ve ardından tüm satıcı tarafından sabitlenen varyantlara kopyalanacaktır. Artık, değerleri manuel olarak girmeniz gerekmez. Tüm yapmanız gereken birini değiştirmek ve diğer önceden sabitlenmiş varyantlara sizin için otomatik şekilde uygulanması için Ctrl+B tuşlarına basmaktır.
Resim Şifreleme / Şifre Çözme
Kodunuz içindeki HTTP taleplerini azaltmanın yollarını arıyorsanız resim base64 şifreleme araçlarını kullanış olabilirsiniz. Emmet bu işlevselliğe yerleşik olarak sahiptir. Yer işaretini resim url yoluna getirin ve Shift+Ctrl+I tuşlarına basın. Resim yolunuz, online araçlara gerek olmadan şifrelenmiş bir dizgi aktarılacaktır.
