Lewati ke konten utama
Visual Studio Code

Persiapan Tools (VS Code)

Untuk menulis kode HTML, sebenarnya Anda hanya butuh aplikasi Notepad biasa. Namun, untuk efisiensi dan fitur modern, kita akan menggunakan Code Editor.

Mengapa VS Code?

Diagram Perbandingan VS Code, Sublime Text, WebStorm

Meskipun ada banyak editor lain seperti Sublime Text (ringan) atau WebStorm (berbayar & powerful), modul ini menggunakan Visual Studio Code (VS Code) karena:

  1. Gratis & Open Source
  2. Standar industri saat ini
  3. Ekosistem ekstensi yang sangat luas

Anda bisa mengunduhnya di:
👉 https://code.visualstudio.com


Ekstensi Wajib untuk Pemula

Setelah menginstal VS Code, sangat disarankan menginstal ekstensi berikut agar proses belajar lebih lancar:

1. Live Server

Logo Live Server
Diagram Alur Live Server

Ekstensi ini membuat server lokal sementara.

  • Fungsinya:
    Setiap kali Anda menyimpan file (Ctrl + S), browser akan otomatis me-refresh halaman.
  • Cara Pakai:
    Buka file HTML → klik kanan → Open with Live Server

2. Prettier – Code Formatter

Logo Prettier
Diagram Alur Prettier
  • Fungsinya:
    Merapikan kode secara otomatis saat file disimpan dan membantu membiasakan clean code.
Efek Prettier
Tips Produktivitas

Aktifkan Auto Save di VS Code (File > Auto Save) agar Anda tidak perlu menekan Ctrl + S terus-menerus.
Perlu dicatat, Live Server bisa melakukan refresh lebih sering jika Anda mengetik cukup lambat.