Visual Studio Code'da (VSCode) kodu nasıl biçimlendirirsiniz?

Visual Studio Kod düzenleyicisinde kod biçimlendirme veya "güzelleştirme" için Visual Studio'da Windows'ta Ctrl+ K+ Fve Ctrl+ K+ eşdeğeri nedir D?

Kod biçimlendirmesi, Visual Studio Code'da aşağıdaki kısayollarla kullanılabilir:

• Windows Shift+ Alt+ 'daF
• Mac Shift+ Option+ 'daF
• Linux Ctrl+ Shift+ üzerindeI

Alternatif olarak, kısayolu ve diğer kısayolları da, editörde Ctrl+ Shift+ P(veya Mac'te Command+ Shift+ P) ile sağlanan 'Komut Paleti' aracılığıyla ve ardından biçim belgesini arayarak bulabilirsiniz .

Kod Biçimlendirme Kısayolu:

Windows'ta Visual Studio Code - Shift+ Alt+F

MacOS'ta Visual Studio Code - Shift+ Option+F

Ubuntu'da Visual Studio Code - Ctrl+ Shift+I

Gerekirse bir tercih ayarını kullanarak da bu kısayolu özelleştirebilirsiniz.

Dosyayı Kaydederken Kod Biçimlendirme:

Visual Studio Code, kullanıcının varsayılan ayarları özelleştirmesini sağlar.

İçeriğinizi kaydederken otomatik olarak biçimlendirmek isterseniz, Visual Studio Code'un çalışma alanı ayarlarına aşağıdaki kod snippet'ini ekleyin.

Menü Dosyası → Tercihler → Çalışma Alanı Ayarları

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Not: Artık TypeScript dosyalarını otomatik olarak biçimlendirebilirsiniz. Güncellememi kontrol et.

Dosya → Tercihler → Klavye kısayolları menüsüne tuş bağlama ekleyebilirsiniz .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Veya Visual Studio gibi:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. Dosyayı sağ tıklayın
2. Menüden Belgeyi Biçimlendir'i seçin:
   • Pencereler: Alt Shift F
   • Linux: Alt Shift I
   • Mac os işletim sistemi: ⌥ ⇧ F

Sağ tuş kombinasyonu Shift+ Alt+ F.

Fedora için

1. File-> Preferences-> öğesine tıklayın Keyboard shortcuts.
2. Altında Default Keyboard Shortcuts( Ctrl+ F) öğesini arayın editor.action.format.

Benimki oku "key": "ctrl+shift+i"

Siz de değiştirebilirsiniz. Nasıl yapılacağı ... ya da yukarı kaydırmak için biraz tembel hissediyorsanız bu cevaba bakınız :

"Tercihler-> Klavye kısayolları" na tuş bağlama ekleyebilirsiniz

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Veya Visual Studio gibi:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Lütfen dikkat: cmdanahtar yalnızca Mac'ler içindir. Windows ve Fedora (Windows klavye) içinCtrl

DÜZENLE :

Visual Code sürümüne göre 1.28.2bu buldum.

editor.action.formatartık yok. Artık almıştır editor.action.formatDocumentve editor.action.formatSelection.

Tip editor.action.formatvarolan kısayolları görüntülemek için arama kutusuna.

Tuş kombinasyonlarını değiştirmek için şu adımları izleyin:

1. Click editor.action.formatDocumentveyaeditor.action.formatSelection
2. Sol tarafta kalem benzeri bir simge görünür - simgesini tıklayın.
3. Bir pop-up görünür. İstediğiniz tuş kombinasyonuna basın ve enter tuşuna basın.

Linux'ta Ctrl+ Shift+ I.

Windows'da Alt+ Shift+ F. HTML / CSS / JavaScript ve Visual Studio Code 1.18.0 ile test edilmiştir.

Diğer diller için belirli bir dil paketi yüklemeniz gerekebilir.

Visual Studio Code 1.6.1 , ilgili yüklü biçimlendirici uzantılarını otomatik olarak toplayacak ve belgenin tamamını her kayıtta biçimlendirecek olan " Biçimde Kaydet " i destekler .

"Kaydedildiğinde Biçimlendir" i etkinleştirerek

"editor.formatOnSave": true

Kullanılabilir klavye kısayolları da vardır (Visual Studio Code 1.7 ve üstü):

Tüm dokümanı biçimlendir : Shift+ Alt+F

Yalnızca Biçim Seçimi : Ctrl+ K, Ctrl+F

Ubuntu'da Ctrl+ Shift+ I.

Metne sağ tıklayın ve "Kodu biçimlendir" i seçin.

Visual Studio Code js-beautifydahili olarak kullanır , ancak kullanmak istediğiniz stili değiştirme yeteneğinden yoksundur. "Güzelleştirme" uzantısı ayarları eklemenizi sağlar.

Menü Dosyası → Tercihler → Ayarlar

"editor.formatOnType": true

Noktalı virgül girdiğinizde biçimlendirilir.

Alternatif olarak, kullanabilirsiniz "editor.formatOnSave": true.

Shift+ Alt+ F, 1.17.2 ve üzeri sürümlerde işe yarıyor.

Herhangi bir nedenle Alt+ Shift+ FMac Visual Studio Code 1.3.1'de benim için çalışmadı ve aslında "Belgeyi Biçimlendir" komutu hiç çalışmıyor. Ancak Formatter komutu çok iyi çalıştı.

Böylece Command+ Shift+ kullanabilir Pve Formatter yazabilir veya Dosya → Tercihler → Klavye Kısayolları → Command+ K Command+ menüsünde kendi kısayolunuzu oluşturabilir ve Sardından Formatter yazıp kısayolunuzu ekleyebilirsiniz.

Bir örneğe bakın:

Visual Studio'da kod biçimlendirme.

Windows 8'de biçimlendirmeye çalıştım.

Aşağıdaki ekran görüntülerini takip etmeniz yeterlidir.

1. Üst menü çubuğunda Görüntüle'ye tıklayın ve ardından Komut Paleti'ne tıklayın.

   

2. Sonra Biçim türüne ihtiyacımız olan bir metin kutusu görünecektir

   Shift+ Alt+F

   

Visual Studio Kodumuzda, Shift+ Alt+ Fne yapıyor Ctrl+ K+ DVisual Studio yapıyor.

Ben yüklü kadar C # biçim kısayol benim için işe yaramadı Mono Mac OS X için DNVM ve DNX .

Mono'yu yüklemeden önce otomatik format kısayolu ( Shift+ Alt+ F) yalnızca .jsondosyalar için çalıştı .

Mac'te Shift+ Alt+F benim için çalışıyor.

Menüdeki tuş bağlantılarını her zaman kontrol edebilirsiniz:

Menü Dosyası → Tercihler → Klavye Kısayolları ve 'format' anahtar kelimesine göre filtreleyin.

Visual Studio Code'un varsayılan davranışını değiştirmek için bir uzantı gerekiyorken, çalışma alanındaki veya kullanıcı düzeyindeki varsayılan davranışı geçersiz kılabilirsiniz. Desteklenen dillerin çoğu için çalışır (HTML, JavaScript ve C # garanti edebilirim).

Çalışma alanı seviyesi

Yararları

• Uzatma gerektirmez
• Takımlar arasında paylaşılabilir

Çıktıları

• .vscode/settings.json proje kök klasöründe oluşturulur

Nasıl?

1. Git: Menü Dosyası → Tercihler → Çalışma Alanı Ayarları

2. Ekleyin ve "editor.formatOnType": truesettings.json dosyasına kaydedin (.vscode / settings.json dosyası oluşturarak üzerinde çalıştığınız proje için varsayılan davranışı geçersiz kılar).

   

Kullanıcı ortamı seviyesi

Yararları

• Uzatma gerektirmez
• Hepsine hükmedecek kişisel gelişim ortamı (ayarlar :))

Çıktıları

• Kullanıcı settings.jsondeğiştirildi (aşağıdaki işletim sistemine göre konuma bakın)

Nasıl?

1. Dosya → Tercihler → Kullanıcı Ayarları menüsüne gidin.

2. Ekle veya değerini değiştirmek "editor.formatOnType": falseiçin "editor.formatOnType": truekullanıcı settings.json içinde

Visual Studio Code kullanıcınızın settings.jsonkonumu:

Platformunuza bağlı olarak ayarlar dosyası konumları, kullanıcı ayarları dosyası burada bulunur:

• Pencereler: %APPDATA%\Code\User\settings.json
• Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.jsonÇalışma alanı ayar dosyası projenizdeki .vscode klasörünün altında bulunur.

Daha fazla ayrıntıyı burada bulabilirsiniz .

Varsayılan olarak bu anahtar benim için HTML, CSS ve JavaScript belgelerinde çalışmadı.

Aramadan sonra , 133.796 yüklemeyle popüler eklenti JS-CSS-HTML Formatter'ı buldum .

Kurulumdan sonra sadece pencereleri yeniden yükleyin ve Ctrl+ Shift+ Fdüğmesine basın ve işe yaradı!

Metni seçin, seçimi sağ tıklayın ve "komut paleti" seçeneğini seçin:

Yeni bir pencere açılır. "Format" ı arayın ve gereksinime göre formatlama olan seçeneği seçin.

Microsoft tarafından Visual Studio Keymap'i kurmanız yeterlidir . Sorun çözüldü. : p

Mac'te ⌘+ Kve ardından ⌘+ kullanın F.

Hangi JavaScript dosyalarının biçimlendirileceğini özelleştirmek isteyenler için mülk üzerindeki herhangi bir uzantıyı kullanabilirsiniz JSfiles. Aynısı HTML için de geçerlidir.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Bu, TypeScript için kaydetmede güzelleştirmeyi etkinleştirir ve HTML seçeneğine XML olarak ekleyebilirsiniz.

Biçim belgesi stilini özelleştirmek istiyorsanız, Uzantıyı güzelleştir seçeneğini kullanmalısınız .

Bu ekran görüntüsüne bakın:

İlk olarak uygun eklentiyi (XML, C # vb.) Yüklemeniz gerekir.

İlgili eklentiyi yükleyip dosyayı uygun bir uzantıyla kaydetmedikçe biçimlendirme kullanılamaz.

Visual Studio Code (Ubuntu) içinde kullandığım en basit yolu:

Fare ile biçimlendirmek istediğiniz metni seçin.

Sağ tıklayın ve "Seçimi formatla " yı seçin .

Bu değil. Bunu kullan:

Menü Dosyası → Tercihler → Çalışma Alanı Ayarları , "editor.formatOnType" : true

Uzantı kullan ...

Bir dosyayı kaydettiğinizde kodun otomatik olarak biçimlendirilmesini sağlar.

Visual Studio Code ve Quick Open'ı ( Ctrl+ P) başlatın , aşağıdaki komutu yapıştırın ve tuşuna basın Enter.

kaydedildiğinde dahili kurulum formatı

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Linux'ta Visual Studio Kodu:

Ctrl+ [girintisiz kod bloğuna ve

Ctrl+ ]kitlesel girinti yapmak