Cara Install VS Code dan Extension Wajib untuk Ngoding

Visual Studio Code (VS Code) adalah salah satu code editor paling populer di kalangan developer, mulai dari pemula sampai profesional. Selain gratis, ringan, dan mendukung hampir semua bahasa pemrograman, VS Code juga punya ribuan extension yang bisa bikin workflow ngoding kamu jadi jauh lebih cepat dan nyaman.

Di artikel ini, kita akan bahas step by step cara install VS Code di berbagai sistem operasi, plus rekomendasi extension wajib yang sebaiknya kamu pasang sejak awal.

Apa Itu VS Code?

VS Code adalah source code editor buatan Microsoft yang dirilis pertama kali tahun 2015. Editor ini mendukung fitur seperti syntax highlighting, IntelliSense (auto-complete cerdas), debugging bawaan, integrasi Git, dan terminal langsung di dalam editor. Karena sifatnya open source dan bisa di-custom dengan extension, VS Code cocok dipakai untuk berbagai kebutuhan: web development, mobile development, data science, sampai DevOps.

Ok, ini tatacara install VS Code

Install VS Code di Windows

Buka https://code.visualstudio.com
ombol Download for Windows
Setelah file .exe selesai diunduh, jalankan installer-nya
Centang opsi berikut agar lebih memudahkan:
- Add to PATH (supaya bisa buka VS Code lewat terminal dengan perintah code)
- Add "Open with Code" action ke menu klik kanan file dan folder
Klik Next sampai selesai, lalu klik Install
Setelah instalasi selesai, buka VS Code dari Start Menu

Install VS Code di macOS

Buka https://code.visualstudio.com dan download versi macOS
Ekstrak file .zip yang terunduh
Drag file Visual Studio Code.app ke folder Applications
Buka Spotlight (Cmd + Space), ketik "Visual Studio Code", lalu buka
Agar bisa diakses lewat terminal, tekan Cmd + Shift + P ketik Shell Command: Install 'code' command in PATH, lalu jalankan

Install VS Code di Linux (Ubuntu/Debian)

Bash

sudo apt update
sudo apt install software-properties-common apt-transport-https wget -y
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code -y

Setelah proses instalasi selesai, jalankan VS Code dengan mengetik code di terminal.

Setting Awal Setelah Install

Sebelum lanjut ke extension, ada beberapa pengaturan dasar yang enak dilakukan di awal:

Ganti tema: Ctrl/Cmd + K lalu Ctrl/Cmd + T untuk memilih color theme
Atur font ngoding: buka Settings (Ctrl/Cmd + ,) cari Font Family, isi dengan font monospace seperti Fira Code atau JetBrains Mono
Aktifkan Auto Save: menu File > Auto Save, biar file otomatis tersimpan tanpa perlu Ctrl + S terus-menerus

Extension Wajib untuk Ngoding

Berikut extension yang direkomendasikan untuk hampir semua developer, tidak peduli bahasa pemrograman apa yang dipakai.

1. Prettier - Code Formatter

Merapikan format kode secara otomatis (indentasi, spasi, tanda kutip) sesuai standar yang konsisten. Sangat membantu terutama saat kerja tim.

2. ESLint

Mendeteksi error dan potensi bug pada kode JavaScript/TypeScript secara real-time, sekaligus memastikan kode mengikuti best practice.

3. GitLens

Menambahkan informasi Git langsung di editor, seperti siapa yang terakhir mengubah baris kode tertentu (blame), history commit, dan perbandingan branch.

4. Live Server

Menjalankan local server dengan fitur auto-reload untuk project HTML/CSS/JS, sangat berguna saat belajar atau membangun website statis.

5. Auto Rename Tag

Otomatis mengubah tag pasangan (opening/closing) saat salah satu tag HTML/JSX diedit, jadi tidak perlu ubah manual satu-satu.

6. Path Intellisense

Memberikan auto-complete untuk path file saat melakukan import, sehingga meminimalkan typo path yang sering bikin error.

7. Indent Rainbow

Memberi warna berbeda pada setiap level indentasi, membantu membaca struktur kode yang bersarang (nested) dengan lebih mudah.

8. Material Icon Theme

Menambahkan ikon berwarna untuk setiap jenis file dan folder di sidebar, sehingga file explorer lebih mudah dibaca sekilas.

9. Bracket Pair Colorizer (built-in di VS Code terbaru)

Mewarnai pasangan kurung/bracket yang berbeda-beda, memudahkan menelusuri kode dengan banyak nested bracket.

10. Code Runner

Menjalankan potongan kode dari berbagai bahasa pemrograman langsung di dalam VS Code tanpa perlu setup konfigurasi rumit, cocok untuk latihan cepat.

Cara Install Extension di VS Code
Klik ikon Extensions di sidebar kiri (ikon kotak-kotak) atau tekan Ctrl/Cmd + Shift + X
Ketik nama extension yang diinginkan di kolom pencarian
Klik tombol Install pada extension yang dipilih
Beberapa extension memerlukan Reload window setelah instalasi, klik saja tombol yang muncul

Dengan VS Code dan extension yang tepat, proses ngoding jadi jauh lebih efisien: kode lebih rapi, error lebih cepat terdeteksi, dan navigasi antar file lebih mudah. Tidak perlu install semua extension sekaligus, mulai dari beberapa yang paling relevan dengan bahasa pemrograman atau framework yang sedang kamu pelajari, lalu tambahkan sesuai kebutuhan.