Kod Optimizasyonu için 10 CSS ve JavaScript Bağlantı Araçları
Astarlama araçları geliştiricilerin kaliteli, optimize kod yaz. Astar, kaynak koddaki hataları arayan ve olası hataları işaret eden bir kod denetleme işlemidir. Çoğu bağlantı noktası statik kod analizi tekniğini kullanır; kod gerçekten yürütülmeden kontrol edilir.
Kod yazarken, dosyayı kaydettiğinizde, değişiklikleri yaptığınızda veya kodun üretime girmesinden önce olduğu gibi farklı durumlarda kullanamazsınız. İş akışınız nasıl olursa olsun, önemli olan düzenli aralıklarla, Gelecekte sizi birçok baş ağrısından kurtarabilir..
Linters sadece hata önleme araçları değil, aynı zamanda hata ayıklama sırasında da etkili bir şekilde kullanılabilir. yakalamak zor hataları bulmak için aksi takdirde. Bu yazıda, kodunuzun kalitesini artırmak için CSS ve JavaScript dosyalarınızı dizmek için kullanabileceğiniz 10 güçlü araç kullanacağız..
1. CSSLint
CSSLint kuşkusuz "duygularını incitmeyi" amaçlıyor, ancak buna karşılık "kodunu daha iyi hale getiriyor". CSSLint şu anda CSS linting pazarına liderlik ediyor. JavaScript'te yazılmıştır, açık kaynak kodlu ve tonlarca yapılandırılabilir seçenekle geliyor.
CSSLint yapmanızı sağlar ne tür hatalar ve uyarılar seçin (uyumluluk, performans, çoğaltma, vb.) test etmek istiyorsun, ve tercih ettiğiniz kurallara göre CSS sözdiziminizi doğrular.
Yalnızca tarayıcıda çalışmaz, aynı zamanda bir komut satırı arayüzüne sahiptir ve kendi yapı sisteminize de entegre edebilirsiniz..
2. SublimeLinter CSSLint
CSSLint o kadar etkili bir CSS linter ki, ölçen bir rakip bulmak zor. Muhtemelen SublimeLinter astar çerçevesinin CSS astar eklentisini bunun üzerine kurmasının nedeni budur. SublimeLinter bir SublimeText eklentisi kullanıcılara, SublimeText editolarının içindeki kodlarını (CSS, PHP, Python, Java, Ruby, vb.) dizmek için bir yol sağlar.r.
SublimeLinter CSSLint eklentisinin kendisini yüklemeden önce, CSSLint'i bir Node.js modülü olarak kurmanız gerekir. Bu kullanışlı araçla ilgili en güzel şey, siz ayarları yalnızca bir kez yapılandırmanız gerekir, veya varsayılan ayarlardan memnunsanız bile yapmanız gerekmiyorsa, SublimeText düzenleyicinizdeki ilgili uyarıları ve bildirimleri daha fazla uğraşmadan alabilirsiniz..
3. StyleLint
StyleLint, geliştiricilerin CSS, SCSS veya PostCSS'nin ayrıştırabileceği diğer sözdizimlerindeki hataları önlemesini sağlar. StyleLint yüzlerce kural için test yapar ve hangilerini açmak istediğinizi seçin (bkz. örnek bir yapılandırma).
Kendi yapılandırmanızı oluşturmak istemiyorsanız, yaklaşık 60 StyleLint kuralını içeren önceden yazılmış, standart bir yapılandırmayı da seçebilirsiniz. StyleLint oldukça esnek bir araçtır, ekstra eklentilerle genişletilebilir ve 3 farklı formda kullanılabilir: komut satırı aracı olarak, Node.js modülü olarak veya PostCSS eklentisi olarak.
4. W3C CSS Doğrulayıcı
Her ne kadar W3C'nin CSS Validator'ı genellikle bir astarlama aracı olarak düşünülmese de, geliştiricilere CSS kaynak kodlarını W3C'nin resmi standartlarına göre kontrol etmek için harika bir fırsat sunar. W3C, onaylayıcılarını, C dili için Lint program denetleyicisine benzer bir araç sağlama niyetiyle oluşturdu..
İlk başta, daha sonra CSS onaylayıcısı tarafından takip edilen HTML biçimlendirme doğrulayıcısını yarattılar. W3C'nin CSS doğrulayıcısı, CSSLint kadar seçeneğe sahip değildir, ancak ayrıntılı, anlaşılması kolay hata mesajları ve bildirimler döndürür.
Ekstra bir özellik olarak, kodunuzu W3C'nin mobil web çağında kötü bir şey olmayan en son mobil web standartlarına göre de kontrol edebilirsiniz..
5. Kirli İşaretleme
Kirli İşaretleme, HTML, CSS ve JavaScript kodunuzu temizler, biçimlendirir ve doğrular. Basit bir tasarım istiyorsanız ve hızlı bir çözüm istiyorsanız mükemmel bir seçim olabilir. Kirli İşaretleme hata mesajlarını ve bildirimleri gerçek zamanlı olarak atar sen iken kodunuzu düzenleyicinin içine yazın veya değiştirin.
Vurduğunda “Temiz” düğme sözdizimi hatalarını bir seferde düzeltir, formatı düzenler ancak uyarıları bozulmadan bırakır onları ancak istediğiniz şekilde çözmenize izin veriyor. Hangi kuralları test etmek istediğinizi seçemezsiniz, ancak üç dosya türünün tümü biçime karar vermenizi sağlayan birkaç ayar temizlenmiş çıktının.
6. JSLint
JSLint ilk olarak 2002 yılında Douglas Crockford tarafından piyasaya sürüldü ve o zamandan beri ivme kaybetmedi, bu nedenle güvenli ve güvenilir bir JavaScript linting aracı olduğunu kabul edebilirsiniz..
JSLint, JavaScript kaynak kodunu ve JSON metnini işleyebilir ve bir JS en iyi uygulamalarını takip eden hazır yapılandırma Crockford JavaScript başlıklı kitabında yazdı: İyi Parçalar.
JSLint'in seçebileceğiniz birkaç seçeneği var, ancak siz kendi özel kurallarınızı ekleyemez veya özelliklerin çoğunu devre dışı bırakamazsınız.. JSLint, en yeni ECMAScript 6 standartlarını eklemeye başladı; ES6 uygulamasının şu anki aşamasını buradan kontrol edebilirsiniz..
7. JSHint
JSHint, çok popüler bir JSLint çatalıdır ve Facebook, Twitter ve Medium gibi büyük teknoloji şirketleri tarafından kullanılmaktadır.
JSHint, çaba göstermeye başlayan ve toplum odaklı bir projedir. JSLint'in daha yapılandırılabilir ve daha az fikirli bir sürümünü oluşturun. JSHint, geliştiricilerin linting seçeneklerinden herhangi birini yapılandırmalarına ve özelleştirilmiş yapılandırmayı ayrı bir dosyaya yerleştirme olanağı sağlar, bu da aracı kolayca yeniden kullanılabilir kılan bir seçenek ve daha büyük projeler için uygun bir seçenek.
JSHint'i sadece vanilya JavaScript'i kullanmak için kullanmakla kalmaz, aynı zamanda jQuery, Mootools, Mocha ve Node.js gibi birçok popüler JS kütüphanesi için kullanıma hazır desteği sunar..
8. ESLint
ESLint, JavaScript linting manzaradaki en son büyük şeydir. Popülerliği, oldukça esnek doğasından kaynaklanmaktadır. Sadece sofistike sıralama kurallarının tonunu kişiselleştirmekle kalmaz, aynı zamanda tüm büyük kod editörleriyle de entegre edebilirsiniz, aynı zamanda kolayca işlevselliğini genişletmek farklı eklentiler ekleyerek.
Ayrıştırıcı seçeneklerini belirleyerek, ayrıca hangi JS dili standardını desteklemek istediğinizi seçin Astarlama işlemi sırasında, komut dosyalarınızı yalnızca varsayılan ECMAScript 5 sözdizimine karşı değil aynı zamanda ECMAScript 6, ECMAScript 7 ve JSX ile de kontrol edebilirsiniz..
9. JSCS
JSCS veya JavaScript Kod Stili, kod biçimlendirme kurallarını kontrol eden JavaScript için takılabilir bir kod stili linterudur.
JSCS’in amacı, programatik olarak belirli bir kodlama stili kılavuzuna uyumu zorunlu kılmak. JSCS hataları ve hataları kontrol etmese de, Google, AirBnB ve AngularJS gibi teknoloji endüstrisindeki birçok büyük oyuncu tarafından hala geliştiricilerin yüksek düzeyde okunaklı, tutarlı bir kod tabanı tutmasına yardımcı olur..
JSCS, biçimlendirme hatalarınızı otomatik olarak düzelttiği için gerçek zamanlı bir zaman tasarrufu sağlar; Google, Grunt veya Wikimedia kodlama stili ön ayarları gibi daha büyük projelere ait, kendi projelerinizde kolayca kullanabileceğiniz birçok farklı ön ayarı vardır, ancak kendi özel yapılandırmanızı da oluşturabilirsiniz..
10. StandardJS
StandardJS veya JavaScript Standard Style, JSCS gibi bir kod tarzıdır, ancak sadeliği ve anlaşılırlığı bakımından farklıdır. StandardJS mükemmel bir seçim olabilir, yapılandırma ile zaman geçirmek istemiyorsanız, sadece kutudan çıkan etkili bir araç istiyorum.
StandardJS bir avuç önceden yazılmış formatlama kuralına uymaktadır ve temel değeri kodlama iş akışınızı rahatsız etmeden tutmaktır, bu nedenle kabul etmediğiniz kuralları değiştiremezsiniz. Özel bir konfigürasyona sahip olmak istemiyorsanız ve sadece istediğiniz JavaScript dosyalarınızda tutarlı bir kod stili uygulayın.
