Panduan Setup Visual Studio Code (VS Code) untuk Pemula

Sebelum mulai menulis baris kode pertama, kamu butuh "senjata" yang tepat. Di Saung Programmer (SP), kami merekomendasikan satu alat yang menjadi standar industri saat ini: Visual Studio Code.

Panduan ini adalah setup dasar yang kami gunakan di kurikulum Saung Programmer untuk belajar HTML, CSS, JavaScript, PHP, hingga Laravel. Ikuti langkah-langkahnya agar pengalaman belajarmu lancar.

1️⃣ Apa Itu Visual Studio Code (VS Code)?

Visual Studio Code (VS Code) adalah code editor gratis buatan Microsoft yang sangat populer.

Kenapa Saung Programmer memilih VS Code?

• Gratis & Open Source: Tidak perlu bayar lisensi.

• Ringan: Bisa jalan lancar di laptop spesifikasi menengah (seperti laptop standar SMK).

• Lengkap: Cocok untuk pemula sampai level advanced.

👉 Bisa digunakan untuk:

• Web Development (Fokus utama kita)

• Backend (PHP, Laravel, Node.js)

• Frontend (HTML, CSS, JS, React)

2️⃣ Cara Download & Install VS Code

Jangan salah download! Ikuti panduan ini agar instalasi sempurna.

🔽 Langkah Download

1. Buka website resmi: 👉 https://code.visualstudio.com

2. Pilih tombol Download sesuai OS kamu (Windows, macOS, atau Linux).

3. Tunggu hingga proses unduhan selesai.

💻 Cara Install (Khusus Windows)

1. Klik dua kali file VSCodeUserSetup.exe yang sudah di-download.

2. Klik Next dan setujui License Agreement.

3. PENTING: Saat muncul pilihan "Select Additional Tasks", pastikan kamu mencentang semua kotak berikut:

   • ✅ Add to PATH (Sangat krusial agar VS Code dikenali sistem)

   • ✅ Register Code as an editor for supported file types

   • ✅ Add "Open with Code" action to Windows Explorer context menu

4. Klik Install dan tunggu sampai selesai.

3️⃣ Extension WAJIB (Rekomendasi Saung Programmer)

VS Code "polosan" itu bagus, tapi dengan tambahan Extension, koding jadi jauh lebih mudah.

Setelah VS Code terbuka, tekan Ctrl + Shift + X di keyboard, lalu cari dan install ekstensi berikut:

🔥 1. Live Server (WAJIB)

• Fungsi: Menjalankan file HTML secara live di browser. Setiap kali kamu save, browser akan otomatis refresh. Tidak perlu reload manual!

• Cara Pakai: Klik kanan pada file HTML, pilih Open with Live Server.

🔥 2. Prettier – Code Formatter

• Fungsi: Merapikan kode yang berantakan secara otomatis saat disimpan. Kode yang rapi adalah ciri khas programmer profesional.

🔥 3. Auto Rename Tag

• Fungsi: Saat kamu mengubah tag HTML pembuka (misal <h1> jadi <h2>), tag penutupnya akan otomatis ikut berubah. Hemat waktu!

🔥 4. IntelliSense for CSS class names in HTML

• Fungsi: Memberikan saran (auto-suggestion) nama class CSS yang sudah kamu buat. Sangat membantu agar tidak typo.

🔥 5. PHP Intelephense (Untuk Materi Backend)

• Fungsi: Memberikan fitur auto-complete dan deteksi error untuk kode PHP. Wajib diinstall saat kamu masuk materi PHP & Laravel di roadmap SP.

4️⃣ Setting VS Code Agar Nyaman (Standar SP)

Agar mata tidak cepat lelah dan kode otomatis rapi, kita perlu mengubah sedikit pengaturan.

1. Buka Command Palette dengan tekan: Ctrl + Shift + P

2. Ketik: Preferences: Open Settings (JSON)

3. Hapus semua isinya, lalu copy-paste kode di bawah ini:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false
}

Apa fungsinya?

• "editor.formatOnSave": true: Kode otomatis dirapikan setiap kali di-save.

• "files.autoSave": "afterDelay": Otomatis save file (tidak perlu tekan Ctrl+S terus menerus).

• "editor.wordWrap": "on": Kode panjang akan turun ke bawah, tidak melebar ke samping (horizontal scroll).

5️⃣ Tema & Tampilan Favorit

Kenyamanan visual itu penting. Berikut adalah tema yang sering digunakan oleh mentor-mentor di Saung Programmer:

• Install Extension: Cari "One Dark Pro" atau "Dracula Official".

• Cara Ganti: Tekan Ctrl + Shift + P → Ketik Color Theme → Pilih tema yang baru diinstall.

6️⃣ Font Coding Rekomendasi (Fira Code)

Font bawaan sudah oke, tapi font Fira Code membuat simbol-simbol koding (seperti !=, =>, ===) menjadi lebih mudah dibaca (fitur Ligatures).

1. Download fontnya di: 👉 GitHub Fira Code

2. Install font di komputermu.

3. Tambahkan baris ini ke dalam Settings JSON kamu tadi:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

7️⃣ Struktur Folder yang Rapi

Di Saung Programmer, kami menekankan: Programmer rapi = mudah berkembang.

Jangan simpan file sembarangan. Biasakan buat folder khusus belajar, contohnya:

belajar-coding/
│
├── html/
├── css/
├── javascript/
├── php/
└── laravel/

Dengan struktur ini, materi belajarmu akan tersusun sistematis dan mudah dicari kembali.

8️⃣ Shortcut VS Code (Hemat Waktu)

Hafalkan shortcut ini agar kamu terlihat seperti pro dan kerja lebih cepat:

Sudah Siap Ngoding?

VS Code kamu sudah siap tempur! Sekarang saatnya kita kotoran tangan dengan kode. Jangan biarkan tools canggih ini menganggur.