Cara Memasang Plugin Livereload Sublime Text 3

Suka menulis kode program dengan aplikasi text editor? yang mana yang kalian suka? VScode? Sublime text 3? atau Notepad++?.

Menulis program dilakukan untuk membuat suatu perhitungan atau pekerjaan yang sesuai keinginan dari si pembuat programnya. Dalam dunia pemrogrammab banyak text editor yang bisa kalian pakai seperti, sublime text 3, VScode, Notepad++, Atom dan sebagainya.

Hal yang penting dalam sebuah text editor adalah sebuah plugin atau extension yang bisa ditambahkan sesuai kebutuhan untuk membuat kamu lebih mudah menulis kode-kode program.

Setiap text editor memiliki plugin yang pasti sangat membantu menulis kode anda, diantaranya dengan Sublime Text 3 anda bisa menginstall plugin Emmet, Colorpicker, Minify,Livereload, Sublime Linter, hingga Snippets yang membuat menulis makin singkat.

Dari sekian banyaknya plugin sublime text 3 ini ada satu yang menjadi perhatianku. LiveReload.

Tahukah kamu apa fungsi livereload pada sublime text 3?

1. Fungsi Plugin Livereload

Livereload merupakan plugin tambahan yang dibuat oleh alepez. Plugin ini sangat membantu untuk melihat secara Langsung kode program yang sedang dibuat.

Fungsi dari plugin Livereload pada sublime digunakan untuk kebutuhan eksekusi langsung program yang dibuat secara realtime, misalnya kode HTML, CSS, Javascript yang bisa berjalan dibrowser.

Dengan livereload ini kalian bisa menghemat waktu seperti, kalian tidak perlu reload browser saat ingin melakukan pengecekan file hasil coding.

Baca :Website belajar coding program

2. Cara pasang Livereload.

Untuk melakukan installasi plugin livereload pada sublime, kalian wajib sudah instal plugin bPackage Control. Karena disini saya hanya memberikan tutorial install palugin livereload melalui Package Control.

Sebelum melakukan installasi plugin perlu diperhatikan bahwa disini kita akan menginstall plugin livereload pada browser juga agar sinkron kode yang ditulis di ST dan browser sama.

Baca : Membuat program Hide Folder pada window

a. Cara install plugin sublime text livereload

1. Buka aplikasi Sublime text 3 kalian.
2. Akses Package Control dengan menekan CTRL + SHIFT + P atau melalui Preferences > Package Control.
3. Tuliskan Package Control: Install Package.

4. Jika sudah terbuka kota pencarian seperti dibawah kalian cari Livereload dan klik untuk menginstallnya.
5. Tunggu proses installasi sampai selesai.

6. Jika sudah selesai akan muncul tab baru yang berisi pesan dari Package Control Messages.
7. Selanjutnya cek apakah sudah terinstall pluginnya dengan cara Preferences > Package Setting, dan lihat apakah ada plugin livereload, atau kalian juga bisa cek dengan CTRL + SHIFT + P > Package Control: List Package.

8. Selanjutnya kalian hapus kode pada setting default dan ganti dengan kode dibawah ini. Akses setting default melalui Preferences > Package Setting > Livereload > Setting Default.

          { 
            "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
            ]
         }
      


9. Simpan. DONE.

Nah sampai sini kalian telah berhasil install plugin livereload pada sublime text 3, namun kalian baru setengah jalan jika ingin livereload berfungsi pada browser kalian.

Baca : Merawat keyboard agar tahan lama

b. Cara install livereload pada browser (Firefox).

Untuk benar-benar merasakan fitur livereload kalian juga harus install extension livereload pada browser yang akan digunakan. Disini saya menggunakan browser FireFox untuk browser lain seperti chrome ataupun operamini kalian bisa mencobanya.

Berikut ini step menginstall extension livereload pada browser firefox.

1. Buka aplikasi browser firefox.
2. Kunjungi livereload firefox.
3. Klik Tambahkan.

4. Lalu akan muncul dialog perizinan, tekan saja Tambahkan.

5. Done Livereload telah berhasil dipasang pada browser Firefox.

Itulah cara memasang extension livereload pada firefox, dengan ini kalian bisa melakukan live preview kode HTML secara langsung tanpa harus reload.

3. Cara menggunakan Plugin Livereload.

Setelah melakukan pemasangan plugin, akau akan memberitahukan cara memakai plugin livereload sublime text 3 pada browser.

1. Buat File .html baru diSublime text 3 dan simpan (Cukup markup dasar HTML saja dulu tanpa tanbahan apapun).
2. Lalu buka file yang disimpan tadi dibrowser yang telah kita pasang plugin livereload. (Disini saya pakai Firefox)
3. Setelah termuat filenya, klik ikon livereload. Jika tidak ada kalian cek extension browser kalian.

4. Setelah diklik ikonnya akan berubah warna hijau, tandanya livereload telah berjalan.

5. Lanjutkan menulis pada markup HTML tadi yang disimpan, setiap kali ingin melihat hasilnya cukup klik CTRL + S maka file di browser akan ter-reload dengan otomatis.
6. Selesai.

Itulah cara memasang live preview sublime text 3 dan cara menjalankannya, sekian artikel kali ini, jika bingung komen saja. Terima kasih.