Day 86 : Tips install live server di vscode

pada tanggal

Hari ini, saya sedang menikmati waktu belajar Kubernetes melalui video di YouTube. Namun, saat saya menjelajahi beberapa video lain, saya menemukan satu yang sangat menarik. Judulnya adalah ASMR Programming Tanpa berpikir panjang, saya langsung memutuskan untuk menontonnya dan mencoba mengikuti langkah-langkahnya.

Selama menonton, saya mengikuti setiap instruksi dengan hati-hati, mulai dari menulis kode HTML untuk mendesain tampilan game, hingga menambahkan logika JavaScript untuk membuat game berjalan. Setelah selesai menulis beberapa baris kode, saya ingin segera melihat hasilnya di browser. Namun, begitu saya mengklik kanan pada file HTML dan mencoba memilih opsi untuk membuka dengan browser, saya merasa ada yang aneh. Ternyata, saya tidak melihat opsi untuk membuka file dengan live server.

Setelah sedikit berpikir, saya baru sadar bahwa saya belum menginstal Live Server di editor kode saya. Live Server adalah ekstensi di Visual Studio Code yang memungkinkan kita untuk melihat perubahan yang terjadi pada file HTML secara langsung di browser tanpa harus me-refresh secara manual. Hal ini sangat mempermudah dalam pengembangan web, terutama saat kita bekerja dengan kode yang membutuhkan banyak percobaan dan perubahan cepat.



Langkah 1: Instalasi Live Server

  1. Buka Visual Studio Code di komputer Anda.
  2. Pada panel sebelah kiri, cari dan klik Extensions (ikon kotak dengan empat bagian).
  3. Di kolom pencarian, ketik Live Server.
  4. Pilih ekstensi yang bernama Live Server yang dikembangkan oleh Ritwick Dey.
  5. Klik tombol Install untuk memasang ekstensi ini.

Langkah 2: Menggunakan Live Server

  1. Setelah berhasil menginstal, buka file HTML yang ingin Anda lihat di browser.
  2. Klik kanan pada file HTML dan pilih Open with Live Server.
  3. Browser akan terbuka otomatis menampilkan hasil kerja Anda. Setiap kali Anda mengubah dan menyimpan file, browser akan langsung menampilkan perubahan terbaru tanpa perlu me-refresh manual.

Langkah 3: Nikmati Pengalaman Coding yang Lebih Mudah

Dengan Live Server terpasang, sekarang Anda bisa lebih fokus pada penulisan kode tanpa perlu khawatir tentang proses manual yang memakan waktu. Selain itu, ekstensi ini juga membantu Anda melihat kesalahan secara langsung, sehingga Anda bisa segera memperbaikinya.

Dari pengalaman saya hari ini, saya belajar bahwa meskipun terkadang kita merasa bingung dengan masalah teknis yang muncul, selalu ada cara mudah untuk mengatasinya. Dengan sedikit riset dan mengikuti langkah-langkah yang tepat, kita bisa terus maju dan menyelesaikan tugas dengan lebih efisien.

Saya harap langkah-langkah di atas bisa membantu teman-teman yang juga sedang belajar membuat aplikasi web atau game sederhana dengan HTML, CSS, dan JavaScript. Selamat mencoba dan semoga berhasil!

Komentar

Posting Komentar