Visual Studio Code merupakan salah satu perangkat lunak text editor yang dapat digunakan untuk menulis baris kode bahasa pemrograman seperti html, css, java script, java, php, dll. dengan cukup banyak dukungan melalui extensi yang dapat diinstal untuk membantu mempermudah dan mempercepat penulisan baris kode program. Ada salah satu ekstensi yang cukup penting bagi seorang programmer dalam menulis baris kode program yaitu ekstensi Live Server. Dengan ekstensi Live Server, baris kode yang ditulis oleh programmer khususnya yang berbasis web dapat langsung dilihat outputnya (hasilnya) melalui browser tanpa harus mereload/merefresh halaman baik untuk halaman statis ataupun dinamis.
Pertama, untuk menginstal ekstensi Live Server tentunya harus membuka program Visual Studio Code dan terkoneksi ke internet.
Kedua, setelah jendela Visual Studio Code terbuka, klik icon Extentions, lalu pada kolom Serch Extensions ketik Live Server.
Ketiga, klik Live Server dari daftar Extensions, lalu klik tombol Install, tunggu hingga proses selesai seperti gambar di bawah ini:
Keempat, sebelum menjalankan Live Server, buat folder dan file html baru. Tapi sebelumnya klik icon Explorer, lalu Close halaman Extension: Live Server. Buat folder baru, beri nama misalnya latihan, lalu buka folder tersebut, kemudian ketik nama file misalnya latihan1.html lalu klik tombol Save.
Kelima, untuk menjalankan Live Server klik icon Go Live di pojok kanan bawah jendela program Visual Studio Code. Tunggu hingga jendela browser terbuka, lalu gunakan minimize dan drop & drag aplikasi Visual Studio Code dan browser untuk mengatur posisi, seperti gambar di bawah ini:
Keenam, Untuk menyembunyikan Side Bar tekan Ctrl+B pada keyboard, lalu agar otomatis menyimpan setiap perubahan dan menampilkannya pada browser, klik menu File kemudian klik Auto Save.
Bagaimana dengan baris kode server side seperti PHP, .NET ataupun NODEJS? Tidak masalah, tapi perlu ditambahkan Live Server Web Extention pada browsernya khususnya untuk Google Chrome buka dan install add-on berikut https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/ lalu kalau untuk Firefox buka dan install add-on berikut https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/
Klik icon Live Server di toolbar browser, lalu aktifkan Live Reload, ceklis I don’t want proxy setup, Actual server address isi dengan http://localhost/ dan Live Server Address isi dengan http://127.0.0.1:5500/ lalu klik tombol Apply
Buat file baru di Visual Studio Code, misalnya buat folder dengan nama coba pada webserver yang Anda gunakan bisa WAMPServer, XAMPP atau lainnya, lalu ketik baris kode di bawah ini, kemudian simpan dengan nama tes.php
<?php echo"Apa Kabar?<br>"; ?>
Selanjutnya klik icon Go Live di pojok kanan bawah, tunggu hingga browser tampil, lalu atur posisinya. Pada address bar hapus URL http://127.0.0.1:5500/ diganti dengan URL webserver tempat dimana folder coba dan file tes.php berada seperti http://localhost/coba/tes.php lalu enter. Kemudian kembali Visual Studio Code, agar otomatis menyimpan dan menampilkannya pada browser klik menu File klik Auto Save . Lakukan perubahan pada file tes.php dan perhatikan perubahannya pada browser.
<?php echo"Apa Kabar?<br>"; echo"Bagaimana, ada kesulitan?"; ?>