Setup VS Code untuk Produktivitas: Extension dan Tips yang Wajib Dicoba

Setup VS Code yang produktif dimulai dari tiga hal: format otomatis saat menyimpan, extension yang sesuai bahasa yang kamu pakai (bukan puluhan extension sekaligus), dan menghafal sekitar sepuluh shortcut yang paling sering dipakai. Kombinasi itu menghemat menit demi menit setiap hari, dan editor tetap ringan.

Pengaturan Penting di VS Code

Buka pengaturan JSON lewat Command Palette (Ctrl+Shift+P, lalu "Preferences: Open User Settings (JSON)"):

{
  "editor.formatOnSave": true,
  "editor.fontSize": 15,
  "editor.lineHeight": 1.6,
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.stickyScroll.enabled": true,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.editor.enablePreview": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

linkedEditing mengubah tag penutup HTML otomatis saat tag pembuka diubah, dan stickyScroll menampilkan nama fungsi atau class yang sedang dibaca di bagian atas.

Extension per Kebutuhan

Umum

• EditorConfig: mengikuti aturan indentasi proyek.
• GitLens: melihat siapa dan kapan sebuah baris diubah.
• Error Lens: menampilkan pesan error langsung di baris kode.
• Path Intellisense: autocomplete path file.

PHP dan Laravel

• PHP Intelephense: autocomplete, go to definition, dan deteksi error PHP.
• Laravel (extension resmi): autocomplete route, view, config, dan Blade.
• Formatter yang sama dengan tim, misalnya Laravel Pint lewat task atau extension.

JavaScript dan TypeScript

• ESLint dan Prettier.
• Tailwind CSS IntelliSense untuk autocomplete kelas, dibahas di Tailwind CSS v4.
• Vue (Official) untuk proyek Vue.

Lainnya

• Docker dan Dev Containers untuk bekerja di dalam kontainer.
• Remote SSH untuk mengedit file langsung di server.
• REST Client untuk menguji API dari file .http.

Shortcut yang Paling Sering Dipakai

Latih tiga shortcut per minggu sampai refleks. Dalam sebulan, sebagian besar navigasi tidak lagi butuh mouse.

Profil untuk Konteks Berbeda

Fitur Profiles memungkinkan satu set extension dan pengaturan per konteks, misalnya profil "Laravel", "Python data", dan "Menulis". Extension yang tidak relevan tidak dimuat, sehingga VS Code lebih cepat dibuka. Aktifkan Settings Sync agar pengaturan sama di laptop kantor dan rumah.

Pengaturan per Proyek

Simpan rekomendasi extension di repo agar anggota tim baru langsung mendapat saran yang sama:

// .vscode/extensions.json
{
  "recommendations": ["bmewburn.vscode-intelephense-client", "laravel.vscode-laravel", "editorconfig.editorconfig"]
}

User Settings vs Workspace Settings

VS Code punya dua lapis pengaturan. User settings berlaku di semua proyek, cocok untuk ukuran font, tema, dan shortcut pribadi. Workspace settings disimpan di .vscode/settings.json di dalam proyek dan berlaku untuk semua orang yang membuka proyek itu, cocok untuk formatter default, aturan indentasi, dan folder yang disembunyikan dari pencarian:

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": { "editor.defaultFormatter": "bmewburn.vscode-intelephense-client" },
  "search.exclude": { "vendor": true, "node_modules": true, "public/build": true }
}

Mengecualikan vendor dan node_modules dari pencarian membuat Ctrl+Shift+F jauh lebih cepat dan hasilnya lebih relevan.

Asisten AI di Editor

GitHub Copilot, Claude Code, dan asisten AI lain terintegrasi dengan VS Code untuk autocomplete, chat tentang kode, sampai mode agent yang mengubah banyak file. Pemakaiannya yang aman dibahas di agentic AI coding.

Kesalahan yang Sering Terjadi

• Memasang puluhan extension yang tumpang tindih, misalnya dua formatter untuk bahasa yang sama, sehingga format berubah-ubah.
• Format berbeda dengan tim karena setiap orang memakai pengaturan sendiri. Simpan konfigurasi formatter di repo.
• Editor lambat tanpa tahu penyebabnya. Jalankan "Developer: Show Running Extensions" untuk melihat extension yang paling berat.

Langkah Berikutnya

Integrasi Git di VS Code jauh lebih berguna kalau kamu paham dasarnya; pelajari di Git untuk pemula. Untuk merapikan data JSON tanpa membuka extension tambahan, gunakan Format JSON di browser.