9 Extension Visual Studio Code Untuk Web Developer Pemula

Visual Studio Code saat ini menjadi salah satu tool editor yang populer di kalangan web developer, selain karena gratis tetapi banyak extensi atau tambahan yang banyak sehingga memudahkan para web developer membuat coding dengan cepat.

Bagi yang belum memilikinya bisa sabat coba dengan alamat untuk mendownload versi terbaru dari visual studio code klik disini

Untuk menginstal ekstensi pada visual studio code kita masuk pada tab extention, kemudian kita ketik nama ekstension, seperti pada gambar dibawah ini saya mencoba mencari ekstensi live server, setelah muncul ekstensi klik tombol instal :

Setelah selesai instal klik tombol reload agar ekstensi yang terinstal bisa dijalankan.

Disini saya shering tentang 9 ekstensi yang bisa anda gunakan bagi web developer pemula agar Visual Studio Code bisa mempermudah didalam membuat coding :

1. Open In Browser.

Ekstensi ini digunakan agar pada saat anda mengklik kanan pada file html yang kita buat maka akan muncul open inbrowser, sehingga kita tidak perlu mencari alamat browser terlebih dahulu untuk melihat tampilannya, akan tetapi file koding tersebut akan terbuka sesuai dengan alamat file.

2. One Dark Pro.

Ini adalah template untuk membuat tampilan editor vscode menjadi lebih menarik dengan kombinasi berbagai warna pada teks dan salah satu template yang poluper digunakan

3. Live Server.

Dengan menggunakan ekstensi live server maka akan dengan mudah membuka secara live html yang kita edit akan secara otomatis beruabah pada browser sehingga kita tidak perlu merefresh halaman browser, tetapi cara ini hanya khusus untuk halaman HTML

4. IntelliSense for CSS class names in HTML

Ekstensi ini memudahkan kita didalam melihat elemen CSS apa saja yang kita gunakan, sehingga memudahkan didalam memanage CSS yang kita buat, apalagi menggunakan bootstrap akan memudahkan didalam memasukan kode element css yang akan kita buat.

5. Indent-rainbow

Ekstensi ini akan membuat tampilan berwarna pada sisi kiri pada coding yang kita buat sehingga dapat dengan mudah kita melihat tag-tag ataupun fungsi yang kita gunakan pada saat coding.

6. CSS Peek

Digunakan untuk melihat class pada CSS sehingga kita tidak perlu membuka halaman CSS untuk mengetahui kode CSS yang ada.

7. Bracket Pair Colorizer

Ekstensi yang satu ini penting untuk kita masukan karena kita akan dengan mudah melihat braket atau tanda kurukurawal yang satu dengan yang lainya dapat dengan mudah kita ketahui posisinya.

8. Beautify

Dengan ekstensi bautify  secara otomatis merapikan koding yang telah kita buat, sehingga pada saat kita akan memulai koding tidak perlu merapikan posisi kode yang kita buat

9. Auto Rename Tag

Dengan ekstensi auto rename tag akan memudahkan kita didalam merubah satu tag maka tag pada sisi sampinya yang sama akan secara otomatis berubah juga.

Sekian sahabat tutorial kita tentang 9 Extension Visual Studio Code Untuk Web Developer Pemula, semoga bisa bermanfaat, terima kasih.

 

Share and Enjoy !

You may also like...