Advan – Visual Studio Code (VS Code) adalah editor kode yang sangat populer di kalangan pengembang web. Salah satu fitur yang paling berguna adalah menggunakan Live Server, yang memungkinkan kamu untuk melihat perubahan pada kode secara langsung di browser tanpa perlu me-refresh secara manual. Ini sangat mempermudah proses pengembangan dan debugging.
Live Server adalah ekstensi yang sangat mudah digunakan dan sangat membantu dalam meningkatkan produktivitas kamu sebagai pengembang web. Dengan Live Server, setiap perubahan yang kamu buat pada file HTML, CSS, atau JavaScript akan langsung terlihat di browser. Ini memungkinkan kamu untuk menguji dan melihat hasil perubahan secara real-time.
Berikut adalah langkah-langkah untuk menggunakan Live Server di Visual Studio Code:
1. Instal Visual Studio Code
Langkah pertama adalah memastikan bahwa kamu telah menginstal Visual Studio Code di komputer kamu. Kamu bisa mengunduhnya dari situs resmi Visual Studio Code dan mengikuti petunjuk instalasi yang disediakan.
2. Instal Ekstensi Live Server
Buka VS Code dan pergi ke panel “Extensions” di sidebar kiri. Cari “Live Server” di kolom pencarian, lalu klik “Install” pada ekstensi Live Server yang muncul. Setelah selesai, ekstensi akan otomatis terinstal di VS Code kamu.
3. Buka Proyek Web Kamu
Buka proyek web yang sedang kamu kerjakan atau buat proyek baru. Kamu bisa membuka folder proyek dengan memilih “File” > “Open Folder” dan memilih folder proyek kamu.
4. Mulai Live Server
Setelah proyek terbuka, klik kanan pada file HTML yang ingin kamu jalankan dengan Live Server dan pilih “Open with Live Server”. Browser akan terbuka dan menampilkan halaman HTML kamu secara otomatis.
5. Lihat Perubahan Secara Real-Time
Setiap kali kamu menyimpan perubahan pada file HTML, CSS, atau JavaScript, Live Server akan secara otomatis memperbarui halaman di browser. Kamu tidak perlu me-refresh browser secara manual.
Baca Juga: Cara Membuat Footer dengan Video Background di Elementor
6. Menghentikan Live Server
Untuk menghentikan Live Server, kamu bisa menutup browser atau kembali ke VS Code dan klik ikon “Port” di status bar bawah lalu pilih “Stop Live Server”. Ini akan menghentikan server dan menutup koneksi ke browser.
7. Mengatur Pengaturan Live Server
Kamu bisa mengubah pengaturan Live Server sesuai dengan kebutuhan kamu. Pergi ke “File” > “Preferences” > “Settings” dan cari “Live Server”. Kamu bisa mengatur port, default browser, dan opsi lainnya.
8. Debugging dengan Live Server
Live Server juga memungkinkan kamu untuk melakukan debugging secara real-time. Kamu bisa membuka alat pengembang di browser (biasanya dengan menekan `F12` atau `Ctrl + Shift + I`) untuk melihat console log, memeriksa elemen, dan melakukan debugging JavaScript.
9. Menggunakan Live Reload
Live Server mendukung fitur Live Reload, yang memungkinkan halaman untuk otomatis dimuat ulang ketika ada perubahan pada file. Ini sangat membantu ketika kamu mengedit file CSS atau JavaScript.
10. Menyinkronkan dengan Git
Jika kamu menggunakan Git untuk kontrol versi, Live Server dapat bekerja bersamaan tanpa masalah. Kamu bisa membuat commit, push, dan pull perubahan sambil tetap menjalankan Live Server.
Baca Juga: Cara Menggunakan Visual Studio Code untuk JavaScript
Menggunakan Live Server di Visual Studio Code adalah cara yang efektif untuk meningkatkan produktivitas dan efisiensi dalam pengembangan web. Dengan fitur real-time reload dan debugging, kamu bisa melihat perubahan secara langsung dan memperbaiki kesalahan dengan cepat.
Untuk mendukung produktivitas kamu dalam pengembangan web dengan Visual Studio Code dan Live Server, Advan 360 stylus 2in1 adalah pilihan yang ideal. Laptop ini dilengkapi dengan prosesor Intel Core i3 dan RAM 8GB, memastikan performa optimal untuk berbagai tugas pengembangan. Layar FHD 14 inci yang jernih memastikan tampilan yang akurat, dan desainnya yang ringan serta portabel memungkinkan kamu bekerja di mana saja dengan mudah. Pilih Advan 360 untuk meningkatkan efisiensi dan produktivitas kerjamu.***
Editor: Mahfida Ustadhatul Umma