🎯 Tujuan

Panduan ini bertujuan untuk memudahkan pengembangan proyek yang melibatkan coding dengan menggunakan Visual Studio Code (VSCode), code editor yang ringan, mudah digunakan, dan didukung oleh berbagai fitur serta ekstensi yang meningkatkan efisiensi.

⏰ Konteks

VSCode adalah code editor yang populer karena fleksibilitasnya dalam mendukung berbagai bahasa pemrograman dan tool melalui extensions. Fitur snippets mempercepat penulisan kode, sementara ribuan extensions memudahkan pekerjaan pengembangan.

🪵 Hal yang Diperlukan

1. Visual Studio Code (VS Code)

📋 Langkah-Langkah

1. Menjelajahi dan Mengunduh Ekstensi

   • Buka VSCode dan klik ikon Extensions di sidebar kiri.
   • Cari dan unduh ekstensi berikut untuk mempermudah pengembangan:
     • Live Server: Memperbarui halaman secara otomatis saat menyimpan kode.
     • HTML Snippets: Mempercepat penulisan kode HTML.
     • CSS Peek: Melihat definisi CSS langsung di editor.
     • Emmet: Mempermudah penulisan HTML/CSS dengan shortcut.
     • Prettier: Otomatisasi format kode untuk konsistensi.
     • Auto Close Tag dan Auto Rename Tag: Menutup dan mengganti nama tag HTML secara otomatis.

2. Membuat Folder Proyek

   • Buat folder baru di file manager.
   • Buka VSCode, klik File > Open Folder, dan arahkan ke folder yang baru saja dibuat.

3. Membuat File HTML

   • Klik ikon New File di sidebar kiri, buat file bernama index.html.
   • Ketik kode berikut untuk menampilkan tulisan "Hello World":

   <h1>Hello World</h1>
   

   • Jalankan ekstensi Live Server dengan mengklik Go Live di pojok kanan bawah untuk melihat hasilnya di browser.

Setiap perubahan yang disimpan akan langsung muncul di browser secara otomatis.

Kesimpulan

Kesimpulan dari tutorial penggunaan Visual Studio Code (VSCode) adalah sebagai berikut:

1. Instalasi dan Penggunaan Ekstensi: Kamu telah berhasil mengunduh dan memasang beberapa ekstensi penting, seperti Live Server, HTML Snippets, dan Prettier, yang membantu mempercepat dan mempermudah proses pengembangan kode.
2. Pembuatan dan Pengujian Kode HTML: Kamu sudah bisa membuat file HTML sederhana dan menampilkan hasilnya di browser menggunakan Live Server, yang secara otomatis memperbarui tampilan setiap kali ada perubahan kode.
3. Eksplorasi VSCode: Kamu telah mulai mengeksplorasi berbagai fitur dan ekstensi yang ada di VSCode, yang dapat meningkatkan efisiensi dalam penulisan kode dan pengembangan proyek.

Dengan demikian, kamu sekarang lebih familiar dengan VSCode dan siap menggunakannya dalam proyek pengembangan selanjutnya.