Cara Install Visual Studio Code Lengkap untuk Pemula

Jika sedang belajar HTML, CSS, atau bahasa pemrograman lainnya, kita membutuhkan editor kode untuk menulis dan mengelola file program. Salah satu editor yang banyak digunakan untuk kebutuhan tersebut adalah Visual Studio Code (VS Code).

Visual Studio Code merupakan code editor gratis dan open source yang dikembangkan oleh Microsoft. VS Code tersedia untuk Windows, macOS, dan Linux serta menyediakan berbagai fitur seperti syntax highlighting, IntelliSense, debugging, integrasi Git, terminal, dan extension untuk menambah kemampuan editor.

Untuk tutorial HTML dalam seri ini, kita akan menggunakan VS Code sebagai editor. Pada artikel ini, kita akan membahas cara install Visual Studio Code di Windows dan beberapa pengaturan tambahan yang berguna untuk pemula.

💻 Persiapan Sebelum Install VS Code

Sebelum memulai instalasi, pastikan komputer yang digunakan memenuhi kebutuhan dasar VS Code.

VS Code dirancang sebagai code editor yang relatif ringan. Dokumentasi resminya mencantumkan rekomendasi minimal berupa prosesor 1,6 GHz atau lebih cepat dan RAM 1 GB. Dukungan Windows saat ini ditujukan untuk versi Windows client 64-bit yang didukung.

Jika tujuan kita hanya belajar HTML dan CSS, spesifikasi komputer modern pada umumnya sudah lebih dari cukup untuk menjalankan VS Code.

📥 Langkah 1 — Download Visual Studio Code

Download VS Code melalui situs resmi Visual Studio Code agar mendapatkan installer yang sesuai dan aman.

Kunjungi halaman download Visual Studio Code →

Untuk pengguna Windows, VS Code menyediakan beberapa pilihan instalasi. Untuk kebanyakan pengguna, User Setup merupakan pilihan yang paling praktis karena instalasinya dilakukan untuk akun Windows yang sedang digunakan dan tidak membutuhkan hak administrator.

💡 Rekomendasi untuk pemula: Gunakan Windows User Setup kecuali ada kebutuhan khusus untuk memasang VS Code untuk seluruh pengguna komputer.

⚙️ Langkah 2 — Jalankan Installer VS Code

Setelah file installer selesai diunduh, buka file tersebut. Nama file biasanya memiliki format seperti:

VSCodeUserSetup-{version}.exe

Jalankan installer tersebut, kemudian ikuti petunjuk instalasi yang muncul di layar.

Pada proses instalasi, Anda akan diminta menyetujui License Agreement. Pilih opsi persetujuan, kemudian lanjutkan dengan tombol Next.

📂 Langkah 3 — Pilih Lokasi Instalasi

Installer akan menawarkan lokasi instalasi untuk VS Code.

Jika tidak memiliki kebutuhan khusus, Anda dapat menggunakan lokasi bawaan yang diberikan installer dan melanjutkan proses instalasi.

Pada User Setup, lokasi default VS Code berada di dalam folder AppData milik akun Windows yang sedang digunakan.

🛠️ Langkah 4 — Pilih Additional Tasks

Pada beberapa versi installer Windows, Anda dapat menemukan halaman Select Additional Tasks.

Beberapa pilihan yang mungkin tersedia antara lain:

Create a desktop icon — membuat shortcut VS Code di desktop.
Add "Open with Code" to Windows Explorer context menu — menambahkan pilihan untuk membuka file atau folder menggunakan VS Code dari menu klik kanan.
Register Code as an editor for supported file types — mengaitkan VS Code dengan jenis file tertentu yang didukung.

Pilihan yang tersedia dapat berbeda tergantung jenis installer dan versi VS Code yang digunakan. Karena itu, tidak perlu memaksakan semua opsi harus dicentang.

Bagaimana dengan Add to PATH?

Jika menggunakan Windows User Setup, installer VS Code secara otomatis menambahkan perintah code ke environment variable PATH. Setelah instalasi selesai, terminal perlu dibuka kembali agar perubahan tersebut terbaca.

Dengan begitu, kita dapat membuka folder project langsung dari Command Prompt atau terminal menggunakan:

code .

Perintah tersebut akan membuka folder yang sedang aktif sebagai project di VS Code.

🚀 Langkah 5 — Install Visual Studio Code

Setelah pengaturan selesai, klik Next dan lanjutkan dengan tombol Install.

Tunggu sampai proses instalasi selesai.

Setelah proses selesai, klik Finish. Jika tersedia pilihan untuk langsung menjalankan VS Code, Anda dapat mencentangnya agar aplikasi langsung terbuka.

Sampai tahap ini, VS Code sudah siap digunakan.

🧪 Langkah 6 — Coba Buka VS Code

Saat pertama kali membuka VS Code, Anda akan melihat editor dengan beberapa bagian utama seperti Explorer, area editor, Activity Bar, dan bagian lainnya.

Untuk mulai belajar HTML, kita tidak perlu mengubah banyak pengaturan terlebih dahulu.

Kita dapat langsung membuat sebuah folder project dan membukanya menggunakan VS Code.

Misalnya:

belajar-html/
└── index.html

Kemudian buka folder belajar-html tersebut menggunakan VS Code.

Dengan bekerja menggunakan folder project, file HTML, CSS, gambar, dan file lainnya dapat dikelola dalam satu tempat.

🧩 Extension VS Code yang Berguna untuk Belajar HTML

Salah satu kelebihan VS Code adalah adanya extension. Extension merupakan pengaya yang dapat menambahkan kemampuan tertentu ke dalam editor.

Namun, perlu diketahui bahwa extension tidak wajib dipasang agar VS Code dapat digunakan untuk belajar HTML. VS Code sudah menyediakan berbagai fitur bawaan untuk membantu proses editing.

Jika ingin menambah kenyamanan saat belajar HTML dan CSS, beberapa extension berikut dapat dipertimbangkan.

1. Live Server

Live Server dapat menjalankan local development server untuk project web dan menyediakan fitur live reload. Extension ini berguna ketika kita ingin melihat perubahan halaman HTML dengan lebih cepat saat melakukan pengembangan.

Contoh alur penggunaannya:

Buka folder project di VS Code.
Buka file HTML.
Jalankan Live Server.
Halaman akan dibuka melalui server lokal.
Saat file disimpan, browser dapat melakukan reload secara otomatis.

Extension ini sangat berguna untuk latihan HTML dan CSS, tetapi bukan merupakan komponen wajib VS Code.

2. Auto Rename Tag

Auto Rename Tag dapat membantu ketika kita bekerja dengan tag HTML atau XML yang memiliki pasangan tag pembuka dan penutup.

Misalnya kita memiliki:

<h1>Belajar HTML</h1>

Ketika nama tag pasangan diubah, extension ini dapat membantu menyesuaikan pasangan tag tersebut secara otomatis.

Extension ini berguna terutama ketika mulai bekerja dengan dokumen HTML yang lebih panjang.

3. Material Icon Theme

Material Icon Theme bukan extension untuk menjalankan atau menulis HTML. Extension ini digunakan untuk mengubah tampilan ikon file dan folder di Explorer VS Code.

Dengan extension tersebut, jenis file seperti HTML, CSS, JavaScript, dan berbagai jenis file lainnya dapat memiliki ikon yang berbeda sehingga lebih mudah dikenali.

Extension ini sepenuhnya bersifat opsional dan lebih berkaitan dengan kenyamanan visual.

📝 Apakah Harus Install Banyak Extension?

Tidak.

Ini merupakan hal penting terutama bagi pemula. Jangan merasa harus memasang puluhan extension hanya karena melihat rekomendasi dari tutorial atau developer lain.

Pasang extension ketika memang membutuhkan fitur tertentu.

Untuk belajar HTML dasar, VS Code tanpa extension tambahan pun sudah dapat digunakan untuk:

Membuat file HTML.
Menulis dan mengedit kode.
Mendapatkan syntax highlighting.
Menggunakan fitur bantuan penulisan kode.
Mengelola file dan folder project.

Setelah kebutuhan kita berkembang, barulah extension tambahan dapat dipasang sesuai kebutuhan.

⌨️ Bonus — Membuka Project dengan Terminal

Jika perintah code sudah tersedia di PATH, kita dapat membuka folder project langsung dari terminal.

Misalnya kita memiliki folder:

D:\belajar-html

Buka Command Prompt atau terminal, kemudian masuk ke folder tersebut:

cd D:\belajar-html

Setelah itu jalankan:

code .

VS Code akan membuka folder tersebut sebagai workspace.

Cara ini akan sangat berguna ketika nanti kita mulai bekerja dengan project yang lebih kompleks.

🔄 Apakah VS Code Perlu Di-update?

Ya. VS Code memiliki rilis Stable yang diperbarui secara berkala dan mendukung pembaruan otomatis. Karena itu, sebaiknya gunakan versi terbaru yang kompatibel dengan sistem operasi dan kebutuhan project Anda.

Anda dapat melihat versi VS Code yang sedang digunakan melalui menu:

Help → About

Informasi versi juga berguna ketika mencari solusi terhadap masalah tertentu karena beberapa fitur atau extension dapat bergantung pada versi VS Code yang digunakan.

⚠️ Jika VS Code Tidak Bisa Di-install

Jika installer mengalami masalah, beberapa langkah yang dapat dicoba antara lain:

Pastikan installer diunduh dari website resmi VS Code.
Pastikan Windows yang digunakan memenuhi versi yang didukung.
Coba jalankan installer kembali.
Jika User Setup mengalami masalah, pertimbangkan System Setup jika memang membutuhkan instalasi untuk seluruh pengguna.
Gunakan versi ZIP jika membutuhkan instalasi tanpa installer. Namun, versi ZIP tidak memiliki pembaruan otomatis seperti instalasi biasa.

📚 Kesimpulan

Visual Studio Code merupakan code editor yang dapat digunakan untuk belajar HTML, CSS, JavaScript, Python, dan berbagai bahasa pemrograman lainnya.

Untuk pengguna Windows, cara paling sederhana adalah menggunakan User Setup, mengikuti proses instalasi, kemudian langsung membuka folder project di VS Code.

Extension seperti Live Server, Auto Rename Tag, dan Material Icon Theme dapat membantu meningkatkan kenyamanan saat belajar, tetapi semuanya bersifat opsional.

Yang paling penting bukan seberapa banyak extension yang terpasang, melainkan memahami cara menggunakan editor dan mulai membuat project secara langsung.

🎯 Editor Sudah Siap, Sekarang Mulai HTML

Setelah VS Code terpasang, sekarang saatnya membuat dokumen HTML pertama dan memahami struktur dasar sebuah halaman web.

Lanjut ke Tutorial HTML #1: Dasar HTML →

Ramdanifikri.id