HTML ve CSS kodlarınızı yazma yönteminizi basitleştirerek kodlamanızı ultra hızlı yapın
Artık, HTML ve CSS kodlama hızınız büyük ölçüde arttı (ve bu durum geliştirme veriminizi gerçekten yükseltecektir) ama Emmet’in yetenekleri burada bitmez. Web tasarım geliştirmenin zaman alabilen bir yönü kodunuzun düzenlenmesidir.
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.
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.
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.
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.
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.
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.
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
Ctrl+J kullanılarak taglar ayrılabilir veya birleştirilebilir.
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.
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.
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.
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.
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.
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.