Cara Menggunakan VS Code Secara Efektif untuk Coding

Visual Studio Code (VS Code) adalah editor kode paling populer di dunia saat ini. Ringan, gratis, dan didukung ekosistem extension yang sangat kaya, VS Code menjadi pilihan utama jutaan developer dari berbagai bidang. Namun banyak yang hanya menggunakannya sebagai teks editor biasa, padahal ada segudang fitur dan shortcut yang bisa melipatgandakan produktivitas kamu jika dimanfaatkan dengan benar.

Instalasi dan Konfigurasi Awal

Unduh VS Code dari https://code.visualstudio.com. Setelah terpasang, aktifkan beberapa pengaturan dasar yang akan meningkatkan kenyamanan kerja. Buka Command Palette dengan Ctrl+Shift+P (atau Cmd+Shift+P di Mac), ketik Open Settings JSON, dan tambahkan konfigurasi berikut:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange"
}

Shortcut Keyboard yang Wajib Dikuasai

Shortcut adalah cara paling cepat meningkatkan kecepatan kerja di VS Code:

• Ctrl+P — Buka file dengan cepat (Quick Open).
• Ctrl+Shift+P — Buka Command Palette.
• Ctrl+` — Buka terminal terintegrasi.
• Alt+Up/Down — Pindahkan baris ke atas atau bawah.
• Ctrl+D — Pilih kata berikutnya yang sama (multi-cursor editing).
• Ctrl+Shift+K — Hapus seluruh baris.
• Ctrl+/ — Toggle komentar pada baris terpilih.
• F12 — Go to Definition (lompat ke definisi fungsi atau variabel).
• Ctrl+B — Toggle sidebar.
• Ctrl+Shift+F — Pencarian di seluruh proyek.

Extension yang Wajib Dipasang

Extension memperluas kemampuan VS Code secara signifikan. Berikut adalah extension yang direkomendasikan:

• Prettier — Format kode otomatis agar rapi dan konsisten.
• ESLint — Deteksi error dan masalah gaya penulisan JavaScript.
• GitLens — Tampilkan informasi Git langsung di dalam editor.
• Live Server — Server lokal dengan auto-reload untuk pengembangan web.
• PHP Intelephense — Autocomplete dan error checking untuk PHP.
• Auto Rename Tag — Ubah tag HTML pembuka dan penutup secara bersamaan.
• Path Intellisense — Autocomplete untuk path file.
• Material Icon Theme — Ikon folder dan file yang lebih informatif.

Menggunakan Terminal Terintegrasi

VS Code memiliki terminal bawaan yang sangat berguna. Buka dengan Ctrl+` dan kamu bisa menjalankan perintah Git, npm, atau composer tanpa keluar dari editor:

git status
npm install
php artisan serve

Kamu juga bisa membuka beberapa terminal sekaligus dengan mengklik ikon + di panel terminal.

Fitur Multi-Cursor Editing

Salah satu fitur paling produktif di VS Code adalah multi-cursor. Kamu bisa mengedit banyak tempat sekaligus:

• Alt+Click — Tambahkan kursor di posisi mana saja.
• Ctrl+D — Pilih kemunculan berikutnya dari kata yang dipilih.
• Ctrl+Shift+L — Pilih semua kemunculan kata yang sama sekaligus.

Workspace dan Settings Berbasis Proyek

VS Code memungkinkan kamu menyimpan pengaturan khusus per proyek. Buat folder .vscode di root proyek dan tambahkan file settings.json:

{
  "editor.tabSize": 4,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.tabSize": 4
  }
}

Pengaturan ini hanya berlaku untuk proyek tersebut dan bisa di-commit ke Git agar seluruh tim menggunakan pengaturan yang sama.

Menggunakan Snippets Kustom

Buat snippet kode sendiri untuk template yang sering kamu gunakan. Buka File > Preferences > Configure User Snippets, pilih bahasa, lalu tambahkan:

"PHP Class": {
  "prefix": "phpclass",
  "body": [
    "class ${1:NamaClass} {",
    "  public function __construct() {",
    "    $2",
    "  }",
    "}"
  ],
  "description": "Template PHP Class"
}

Ketik phpclass lalu tekan Tab untuk menggunakannya.

Kesimpulan

VS Code bukan sekadar teks editor biasa — ia adalah lingkungan pengembangan yang lengkap jika kamu tahu cara memanfaatkannya. Mulai dengan menguasai shortcut dasar, pasang extension yang relevan dengan teknologi yang kamu gunakan, dan manfaatkan terminal terintegrasi untuk menghemat waktu. Semakin kamu eksplorasi fitur-fiturnya, semakin cepat dan nyaman proses coding kamu setiap harinya.