Visual Studio Kodunu Özelleştirme

Visual Studio Code, Microsoft'un yeni açık kaynak kod editörü, geliştiricilere önemli ölçüde kaynak kod düzenleme sürecini kolaylaştırmak. Ayrıca, Visual Studio Code, kullanıcıların izin verdiği şekilde onunla çalıştıklarında sıkılmamalarını sağlar. görünümünün birkaç bölümünü kişiselleştirin, renkler, fontlar, boşluklar ve metin formatlama gibi pamuklanan ve doğrulama kuralları.

Bu yazıda, ilk başta bir göz atacağız Visual Studio Code çalışma alanının görünüşünü değiştirme, daha sonra iki ayar yardımıyla varsayılan ayarları nasıl özelleştireceğinizi göstereceğim. JSON-biçimlendirilmiş yapılandırma dosyaları.

VS Kodunda Renk Temasını Ayarlama

Visual Studio Kodu özel bir renk teması ayarla editörün için.

Önceden hazırlanmış bir temayı kullanıma koymak için, simgesine tıklayın. Dosya> Tercihler> Renk Teması Üst menü çubuğunda menü. Vurduğunda “Girmek”, Komut Paleti açılır ve aralarından seçim yapabileceğiniz temaların açılır bir listesini görüntüler..

Tuşuna basarsanız aynı etkiyi elde edebilirsiniz. F1 Komut Paletini açmak için Tercihler: Renkli Tema giriş alanına komut.

Açılır listedeki seçenekler arasında geçiş yaparken, çalışma alanının görünümü gerçek zamanlı olarak değişir, Böylece hangi temanın ihtiyaçlarınızı en iyi şekilde karşıladığını görebilirsiniz.

Seçtim “Yüksek kontrast” renk teması, gözlerim en iyi değil. İşte bakışım nasıl görünüyor?.

VS Code Marketplace'ten Tema Kurma

VS Code'un varsayılan olarak sunduğu renk temalarından herhangi birini beğenmezseniz, VS Code Marketplace'ten başkalarını da indirebilirsiniz..

Burada, Marketin şu an sahip olduğu temalara göz atabilirsiniz. Marketplace’ten bir tema yüklemek istiyorsanız, F1 Komut Paletini açmak için VS Kod düzenleyicinizin içinde, ardından harici kurulum giriş alanına komut, nihayet Uzantılar: Uzantıyı Yükle açılan listeden seçenek.

Bu seçeneğe tıkladığınızda, yeni bir Komut Paleti örneği açılır. Yaz "ext yükleme teması" Yeni giriş alanına komut girerseniz tüm temaların bir listesini al VS Code Marketplace'ten edinilebilir.

Denilen temayı seçtim “Malzeme Teması Seti”, ve üzerine tıklayarak yükleyin. Renk teması listesinde yeni temanın, diğer varsayılan temaların bulunduğu yerde olması için VS Kodunu yeniden başlat. Yeniden başlattıktan sonra, yeni tema tema listesinde belirir ve onu Komut Paletinden ayarlayabilirsiniz..

Yeni Material Theme ile editörüm şunun gibi görünüyor:

Önceki temaya geri dönebilir (yaptığım gibi, yine de bu temayı tercih ediyorum) veya hangisinin sizin için en uygun olduğunu görmek için diğer temalarla biraz daha oynayabilirsiniz.

İstersen ayrıca yapabilirsin. özel temanı oluştur, ve vsce extension manager aracını kullanarak VS Code Marketplace’te yayınlayın.

Kullanıcı ve Çalışma Alanı Ayarlarını Değiştir

VS Kodu yalnızca özel bir tema belirlemenize izin vermez, aynı zamanda diğer birçok ayarı yapılandır, kuralları biçimlendirme, farklı özelliklerin kullanımı, kilitlenme raporları, HTTP ayarları, dosya ilişkilendirmeleri, sıralama kuralları ve daha fazlası gibi.

Bunu, her ikisi de JSON biçiminde, iki yapılandırma dosyasını düzenleyerek yapabilirsiniz. Endişelenmeyin, profesyonel olmanıza gerek yok, çünkü VS Code özelleştirmelerinizi hızlı bir şekilde eklemek için oldukça basit ve sezgisel bir yol sunuyor.

İlk önce, iki yapılandırma dosyası arasındaki farkın ne olduğunu görelim. VS Kodunun iki kapsamı vardır (global ve yerel) ayarlar için, bu nedenle iki ayrı dosya:

1. küresel settings.json, Yapılandırma kurallarının her çalışma alanı için geçerli olduğu
2. çalışma alanıyla ilgili .vscode / settings.json, bu yalnızca bireysel bir çalışma alanıyla ilgilidir

global settings.json dosya, işletim sisteminizin sırasıyla uygulamalarla ilgili diğer yapılandırma dosyalarını sakladığı klasörde bulunabilir:

• Windows'ta: % APPDATA% \ Kod \ Kullanıcı \ settings.json
• Linux'ta: $ HOME / .config / Kod / Kullanıcı / settings.json
• Mac’te: $ HOME / Kütüphane / Uygulama Desteği / Kod / Kullanıcı / settings.json

çalışma-ilişkili settings.json dosya mevcut projenizin klasöründe saklanır. Varsayılan olarak, bu dosya mevcut değildir, ancak özel bir Çalışma Alanı Ayarı eklediğiniz anda, VS Kodu bir .vscode / settings.json bir kerede dosya ve özel çalışma alanına özel yapılandırmaları içine yerleştirir.

Ne zaman kullanıyorsun settings.json Dosyalar?

VS Kodunun özel yapılandırma kurallarınızı herşey projelerinizi küresel hale getirin settings.json dosya.

Ayarlarınızın yalnızca telefonunuzda geçerli olmasını istiyorsanız, mevcut proje, onları çalışma alanına bağlı olarak yerleştirin settings.json dosya.

Çalışma alanı ayarları genel ayarları geçersiz kılar, yani dikkatli ol.

Genel ayarlar denir “Kullanıcı ayarları” VS Kodunda. Üzerine tıklayarak da açın. Dosya> Tercihler> Kullanıcı Ayarları veya ifadeyi yazmaya başladığınızda “Kullanıcı ayarları” Komut Paletine gir (F1 ile aç).

VS Kodu yan yana iki bölme açar: soldaki, yapılandırılması mümkün olan tüm seçenekleri içerir ve sağdaki global settings.json dosya. Özel yapılandırma kurallarınızı bu dosyaya yerleştirmeniz gerekir..

Gördüğünüz gibi, başka bir şey yapmanıza gerek yok, değiştirmek istediğiniz ayarları soldan sağa kopyalayıp yapıştırın ve değiştirilen değerleri ekleyin.

Kısa bir örneğe bakalım (ancak kişisel ihtiyaçlarınıza göre başka değişiklikler de yapabilirsiniz). Yazı tipi ailesini değiştireceğim, uzunluğu azaltmak çıkıntı varsayılan dört boşluktan ikiye, maksimum çalışma dosyası sayısını dokuzdan beşe düşürün ve yinelenen stillerle ilgili CSS bağlantı kurallarından birini değiştirin. "aldırmamak" için "uyarı".

Kopyala yapıştırma işleminden sonra global settings.json dosya şöyle görünür:

 // "editor.fontFamily" varsayılan ayarlarının üzerine yazmak için ayarlarınızı bu dosyaya yerleştirin: "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "uyarı"

Değiştirilenleri kaydettikten sonra settings.json dosya, düzenleyicimin görünümleri bir kerede değişiyor (aşağıdaki ekran görüntüsünde yalnızca font ailesinin değişikliği görülebilir):

Çalışma Alanı Ayarlarını benzer şekilde değiştirebilirsiniz. Şimdi tıklamanız gerekiyor Dosya> Tercihler> Çalışma Alanı Ayarları Çalışma alanıyla ilgili erişmek için üst menü çubuğunda .vscode / settings.json dosya.

Çalışma Alanı Ayarları, Kullanıcı Ayarları ile tamamen aynı yapılandırma seçeneklerine sahiptir ve aynı kopya yapıştırma tekniğini kullanabilirsiniz. Yalnızca iki fark vardır, kapsam (global yerine yerel) ve settings.json Özel yapılandırmalarınızın kaydedileceği dosya.