Dürüst olalım. Hepimiz bu durumu yaşadık. Akıştasınız, kod akıyor ve sonra... VSCode kasmaya başlıyor. İmleç takılıyor, otomatik tamamlama kahve molası veriyor ve dizüstü bilgisayarınızın fanı kalkışa hazırlanıyormuş gibi ses çıkarıyor. Sinir bozucu, konsantrasyonunuzu dağıtıyor ve açıkçası, üretkenliği büyük ölçüde öldürüyor.
Uzun bir süre boyunca, bunu güçlü, genişletilebilir bir düzenleyici kullanmanın bedeli olarak kabul ettim. İç çeker, birkaç sekme kapatır ve bir mucize için dua ederdim. Ta ki bu canavarın derinliklerine inmeye ve kurulumumu sistematik olarak optimize etmeye karar verene kadar. Sonuç mu? Sadece küçük bir hız artışı elde etmekle kalmadım; VSCode'u yavaş bir kaynak canavarından, neredeyse 10 kat daha hızlı hissettiren, yalın, güçlü bir kodlama makinesine dönüştürdüm.
Bu yolculuk sadece bir forumdan ayarları körü körüne kopyalamakla ilgili değildi. VSCode'un neden yavaşladığını anlamak ve düzeltmeleri metodik olarak uygulamakla ilgiliydi.
Ve hazır geliştirici iş akışımızı optimize etmekten bahsetmişken, API çalışmaları için Postman, Swagger ve Mock sunucuları arasında hokkabazlık yapmaktan da sıkıldıysanız, Apidog'a göz atmalısınız.
Bu yazıda, kullandığım kesin ayarları ve stratejileri size adım adım anlatacağım. Temel "bir veya iki uzantıyı devre dışı bırak" seviyesinin ötesine geçerek dosya izleme, TypeScript optimizasyonu ve gizli performans düşüşlerinin ayrıntılarına ineceğiz. Geliştirme ortamınızı geri almaya hazır olun.
Suçlular: VSCode'unuz Neden Bu Kadar Yavaş?
Düzeltmeleri uygulamaya başlamadan önce, neyle karşı karşıya olduğumuzu anlamak çok önemlidir. Bunu bir araba teşhis etmek gibi düşünün; rastgele parça değiştirmeye başlamazsınız. Vuruntu sesine neyin neden olduğunu bilmeniz gerekir.
Yaptığım araştırmalar sonucunda, VSCode'un performans sorunlarından sorumlu üç ana suçluyu belirledim:
- Uzantı Aşırı Yüklenmesi: Bu, tartışmasız, bir numaralı suçludur. Yüklediğiniz her uzantı, VSCode içinde çalışan küçük bir uygulama gibidir. Bazıları iyi huylu ve hafiftir, ancak diğerleri tüm düzenleyicinizi diz çöktürebilecek kaynak yoğun canavarlardır. Her yeni uzantı eklediğinizde sorun katlanarak artar.
- Dosya İzleme Çılgınlığı: VSCode, proje dosyalarınızdaki değişiklikleri sürekli izleyen yerleşik bir hizmete sahiptir. Canlı dosya gezgini güncellemesi ve kenar çubuğundaki Git durumu gibi özelliklere güç veren budur. Ancak, büyük projelerde, özellikle devasa
node_modules,distveyabuildklasörleri olanlarda, bu dosya izleyici aşırı çalışabilir ve binlerce dosyayı izlemeye çalışırken inanılmaz miktarda CPU ve bellek tüketebilir. - TypeScript ve Dil Sunucusu Zorlanması: TypeScript/JavaScript dünyasındakiler için dil sunucusu (IntelliSense, hata denetimi ve yeniden düzenleme sağlayan) bir mucize işçisidir. Ancak bu gücün bir bedeli vardır. Büyük kod tabanlarında, sürekli tür denetimi ve analizi performans üzerinde önemli bir yük oluşturabilir.
Düşmanları bildiğimize göre, savaş planımızı oluşturalım. Bunları etki sırasına göre ele alacağız.
Aşama 1: Uzantı Temizliği – En Güçlü Aracınız
En dramatik iyileşmeyi burada göreceksiniz. Tembelce yüklenmiş 40 uzantıdan 20 temel uzantıya indim ve fark sadece ölçülebilir değil, elle tutulur derecedeydi.
Adım 1: Kaynak Tüketenleri Belirleyin
Öncelikle, hangi uzantıların sizi gerçekten yavaşlattığını görmeniz gerekiyor. Neyse ki, VSCode'un bunun için harika yerleşik araçları var.
Ctrl+Shift+P(veya Mac'teCmd+Shift+P) ile Komut Paletini Açın.Developer: Show Running Extensionsyazın ve çalıştırın.
Bu, size çalışan her uzantıyı ve en önemlisi "Etkinleştirme Süresi"ni gösteren bir panel açar. Bu, uzantının başlaması için geçen süredir. Yüksek etkinleştirme süresine sahip uzantılar genellikle başlangıç performansınız üzerinde en büyük etkiye sahip olanlardır. Bu listeyi ilk kez görmek benim için gerçekten ufuk açıcı oldu.
Adım 2: Uzantı Yarılaması (Extension Bisect) ile Cerrahi Darbe
Peki ya soruna hangi uzantının neden olduğunu bilmiyorsanız? Bunları tek tek manuel olarak devre dışı bırakmak zahmetlidir. VSCode'un en iyi saklanan sırlarından birine girin: Uzantı Yarılaması (Extension Bisect).
- Komut Paletini tekrar açın ve
Developer: Start Extension Bisectkomutunu çalıştırın.
Bu parlak özellik, ikili arama algoritması kullanır. Uzantılarınızın yarısını devre dışı bırakacak ve sorunun hala devam edip etmediğini size soracaktır. Evet veya hayır dersiniz ve birkaç adımda suçluyu hızla daraltarak diğer yarısını devre dışı bırakır/etkinleştirir. Uzantı listenizdeki kötü aktörü sistematik olarak bulan bir dedektif gibidir.
Adım 3: Acımasız Budama ve Çalışma Alanı Yönetimi
Sorunlu veya basitçe kullanılmayan uzantıları belirledikten sonra, acımasız olma zamanı.
- Küresel Olarak Devre Dışı Bırakın: Hiç kullanmadığınız uzantılar için, sağ tıklayın ve bunları küresel olarak devre dışı bırakın.
- Çalışma Alanına Göre Devre Dışı Bırakın: Bu, oyunun kurallarını değiştiren bir özelliktir. Python linter'ınızın React projenizde etkin olmasına gerek yoktur ve bunun tersi de geçerlidir. Bir uzantıya sağ tıklayın ve "Devre Dışı Bırak (Çalışma Alanı)" seçeneğini seçin. Bu, diğer projeler için etkin kalmasını sağlar ancak mevcut projeniz için kapatır ve değerli kaynaklardan tasarruf etmenizi sağlar.
Ayrıca, yerleşik uzantıları da unutmayın. Uzantılar görünümünde @builtin araması yapın. Kullanmadığınız diller veya çerçeveler için varsayılan uzantılar bulabilirsiniz. Bunları devre dışı bırakmak da küçük ama güzel bir performans artışı sağlayabilir.
Uzantı Temizliğimin Sonuçları
Sayılarla konuşalım. Büyük uzantı temizliğinden önce ve sonra VSCode başlangıç performansımı ölçtüm. Sonuçlar şaşırtıcıydı:
| Performans Metriği | Önce (40 Uzantı) | Sonra (20 Uzantı) | İyileşme |
|---|---|---|---|
| kayıtlı uzantılar | 2104 ms | 1548 ms | %26 Daha Hızlı |
| çalışma alanı hazır | 1130 ms | 961 ms | %15 Daha Hızlı |
| uzantıları kaydet ve uzantı ana bilgisayarını başlat | 780 ms | 495 ms | %37 Daha Hızlı |
Düzenleyicim sadece daha hızlı başlamakla kalmadı; genel olarak daha duyarlı hissettirdi. Bu tek adım, alabileceğiniz en yüksek yatırım getirili eylemdir.
Aşama 2: Dosya Sistemi İzleyicisini Evcilleştirmek
Uzantılarla uğraştıktan sonra, bir sonraki en büyük kazanç VSCode'un doymak bilmez dosya izleyicisini kontrol etmekten gelir. Bu hizmet çok önemlidir, ancak projenizdeki her tek dosyayı izlemesine gerek yoktur.
files.watcherExclude Güç Ayarı
Bu ayar sizin en iyi arkadaşınızdır. VSCode'a sık sık değişen ancak temel geliştirme işinizi etkilemeyen klasörleri izleyerek kaynakları boşa harcamayı durdurmasını söyler.
İşte CPU ve bellek kullanımında büyük bir fark yaratan, settings.json dosyama eklediğim yapılandırma:
json
{
"files.watcherExclude": {
".git/objects": true,
".git/subtree-cache": true,
"node_modules/*": true,
"dist": true,
"build": true,
".vscode": true,
"coverage": true,
"__generated__": true,
"tmp": true,
".cache": true
}
}
Bunun yaptığı şey: Özellikle node_modules içindeki tüm karmaşayı, derleme çıktılarınızı (dist, build), Git dahili dosyalarını ve diğer önbellek dizinlerini yoksayar. Bu klasörler doğrudan sizin tarafınızdan değil, paket yöneticileri ve derleme araçları tarafından güncellenir, bu nedenle VSCode'un bunları izleyerek kendini yormasına gerek yoktur.
Ek Temizlik: files.exclude ve search.exclude
Hazır el atmışken, kenar çubuğunuzu temizleyelim ve aramaları hızlandıralım.
files.exclude: Dosyaları ve klasörleri gezgin kenar çubuğundan gizler. Bu, tonlarca performans tasarrufu sağlamaz, ancak proje ağacınızı çok daha temiz hale getirir.search.exclude: Bu, performansı gerçekten artırır. VSCode'unnode_modulesve diğer derleme dizinlerindeki binlerce ilgisiz dosyayı indekslemesini ve aramasını engeller, bu da arama özelliğini inanılmaz derecede hızlı hale getirir.
Benim yapılandırmam:
json
{
"files.exclude": {
".git": true,
".DS_Store": true,
"node_modules": true,
"__pycache__": true,
".next": true,
"dist": true,
"build": true
},
"search.exclude": {
"node_modules": true,
"bower_components": true,
".code-search": true,
"dist": true,
"build": true,
".next": true,
"coverage": true
}
}
Aşama 3: TypeScript Motorunuzu Optimize Etme
Bir TypeScript geliştiricisiyseniz, dil sunucusu sessiz bir kaynak tüketicisi olabilir. İşte onu daha verimli hale getirmenin yolu.
tsconfig.json Dosyanızı Süper Şarj Edin
Bakmanız gereken ilk yer projenizin tsconfig.json dosyasıdır. Buradaki doğru yapılandırma, TypeScript derleyicisinin (ve dolayısıyla VSCode'un) gereksiz işlerden kaçınmasına yardımcı olur.
json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/"
],
"exclude": [
"node_modules",
"dist",
"build",
".spec.ts",
".test.ts",
"coverage"
]
}
skipLibCheck: true seçeneği özellikle önemlidir. node_modules içindeki bildirim dosyalarının tür denetimini atlar, bu da derleme ve analiz süresini büyük ölçüde azaltabilir.
VSCode'a Özel TypeScript Ayarları
Ardından, bu performansa odaklı ayarları VSCode settings.json dosyanıza ekleyin:
json
{
"typescript.tsserver.log": "off",
"typescript.disableAutomaticTypeAcquisition": true,
"typescript.tsserver.experimental.enableProjectDiagnostics": false
}
"typescript.tsserver.log": "off": Dahili günlük çıktısını durdurur, disk G/Ç'sinden tasarruf sağlar."typescript.disableAutomaticTypeAcquisition": true: VSCode'unnode_modules'larınız için tür tanımlarını otomatik olarak indirmeye çalışmasını engeller, bu yavaş ve tahmin edilemez bir süreç olabilir."typescript.tsserver.experimental.enableProjectDiagnostics": false: Çok büyük projelerde faydalı olan teşhis yükünü azaltır.
Nükleer Seçenek: TypeScript Önbelleğini Temizleme
Bazen, TypeScript dil sunucusunun önbelleği bozulabilir veya şişebilir. Bunu temizlemek, garip performans sorunlarını ve yüksek bellek kullanımını çözebilir.
- Windows:
C:\\Users\\<KullanıcıAdınız>\\AppData\\Local\\Microsoft\\TypeScript - macOS:
~/Library/Caches/Microsoft/TypeScript - Linux:
~/.cache/typescript
Bir uyarı: Bu resmi bir prosedür değildir, bu yüzden riski size aittir. Ancak, deneyimlerime göre, bu klasörleri silmek güvenlidir ve genellikle "örümcek ağlarını temizleme" etkisi yaratarak her şeyi daha hızlı hale getirir.
Aşama 4: Kullanıcı Arayüzünü İyileştirme
VSCode'un kullanıcı arayüzü özellik açısından zengindir, ancak tüm bu piksellerin işlenmesine ihtiyacınız yoktur. Kullanmadığınız kullanıcı arayüzü öğelerini devre dışı bırakmak, işleme kaynaklarını boşaltarak düzenleyicinin daha akıcı hissetmesini sağlayabilir.
İşte tercih ettiğim kullanıcı arayüzü optimizasyonları:
json
{
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.codeLens": false,
"workbench.activityBar.visible": false,
"window.menuBarVisibility": "toggle"
}
Minimap'in daha büyük dosyalar için özellikle kaynak tüketen bir özellik olduğunu fark ettim. Kapatmak anında bir kazanç sağladı. Benzer şekilde, CodeLens (fonksiyonlarınızın üzerindeki referanslar ve uygulamalar gibi eyleme dönüştürülebilir bağlantılar) hesaplanması ve işlenmesi pahalı olabilir.
Aşama 5: Otomatik Davranışları İnce Ayar Yapma
Otomasyon, engel olana kadar harikadır.
Otomatik Kaydetme ve Biçimlendirme
Agresif otomatik kaydetme ve biçimlendirme, yazarken mikro gecikmelere neden olabilir. Bu ayarlarla tatlı bir nokta buldum:
json
{
"files.autoSave": "onFocusChange",
"files.autoSaveDelay": 1000,
"editor.formatOnSave": true,
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Bu, yalnızca mevcut dosyadan uzaklaştığımda kaydeder ve her tuş vuruşunda veya yapıştırmada değil, yalnızca kaydetme sırasında biçimlendirir. Bu, ben düşünmeye ve yazmaya çalışırken biçimlendiricinin sürekli arka planda çalışmasını engeller.
Git Entegrasyonu
VSCode'un Git entegrasyonu kullanışlıdır, ancak sürekli sorgulaması bir yük olabilir.
json
{
"git.enabled": true,
"git.autorefresh": false,
"git.autofetch": false,
"git.decorations.enabled": false
}
Bu, Git'i etkin tutar ancak otomatik yenilemeyi ve getirmeyi kapatır. İhtiyaç duyduğunuzda her zaman manuel olarak getirebilir ve yenileyebilirsiniz. Dekorasyonları (kenar çubuğundaki renkli çizgiler) devre dışı bırakmak da biraz işleme yükünden tasarruf sağlar.
Hepsini Bir Araya Getirme: Nihai settings.json
Pekala, her şeyi birleştirelim. İşte 10 kat daha hızlı VSCode deneyimimin omurgasını oluşturan eksiksiz, açıklamalı settings.json. Bu, "hepsine hükmedecek tek kopyala-yapıştır"dır.
json
{
// ===== DOSYA İZLEME HARİÇ TUTMALARI (CPU ve Bellek Tasarrufu) =====
"files.watcherExclude": {
".git/objects": true,
".git/subtree-cache": true,
"node_modules/*": true,
"dist": true,
"build": true,
".vscode": true,
"coverage": true,
"__generated__": true
},
// ===== GEZGİN KENAR ÇUBUĞUNU TEMİZLE =====
"files.exclude": {
".git": true,
".DS_Store": true,
"node_modules": true,
"dist": true,
"build": true
},
// ===== ARAMA PERFORMANSINI SÜPER ŞARJ ET =====
"search.exclude": {
"node_modules": true,
"dist": true,
"build": true,
".next": true,
"coverage": true
},
// ===== TYPESCRIPT OPTİMİZASYONLARI =====
"typescript.tsserver.log": "off",
"typescript.disableAutomaticTypeAcquisition": true,
// ===== KULLANICI ARAYÜZÜ HAFİF MODU =====
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.codeLens": false,
// ===== AKILLI OTOMATİK KAYDETME VE BİÇİMLENDİRME =====
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": false,
"editor.formatOnPaste": false,
// ===== VERİMLİ GIT ENTEGRASYONU =====
"git.autorefresh": false,
"git.autofetch": false,
"git.decorations.enabled": false,
// ===== BÜYÜK DOSYALARI YÖNETME =====
"files.maxMemoryForLargeFilesMB": 4096
}
Gelişmiş Tanılama ve Son Düşünceler
Tüm bu ayarları uyguladıysanız ve hala merak ediyorsanız, VSCode'un bir güçlü aracı daha var.
- Komut Paletinden
Developer: Startup Performancekomutunu çalıştırın.
Bu, VSCode'un başlangıcı sırasında neler olduğunu milisaniye milisaniye ayrıntılı bir şekilde gösterir. Son, inatçı darboğazları belirlemek için harikadır.
Performansa Bütünsel Bir Yaklaşım
VSCode'u optimize etmek harika bir adımdır, ancak yavaş bir geliştirme ortamının birçok kaynağı olabileceğini unutmayın. Kod düzenleyicimizi düzene soktuğumuz gibi, iş akışımızın diğer kısımlarını da düzene sokan araçlar kullanmak faydalıdır. Bu yüzden Apidog'u sürecime entegre ettim. Araçlarınız yavaş veya bağlantısızsa, API'ları yönetmek büyük bir zaman kaybı olabilir. API'ları tasarlamak, hata ayıklamak ve test etmek için hızlı, hepsi bir arada bir çözüme sahip olmak, yüksek performanslı bir kodlama ortamını mükemmel bir şekilde tamamlar, tüm geliştirme döngüsünü sıkı ve verimli tutar.
Sonuç olarak, hızlı bir VSCode sihirle ilgili değildir. Niyetle ilgilidir. Kullandığımız araçların ve uzantıların ödünleşimlerini anlamak ve bilinçli seçimler yapmakla ilgilidir. Uzantılarınızın kontrolünü ele alarak, dosya izleyiciyi evcilleştirerek, TypeScript'i optimize ederek ve kullanıcı arayüzünü düzene sokarak, o "10 kat daha hızlı" hissini kesinlikle elde edebilirsiniz.
Peki, ne bekliyorsunuz? VSCode ayarlarınızı açın ve kendi optimizasyon yolculuğunuza başlayın. CPU'nuz (ve akıl sağlığınız) size teşekkür edecek.
