Setting VSCode Saya untuk Membuat VSCode 10x Lebih Cepat

Jujur saja. Kita semua pernah mengalaminya. Anda sedang fokus, kode mengalir lancar, lalu... VSCode mulai melambat. Kursor tersendat, pelengkapan otomatis butuh waktu lama, dan kipas laptop Anda terdengar seperti sedang bersiap untuk lepas landas. Ini membuat frustrasi, memecah konsentrasi Anda, dan jujur saja, ini adalah pembunuh produktivitas yang besar.

Untuk waktu yang lama, saya hanya menerima ini sebagai harga dari penggunaan editor yang kuat dan dapat diperluas. Saya akan menghela napas, menutup beberapa tab, dan berdoa untuk keajaiban. Itu terjadi, sampai saya memutuskan untuk menyelami lebih dalam dan secara sistematis mengoptimalkan pengaturan saya. Hasilnya? Saya tidak hanya mendapatkan peningkatan kecepatan kecil; saya mengubah VSCode dari pemakan sumber daya yang lamban menjadi mesin pengodean yang ramping dan efisien yang terasa hampir 10x lebih cepat.

Perjalanan ini bukan hanya tentang menyalin pengaturan secara membabi buta dari forum. Ini tentang memahami mengapa VSCode menjadi lambat dan menerapkan perbaikan secara metodis.

Dan hei, selagi kita berbicara tentang mengoptimalkan alur kerja pengembang kita, jika Anda juga lelah bolak-balik antara Postman, Swagger, dan server Mock untuk pekerjaan API, Anda harus mencoba Apidog.

Dalam postingan ini, saya akan memandu Anda melalui pengaturan dan strategi persis yang saya gunakan. Kita akan melampaui "menonaktifkan satu atau dua ekstensi" dasar dan masuk ke seluk-beluk pemantauan file, optimasi TypeScript, dan penguras kinerja tersembunyi. Bersiaplah untuk mengklaim kembali lingkungan pengembangan Anda.

Pelaku: Mengapa VSCode Anda Sangat Lambat?

Sebelum kita mulai menerapkan perbaikan, penting untuk memahami apa yang kita hadapi. Anggap saja seperti mendiagnosis mobil; Anda tidak hanya mulai mengganti suku cadang secara acak. Anda perlu tahu apa yang menyebabkan suara berisik itu.

Melalui penyelidikan saya, saya menemukan tiga biang keladi utama yang bertanggung jawab atas masalah kinerja VSCode:

1. Kelebihan Ekstensi: Ini, tanpa diragukan lagi, adalah penyebab nomor satu. Setiap ekstensi yang Anda instal seperti aplikasi kecil yang berjalan di dalam VSCode. Beberapa berperilaku baik dan ringan, tetapi yang lain adalah monster yang memakan banyak sumber daya yang dapat membuat seluruh editor Anda lumpuh. Masalah ini bertambah dengan setiap ekstensi baru yang Anda tambahkan.
2. Kegilaan Pemantauan File: VSCode memiliki layanan bawaan yang terus-menerus memantau file proyek Anda untuk perubahan. Inilah yang menggerakkan fitur-fitur seperti pembaruan penjelajah file langsung dan status Git di bilah sisi. Namun, dalam proyek besar, terutama yang memiliki folder node_modules, dist, atau build yang besar, pemantau file ini dapat bekerja terlalu keras, mengonsumsi CPU dan memori dalam jumlah gila karena mencoba melacak ribuan file.
3. Ketegangan Server TypeScript & Bahasa: Bagi kita di dunia TypeScript/JavaScript, server bahasa (yang menyediakan IntelliSense, pemeriksaan kesalahan, dan refactoring) adalah pekerja ajaib. Tetapi kekuatan itu datang dengan biaya. Pada basis kode yang besar, pemeriksaan dan analisis tipe yang konstan dapat menjadi penguras kinerja yang signifikan.

Sekarang kita tahu musuhnya, mari kita bangun rencana pertempuran kita. Kita akan mengatasi ini sesuai urutan dampaknya.

Fase 1: Pembersihan Ekstensi – Pengungkit Anda yang Paling Kuat

Di sinilah Anda akan melihat peningkatan yang paling dramatis. Saya beralih dari 40 ekstensi yang terinstal secara malas menjadi 20 ekstensi penting, dan perbedaannya tidak hanya terukur, tetapi juga terasa.

Langkah 1: Identifikasi Pemakan Sumber Daya

Pertama, Anda perlu melihat ekstensi mana yang sebenarnya memperlambat Anda. Untungnya, VSCode memiliki alat bawaan yang fantastis untuk ini.

• Buka Command Palette dengan Ctrl+Shift+P (atau Cmd+Shift+P di Mac).
• Ketik dan jalankan Developer: Show Running Extensions.

Ini membuka panel yang menunjukkan setiap ekstensi yang berjalan dan, yang terpenting, "Waktu Aktivasi" -nya. Ini adalah berapa lama waktu yang dibutuhkan ekstensi untuk memulai. Ekstensi dengan waktu aktivasi yang tinggi seringkali merupakan ekstensi yang memiliki dampak terbesar pada kinerja startup Anda. Melihat daftar ini untuk pertama kalinya adalah pencerahan nyata bagi saya.

Langkah 2: Serangan Bedah dengan Bisect Ekstensi

Bagaimana jika Anda tidak tahu ekstensi mana yang menyebabkan masalah? Menonaktifkannya satu per satu secara manual adalah hal yang menyebalkan. Masuklah salah satu rahasia terbaik VSCode: Bisect Ekstensi.

• Buka Command Palette lagi dan jalankan Developer: Start Extension Bisect.

Fitur brilian ini menggunakan algoritma pencarian biner. Ini akan menonaktifkan setengah dari ekstensi Anda dan menanyakan apakah masalahnya masih ada. Anda menjawab ya atau tidak, dan itu menonaktifkan/mengaktifkan setengah lainnya, dengan cepat mempersempit pelakunya hanya dalam beberapa langkah. Ini seperti seorang detektif yang secara sistematis menemukan aktor jahat dalam daftar ekstensi Anda.

Langkah 3: Pemangkasan Tanpa Ampun dan Manajemen Ruang Kerja

Setelah Anda mengidentifikasi ekstensi yang bermasalah atau yang tidak terpakai, saatnya untuk bersikap tanpa ampun.

• Nonaktifkan Secara Global: Untuk ekstensi yang tidak pernah Anda gunakan, cukup klik kanan dan nonaktifkan secara global.
• Nonaktifkan berdasarkan Ruang Kerja: Ini adalah pengubah permainan. Anda tidak memerlukan linter Python Anda aktif di proyek React Anda, dan sebaliknya. Klik kanan ekstensi dan pilih "Nonaktifkan (Ruang Kerja)". Ini membuatnya tetap aktif untuk proyek lain tetapi mematikannya untuk proyek Anda saat ini, menghemat sumber daya berharga.

Selain itu, jangan lupakan ekstensi bawaan. Cari @builtin di tampilan ekstensi. Anda mungkin menemukan ekstensi default untuk bahasa atau kerangka kerja yang tidak Anda gunakan. Menonaktifkan ini juga dapat memberikan sedikit peningkatan kinerja.

Hasil Pembersihan Ekstensi Saya

Mari kita bicara angka. Saya mengukur kinerja startup VSCode saya sebelum dan sesudah pembersihan ekstensi besar-besaran. Hasilnya sangat mencengangkan:

Editor saya tidak hanya memulai lebih cepat; rasanya lebih responsif secara keseluruhan. Langkah tunggal ini adalah tindakan dengan pengembalian investasi tertinggi yang dapat Anda lakukan.

Fase 2: Menjinakkan Pemantau Sistem File

Setelah berurusan dengan ekstensi, kemenangan terbesar berikutnya datang dari mengendalikan pemantau file VSCode yang tak terpuaskan. Layanan ini penting, tetapi tidak perlu memantau setiap file dalam proyek Anda.

Pengaturan Kekuatan files.watcherExclude

Pengaturan ini adalah sahabat terbaik Anda. Ini memberi tahu VSCode untuk berhenti membuang-buang sumber daya untuk memantau folder yang sering berubah tetapi tidak memengaruhi pekerjaan pengembangan inti Anda.

Berikut adalah konfigurasi yang saya masukkan ke dalam settings.json saya yang membuat perbedaan besar dalam penggunaan CPU dan memori:

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
  }
}

Apa yang dilakukan ini: Ini secara khusus mengabaikan semua kekacauan di dalam node_modules, output build Anda (dist, build), internal Git, dan direktori cache lainnya. Folder-folder ini diperbarui oleh manajer paket dan alat build, bukan oleh Anda secara langsung, jadi tidak perlu bagi VSCode untuk kelelahan memantaunya.

Pembersihan Bonus: files.exclude dan search.exclude

Selagi Anda melakukannya, mari bersihkan bilah sisi Anda dan percepat pencarian.

• files.exclude: Menyembunyikan file dan folder dari bilah sisi penjelajah. Ini tidak menghemat banyak kinerja, tetapi membuat pohon proyek Anda jauh lebih bersih.
• search.exclude: Yang satu ini memang meningkatkan kinerja. Ini mencegah VSCode mengindeks dan mencari melalui ribuan file yang tidak relevan di node_modules dan direktori build lainnya, membuat fitur pencarian sangat cepat.

Konfigurasi saya:

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
  }
}

Fase 3: Mengoptimalkan Mesin TypeScript Anda

Jika Anda seorang pengembang TypeScript, server bahasa dapat menjadi penguras sumber daya yang sunyi. Berikut cara membuatnya lebih efisien.

Supercharge tsconfig.json Anda

Tempat pertama yang harus dilihat adalah tsconfig.json proyek Anda. Konfigurasi yang tepat di sini membantu kompiler TypeScript (dan secara ekstensi, VSCode) menghindari pekerjaan yang tidak perlu.

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"
  ]
}

Opsi skipLibCheck: true sangat penting. Ini melewati pemeriksaan tipe file deklarasi di node_modules, yang dapat secara drastis mengurangi waktu kompilasi dan analisis.

Pengaturan TypeScript Khusus VSCode

Selanjutnya, tambahkan pengaturan yang berfokus pada kinerja ini ke settings.json VSCode Anda:

json

{
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false
}

• "typescript.tsserver.log": "off": Menghentikan output log internal, menghemat I/O disk.
• "typescript.disableAutomaticTypeAcquisition": true": Mencegah VSCode secara otomatis mencoba mengunduh definisi tipe untuk node_modules Anda, sebuah proses yang bisa lambat dan tidak dapat diprediksi.
• "typescript.tsserver.experimental.enableProjectDiagnostics": false: Mengurangi beban diagnostik, yang sangat membantu dalam proyek yang sangat besar.

Opsi Nuklir: Membersihkan Cache TypeScript

Terkadang, cache server bahasa TypeScript dapat rusak atau membengkak. Membersihkannya dapat mengatasi masalah kinerja yang aneh dan penggunaan memori yang tinggi.

• Windows: C:\\Users\\<NamaPenggunaAnda>\\AppData\\Local\\Microsoft\\TypeScript
• macOS: ~/Library/Caches/Microsoft/TypeScript
• Linux: ~/.cache/typescript

Peringatan: Ini bukan prosedur resmi, jadi lakukan dengan risiko Anda sendiri. Namun, dalam pengalaman saya, menghapus folder-folder ini aman dan seringkali memiliki efek "membersihkan sarang laba-laba", membuat semuanya lebih cepat.

Fase 4: Merampingkan Antarmuka Pengguna

UI VSCode kaya fitur, tetapi Anda tidak memerlukan semua piksel yang dirender. Menonaktifkan elemen UI yang tidak Anda gunakan dapat membebaskan sumber daya rendering, membuat editor terasa lebih halus.

Berikut adalah optimasi UI pilihan saya:

json

{
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

Saya menemukan minimap menjadi penguras sumber daya tertentu untuk file yang lebih besar. Mematikannya adalah kemenangan instan. Demikian pula, CodeLens (tautan yang dapat ditindaklanjuti seperti referensi dan implementasi di atas fungsi Anda) bisa mahal untuk dihitung dan dirender.

Fase 5: Penyesuaian Perilaku Otomatis

Otomatisasi itu bagus sampai menghalangi.

Simpan Otomatis dan Pemformatan

Penyimpanan otomatis dan pemformatan yang agresif dapat menyebabkan kelambatan mikro saat Anda mengetik. Saya menemukan titik manis dengan pengaturan ini:

json

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Ini hanya menyimpan saat saya beralih dari file saat ini, dan itu hanya memformat saat menyimpan, bukan pada setiap penekanan tombol atau penempelan. Ini mencegah pemformat terus berjalan di latar belakang saat saya mencoba berpikir dan mengetik.

Integrasi Git

Integrasi Git VSCode nyaman, tetapi polling-nya yang konstan dapat menjadi penguras.

json

{
  "git.enabled": true,
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false
}

Ini membuat Git tetap aktif tetapi mematikan penyegaran dan pengambilan otomatis. Anda selalu dapat mengambil dan menyegarkan secara manual saat Anda membutuhkannya. Menonaktifkan dekorasi (garis berwarna di bilah sisi) juga menghemat sedikit overhead rendering.

Menyatukan Semuanya: settings.json Terbaik

Baiklah, mari kita satukan semuanya. Berikut adalah settings.json lengkap dan beranotasi yang menjadi tulang punggung pengalaman VSCode saya yang 10x lebih cepat. Ini adalah "satu salin-tempel untuk menguasai semuanya."

json

{
  // ===== PENGECUALIAN PEMANTAUAN FILE (Penghemat CPU & Memori) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== BERSIHKAN BILAH SISI EXPLORER =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== TINGKATKAN KINERJA PENCARIAN =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== OPTIMASI TYPESCRIPT =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== MODE RINGAN UI =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== SIMPAN OTOMATIS & FORMAT CERDAS =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== INTEGRASI GIT YANG EFISIEN =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== TANGANI FILE BESAR =====
  "files.maxMemoryForLargeFilesMB": 4096
}

Diagnostik Tingkat Lanjut dan Pemikiran Akhir

Jika Anda telah menerapkan semua pengaturan ini dan masih penasaran, VSCode memiliki satu alat yang lebih ampuh.

• Jalankan Developer: Startup Performance dari Command Palette.

Ini memberi Anda rincian detail, milidetik demi milidetik tentang apa yang terjadi selama startup VSCode. Ini fantastis untuk menunjukkan hambatan terakhir yang membandel.

Pendekatan Holistik terhadap Kinerja

Mengoptimalkan VSCode adalah langkah yang fantastis, tetapi ingat bahwa lingkungan pengembangan yang lambat dapat memiliki banyak sumber. Sama seperti kita telah merampingkan editor kode kita, ada baiknya menggunakan alat yang merampingkan bagian lain dari alur kerja kita. Inilah mengapa saya mengintegrasikan Apidog ke dalam proses saya. Mengelola API dapat memakan banyak waktu jika alat Anda lambat atau terputus. Memiliki solusi cepat dan all-in-one untuk mendesain, men-debug, dan menguji API melengkapi lingkungan pengodean berkinerja tinggi dengan sempurna, menjaga seluruh siklus pengembangan tetap ketat dan efisien.

Kesimpulannya, VSCode yang cepat bukanlah tentang sihir. Ini tentang kesengajaan. Ini tentang memahami trade-off dari alat dan ekstensi yang kita gunakan dan membuat pilihan yang sadar. Dengan mengendalikan ekstensi Anda, menjinakkan pemantau file, mengoptimalkan TypeScript, dan merampingkan UI, Anda benar-benar dapat mencapai perasaan "10x lebih cepat" itu.

Jadi, tunggu apa lagi? Buka pengaturan VSCode Anda dan mulailah perjalanan optimasi Anda sendiri. CPU Anda (dan kewarasan Anda) akan berterima kasih.