Visual Studio Code Tips

Apa itu Visual Studio Code?

Editor Kode Terpopuler di Dunia

Visual Studio Code (dibuat oleh Microsoft) adalah aplikasi untuk menulis kode — gratis, ringan, dan sangat powerful. Lebih dari 70% developer di dunia memakainya. Bukan karena terpaksa, tapi karena memang enak dipakai — apalagi sekarang sudah ada AI built-in di dalamnya.

Produktivitas Coding — Tanpa vs Pakai Visual Studio Code

📝 Notepad / TextEdit

Terlalu basic

🖊️ Notepad++

Lumayan tapi terbatas

☁️ Replit (browser)

Online tapi lambat

💡 Sublime Text

Bagus tapi berbayar

💻 Visual Studio Code

Gratis + powerful

🤖 Visual Studio Code + AI

Level up!

* Visual Studio Code tersedia gratis di code.visualstudio.com — tersedia untuk Windows, Mac, dan Linux.

💡 Kenapa Visual Studio Code untuk Pemula?

        Visual Studio Code punya autocomplete kode (saran kode otomatis), syntax highlighting (warna-warna yang membantu baca kode), dan ribuan extensions yang bisa dipasang sesuai kebutuhan. Yang terpenting — sekarang ada GitHub Copilot yang bisa bantu nulis kode langsung dari dalam Visual Studio Code. Vibes coding jadi makin mudah!

Setup Awal

Dari Install sampai Siap Coding

Ikuti langkah ini dan Visual Studio Code kamu sudah siap dipakai dalam 10 menit — lengkap dengan tampilan yang nyaman di mata.

1️⃣

Download & Install Visual Studio Code

Buka code.visualstudio.com → klik tombol Download → pilih sesuai sistem operasi (Windows/Mac/Linux). Install seperti biasa. Gratis, tidak ada biaya apapun.

2️⃣

Pasang Tema yang Nyaman di Mata

Klik ikon Extensions (kotak-kotak di sidebar kiri) → search "One Dark Pro" atau "Dracula" → Install. Tema gelap lebih nyaman untuk coding lama. Aktifkan via Ctrl+Shift+P → "Color Theme" → pilih tema.

3️⃣

Ganti Font ke Fira Code atau JetBrains Mono

Font khusus coding dengan "ligatures" (simbol gabungan seperti → dan ≤ yang lebih mudah dibaca). Download gratis di Google Fonts → install di komputer → di Visual Studio Code: Settings → Font Family → ketik nama font. Aktifkan ligatures: "editor.fontLigatures": true

4️⃣

Aktifkan Auto Save & Format on Save

File → Auto Save (centang) supaya kode tersimpan otomatis. Lalu Settings → cari "Format On Save" → centang. Kode kamu otomatis dirapikan setiap kali save — tidak perlu format manual lagi.

5️⃣

Buka Folder Proyek, Bukan File Satu-satu

File → Open Folder → pilih folder proyek kamu. Visual Studio Code akan tampilkan semua file proyek di sidebar kiri. Ini cara yang benar — bukan buka file satu per satu. Semua file proyek langsung terlihat dan mudah diakses.

⚡ Shortcut Paling Pertama yang Harus Dihafal

        Ctrl+Shift+P (Windows) atau Cmd+Shift+P (Mac) — ini "Command Palette", pintu masuk ke semua fitur Visual Studio Code. Ketik apa yang kamu mau lakukan dan Visual Studio Code akan temukan perintahnya. Hafal ini dulu sebelum shortcut lainnya!

Extensions

Extensions Wajib untuk Vibes Coder

Extensions adalah "aplikasi tambahan" di dalam Visual Studio Code yang memperluas kemampuannya. Ini yang wajib dipasang — terutama yang AI!

🧩 Productivity Extensions

✨

Prettier

Auto-format kode supaya rapi dan konsisten. Aktif saat save — kode berantakan langsung dirapikan otomatis.

🔧 Code Formatter

🔍

ESLint

Deteksi error dan masalah di kode JavaScript/TypeScript sebelum dijalankan. Garis merah = ada yang salah.

⚠️ Error Checker

🔮

GitLens

Lihat siapa yang edit baris kode, kapan, dan commit apa — langsung di dalam Visual Studio Code tanpa buka terminal.

🕰️ Git History

🌐

Live Server

Preview halaman HTML langsung di browser dengan auto-reload. Simpan file → browser langsung update otomatis.

⚡ Live Preview

🌈

indent-rainbow

Warnai indentasi kode dengan warna berbeda per level. Membantu banget baca kode yang banyak nested-nya.

👁️ Readability

🔗

Path Intellisense

Autocomplete path file saat nulis import atau link. Tidak perlu hafal struktur folder — ketik dan pilih dari saran.

📁 File Path

🤖 AI Extensions — Level Up Coding

🤖

GitHub Copilot

AI autocomplete kode dari GitHub & OpenAI. Tulis komentar apa yang mau dibuat → Copilot langsung sarankan kodenya. Berbayar tapi ada free tier.

⭐ Rekomendasi Utama

💬

GitHub Copilot Chat

Chat langsung dengan AI di dalam Visual Studio Code. Tanya pertanyaan, minta explain kode, atau debug error — tanpa keluar dari editor.

⭐ Wajib Pasang

✨

Gemini Code Assist

AI coding assistant dari Google. Alternatif Copilot yang gratis — cocok kalau sudah pakai ekosistem Google. Install via Extensions marketplace.

🆓 Gratis

💡

ChatGPT (Genie AI)

Akses ChatGPT langsung dari Visual Studio Code. Berguna sebagai alternatif atau pelengkap Copilot — cari "Genie AI" di Extensions marketplace.

🔄 Alternatif

🤖 Cara Pakai GitHub Copilot Chat

        Tekan Ctrl+Shift+I (Windows) atau Cmd+Shift+I (Mac) untuk buka Copilot Chat. Tanya langsung: "Jelaskan kode ini", "Kenapa ada error di baris 42?", atau "Buatkan fungsi untuk validasi email". Copilot Chat paham konteks kode yang sedang kamu buka — jawabannya langsung relevan!

Shortcuts & Tips

Kerja Lebih Cepat di Visual Studio Code

Tidak perlu hafal semua shortcut sekaligus — mulai dari 5 yang paling sering dipakai, sisanya akan mengikuti dengan sendirinya.

Aksi	Windows	Mac	Fungsi
Command Palette	Ctrl+Shift+P	Cmd+Shift+P	Akses semua fitur
Quick Open File	Ctrl+P	Cmd+P	Cari & buka file cepat
Terminal Baru	Ctrl+`	Cmd+`	Buka terminal langsung
Copilot Chat	Ctrl+Shift+I	Cmd+Shift+I	Chat dengan AI
Multi Cursor	Alt+Click	Opt+Click	Edit banyak baris sekaligus
Rename Symbol	F2	F2	Ganti nama variabel semua file
Format Document	Shift+Alt+F	Shift+Opt+F	Rapikan semua kode
Find & Replace	Ctrl+H	Cmd+H	Cari & ganti teks

✅Do This

Buka proyek sebagai folder — bukan file satu-satu
Pakai terminal bawaan Visual Studio Code — tidak perlu aplikasi terminal terpisah
Aktifkan Format on Save dari awal — kode selalu rapi
Tanya Copilot Chat kalau stuck — lebih cepat dari googling
Pakai Command Palette (Ctrl+Shift+P) untuk semua yang tidak tahu shortcut-nya
Install ekstensi satu per satu — test dulu sebelum tambah yang lain

❌Don't Do This

Install terlalu banyak extensions sekaligus — bikin Visual Studio Code lambat
Abaikan garis merah/kuning — itu peringatan penting dari ESLint
Edit kode langsung di file explorer tanpa buka Visual Studio Code
Lupa simpan file sebelum jalankan — aktifkan Auto Save!
Copas kode dari Copilot tanpa baca dulu — pahami dulu apa yang dipasang
Pakai font default — ganti ke font coding untuk kenyamanan lebih

1

Pakai Terminal Bawaan Visual Studio Code

Tekan Ctrl+` (backtick) untuk buka terminal langsung di dalam Visual Studio Code — tidak perlu buka aplikasi terminal terpisah. Di sinilah kamu jalankan perintah Git, npm, python, dan lainnya. Semua dalam satu jendela — lebih efisien dan tidak perlu alt-tab terus.

Terminal Visual Studio Code — Contoh perintah harian

# Jalankan proyek web
npm start

# Push ke GitHub
git add . && git commit -m "update" && git push

# Install package baru
npm install nama-package

⚡ Efisiensi

2

Gunakan Copilot Chat untuk Explain Kode

Blok kode yang tidak kamu mengerti → klik kanan → "Copilot: Explain This". Copilot akan jelaskan baris per baris dalam bahasa yang mudah dipahami. Ini cara belajar yang sangat efektif untuk vibes coder — kamu paham apa yang AI buatkan untukmu!

🤖 AI Learning

3

Multi Cursor — Edit Banyak Baris Sekaligus

Tahan Alt (Windows) atau Option (Mac) lalu klik di beberapa tempat — kamu punya banyak cursor sekaligus. Sangat berguna untuk ganti nama variabel di banyak baris, tambah karakter di posisi yang sama, atau hapus teks berulang. Sekali coba, tidak akan mau balik cara lama!

⚡ Power Feature

4

Settings Sync — Sinkronisasi Antar Device

Kalau kamu coding di lebih dari satu komputer, aktifkan Settings Sync di Visual Studio Code — semua extensions, tema, shortcut, dan pengaturan otomatis tersinkron. Login dengan akun GitHub di Visual Studio Code → Settings Sync → Turn On. Setup sekali, berlaku di semua device.

☁️ Multi Device

Disclaimer

Catatan Penting

Sebelum kamu mulai setup Visual Studio Code, ada beberapa hal yang perlu diketahui.

⚠️ Disclaimer

Tips dalam panduan ini berdasarkan pengalaman praktis menggunakan Visual Studio Code dan bukan panduan resmi dari Microsoft. Shortcut yang ditampilkan menggunakan default keyboard — bisa berbeda kalau kamu sudah kustomisasi keybinding di Visual Studio Code.

GitHub Copilot adalah layanan berbayar (ada free tier terbatas) — cek harga terkini di github.com/features/copilot. Gemini Code Assist saat ini gratis untuk penggunaan personal. Kebijakan harga bisa berubah sewaktu-waktu.

Visual Studio Code terus diupdate — tampilan dan lokasi menu mungkin sedikit berbeda di versi terbaru. Selalu cek code.visualstudio.com/docs untuk dokumentasi resmi dan fitur terbaru.

📋 Quick Reference

Download

🌐 code.visualstudio.com

Shortcut Utama

⌨️ Ctrl+Shift+P

AI Utama

🤖 GitHub Copilot Chat

Setup Pertama

✨ Prettier + Format on Save

Visual Studio Code,Senjata Utama Vibes Coder

Editor Kode Terpopuler di Dunia

Dari Install sampai Siap Coding

Extensions Wajib untuk Vibes Coder

Kerja Lebih Cepat di Visual Studio Code

Catatan Penting

Visual Studio Code,
Senjata Utama Vibes Coder