Halo sobat Udacoding dimanapun kalian berada, mungkin sobat udacoding tidak asing lagi dengan XAMPP untuk running sebuah server local, XAMPP biasa disandingkan dengan Sublime text saat kita membuat project sederhana dalam Web Development.
Namun kali ini kali ini kita masih membahas lagi tentang Visual Studio Code. Dengan pembahasan kita lebih mengerucut, yaitu tentang Live Server. Apa sih itu Live Server? Apa sih manfaat dari Live Server? Dan bagaimana cara konfigurasinya? Yuk sama sama kita bahas kali ini.
Live server adalah plugin terpisah yang harus di download dalam visual studio code, yang memungkinkan kita untuk run hasil kode kita secara instan, dan tidak perlu reload web browsernya. Lalu bagaimana konfigurasinya, yuk simak langkah berikut ini:
1. Pastikan sobat udacoding telah menginstall browser dan visual studio code pada laptop atau komputer yang sobat gunakan. Bagi yang belum download silahkan klik link dibawah ini:
Browser Chrome: klik disini, ukuran download: 1,2 MB
Visual Studio Code: klik disini, ukuran download: 59,99 MB
2. Setelah menginstall, buka VS Code (Visual Studio Code) sobat, dan pilih menu plugin. dan perhatikan kolom Search Extensions in Marketplace.
3. Pastikan koneksi internet dalam keadaan stabil, lalu search plugin pada kolom yang bertuliskan search extension in marketplace dan ketikkan Live Server.
4. Di dalamnya terdapat banyak pilihan live server, namun untuk tutorial kali ini kita menggunakan contoh seperti gambar dibawah ini:
5. Klik install, dan tunggu sampai selesai.
Penting: Setelah selesai silahkan restart VS Code sobat, dengan cara; close VS Code-nya > lalu buka lagi untuk memastikan live server terinstal dengan baik.
6. Penting: Buat folder baru/ pastikan kode sobat sudah berada dalam folder. Karna plugin live server memerlukan lokasi folder html sobat untuk dapat mengakses file. Seperti contoh dibawah kita klik File > Open Folder
7. Klik New folder > ketikkan nama folder Udacoding > klik Enter > lalu pilih folder bernama Udacoding.
8. Live Server sobat telah siap digunakan. Untuk testing , mari kita buat new file dengan cara klik New File > lalu beri nama index.html > lalu klik Enter.
9. Buka file tersebut, dan ketikkan html:5 > pilih pilihan itu > lalu klik tab. dan otomatis file html5 akan langsung terbuat.
10. Buatlah sebuah tag <h1> dan tag <p> dibagian <body> seperti gambar dibawah ini.
Penting: Jangan lupa untuk tekan CTRL + S, setiap kali selesai melakukan perubahan untuk menyimpannya.
11. Setelah selesai. silahkan klik Live Server pada VS Code sobat, dan tunggu beberapa saat.
12. Maka otomatis browser akan terbuka. silahkan minimize dulu browsernya.
13. Cobalah melakukan perubahan pada tag <p> seperti gambar dibawah ini. Lalu tekan CTRL + S untuk menyimpan perubahan.
14. Lalu buka browser yang tidak kita tutup tadi, dan lihatlah! perubahan telah disimpan otomatis.
Bagaimana? cukup memudahkan kita dan membuat proses development– menjadi lebih produktif bukan?
Jangan lupa share ilmu ini teman- teman kalian jika bermanfaat. Dan jangan lupa stay tune terus ya, agar tidak ketinggalan info menarik seputar pemrograman. Sampai jumpa!
[…] Halo sobat? apa kabar? kali ini kita akan membahas tentang CSS Float dalam Web Development. Software yang akan kita gunakan kali ini adalah visual studio code di visual studio code. Pastikan sobat sudah mengikuti blog sebelumnya ya tentang live server. […]
Comments are closed.