CSS Güzelleştirici: CSS, LESS, SCSS Biçimlendirme
CSS Güzelleştirici, VS Code'un da kullandığı biçimlendirme motoru Prettier ile dağınık veya küçültülmüş CSS'i okunabilir, tutarlı biçimlendirilmiş koda dönüştürür. CSS, LESS ve SCSS sözdizimini destekler; 2 boşluk, 4 boşluk veya sekme girintisi ile yapılandırılabilir satır genişliği ayarları sunar. Girdinizi yapıştırın, biçimlendirme seçeneklerini belirleyin ve sonucu kopyalayın; işlem yükleme olmadan tarayıcınızda kalır.
CSS Güzelleştirici, VS Code'un da kullandığı biçimlendirme motoru Prettier ile CSS, LESS ve SCSS'i biçimlendirir. Dağınık veya küçültülmüş stil sayfası kodunu daha okunabilir bir düzene dönüştürerek sonucun incelenmesini, gözden geçirilmesini ve paylaşılmasını kolaylaştırır. Kodunuzu tarayıcıya yapıştırın, biçimlendirme seçeneklerini belirleyin ve hazır olduğunda çıktıyı kopyalayın.
Biçimlendirici, 2 boşluk, 4 boşluk veya sekme girintisinin yanı sıra yapılandırılabilir bir satır genişliğini destekler. Bu ayarlar girintinin nasıl görüneceğini ve biçimlendirilmiş satırların ne kadar uzun olabileceğini denetler. Araç girdiyi biçimlendirmeye odaklanır; CSS'ten LESS veya SCSS'e ya da tersi yönde bir dönüşüm içermez.
CSS standart stil sayfası dilidir; LESS ve SCSS ise ek yazım kuralları içeren CSS ile ilişkili stil sayfası sözdizimleridir. CSS Güzelleştirici, desteklenen bu sözdizimlerinden birindeki kodun boşlukları elle ayarlamadan daha tutarlı ve okunabilir olmasını istediğinizde kullanışlıdır. Bu, bir stil sayfasını incelemeyi, karşılaştırmayı veya bir rapora eklemeyi kolaylaştırabilir.
CSS Güzelleştirici tamamen tarayıcınızda çalışır. Girdiniz cihazınızda işlenir; bir sunucuya yüklenmez veya gönderilmez; sayfa yüklendikten sonra araç çevrimdışı da çalışabilir. Bu, stil sayfası kodunu kendi cihazında tutarak hızlıca biçimlendirmek isteyen geliştiriciler ve DevOps mühendisleri için pratik bir seçenektir.
Adım 1: CSS, LESS veya SCSS kodunuzu girdiye yapıştırın. Okunabilir bir stil sayfası veya küçültülmüş bir parçacık kullanabilirsiniz.
Adım 2: Bir girinti stili seçin: 2 boşluk, 4 boşluk veya sekmeler. Biçimlendirilmiş satırların ne kadar uzun olabileceğini denetlemek için satır genişliğini ayarlayın.
Adım 3: Biçimlendirilmiş çıktıyı inceleyin. Girdi düzgün ayrıştırılmazsa, bildirilen satırı kullanarak nerede dikkat gerektiğini bulun.
Adım 4: Güzelleştirilmiş kodu kopyalayın ve projenizde, incelemenizde veya belgelerinizde kullanın.
Kullanım senaryosu: Okunamayan, makine üretimi bir CSS dosyasını commit etmeden önce incelemeyi kolaylaştırın.
Kullanım senaryosu: Sizin yazmadığınız bir CSS belgesini projenizin izlediği biçimlendirme stiline göre kontrol edin.
Kullanım senaryosu: Kod farklarının boşluk gürültüsü yerine anlamlı değişiklikleri göstermesi için CSS, LESS veya SCSS'i tutarlı biçimlendirin.
Kullanım senaryosu: Bir hata raporuna veya kod incelemesine eklemeden önce bir stil sayfası parçacığını güzelleştirin.
Kullanım senaryosu: Bir stil sayfasının düzgün ayrıştırılıp ayrıştırılmadığını kontrol edin ve biçimlendirmenin sorunla karşılaştığı satırı bulun.
Kullanım senaryosu: Stil sayfalarının ekibinizce daha kolay taranması için girinti ve satır genişliğini ayarlayın.
Kullanım senaryosu: Hata ayıklama sırasında kurallarını incelemeniz gerektiğinde küçültülmüş stil sayfası kodunu yeniden biçimlendirin.