Visual studio kodu CSS girintisi ve biçimlendirme

Ben etkinleştirmek otomatik bir yolu kısa yolu ile görsel stüdyo kodunda bir CSS dosyası girinti olup olmadığını bilmek istiyorum ALT+ SHIFT+ F?

JavaScript ile iyi çalışıyor ama tuhaf bir şekilde CSS ile çalışmıyor.

Evet, vscode-css-formatter uzantısını yüklemeyi deneyin .
Yalnızca .cssdosyaları biçimlendirme işlevselliği ekler ve kısayol aynı Alt+ Shift+ olarak kalır F.

Css / sass / scss / less'ı güzelleştirin

bunu çalıştırmak için

giriş alt+shift+f

veya

F1veya tuşuna basın ctrl+shift+p ve sonra güzelleştirme girin ..

bir başkası - JS-CSS-HTML Formatter

Sanırım her iki uzantı da js-beautify'ı dahili olarak kullanıyor

En iyi seçeneği bulmak bir saatini boşa harcadı.

Kolayca okumak ve bunlardan birini seçmek için sadece bir araya getirin.

Notlar:

• CSS ve SASS / SCSS / LESS hepsi birbiriyle ilişkilidir
• HTML, Javascript, Typescript, JSON - VS kodu zaten biçimlendiriliyor
• CSS ve ilgili - VS kodu edilir değil bugün itibariyle biçimlendirme

Seçenekler:

• Css / sass / scss / less biçimlendirmek için:
  • Daha güzel
    • Tüm css ile ilgili desteklenir ve diğerleri değil, bunu seçiyorum, harika çalışıyor.
• JavaScript / TypeScript / CSS'yi biçimlendirmek için:
  • Css / sass / scss / less'ı güzelleştirin
    • ancak, zaten JS, TS VS kodu tarafından destekleniyor
• JS, CSS, HTML, JSON dosyasını biçimlendirmek için (js-beautify'ı sarar)
  • JS-CSS-HTML Biçimlendiricisi
    • ancak zaten JS, HTML, JSON VS kodu tarafından destekleniyor
• CSS'yi formatlamak için
  • CSS Formatlayıcı
    • ancak yalnızca CSS destekleniyor, tüm ilgili değil - 6 aydan fazla sürdürülmüyor

Biçimlendirmek için:

Prettier'ı yükledikten sonra VS Code'da Alt+ Shift+ tuşlarına basın F.

Görsel stüdyo kodunda yerel bootstrap.min.css'yi açtıktan sonra girintisiz görünüyordu. Komutan ALT + Shift + F'yi denedim ama boşuna.

Sonra yüklendi

CSS Formatter uzantısı.

Yeniden yükledim ve ALT + Shift + F CSS dosyamı çekicilikle girintiledi.

Bingo !!!

Galeride seçilebilecek birkaç tane var, ancak kullandığım, ayarların geri kalanına hala göze batmayan önemli düzeyde yapılandırılabilirlik sunan , Michele Melluso tarafından Beautify . Hem CSS hem de SCSS üzerinde çalışır ve kodun geri kalanını 2 boşlukta tutarak 3 boşluk girmenize izin verir, bu hoş bir şey.

Siz de isterseniz bunu GitHub'dan alıp kendiniz uyarlayabilirsiniz.

Prettier'i çok genişletilebilir olduğu için kullanmanızı tavsiye ederim, ancak yine de kutunun dışında mükemmel çalışıyor:

1. CMD + Shift + P -> Format Document

veya

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Dosyalar menüsüne gidin -> Tercih -> Uzantılar Sonra CSS Formatlayıcı yazın yüklenmesini bekleyin ve kur'a tıklayın

HookyQR.beautify uzantısını yükleyin. Visual Studio Code'da javascript, JSON, CSS, Sass ve HTML'nizi güzelleştirecek. Bu amaç için en çok kullanılan uzantılardır

Güzelleştirme ( Github ) ve Prettier ( Github ), Visual Studio Code'da web geliştirme için en iyi eklentidir.

Kodu Visual Studio'da istediğiniz zaman biçimlendirmek için: (Ctrl + K) & (Ctrl + F) tuşlarına basın

Otomatik biçimlendirme kuralları şurada bulunabilir ve değiştirilebilir: Araçlar / Seçenekler -> (Sol kenar çubuğu): Metin Düzenleyici / CSS (veya değiştirmek istediğiniz başka bir dil)

CSS dili için seçenekler ne yazık ki çok sınırlıdır. Ayrıca şunlarda da bazı değişiklikler yapabilirsiniz: ... / Metin Düzenleyici / Tüm Diller