Beberapa Ekstensi VSCode Bagi Web Developer

Ada banyak ekstensi VSCode bagi Web Developer yang sering digunakan. Beberapa diantaranya adalah sebagai berikut.

 

1. Sublime Text Keymap

Bagi kalian yang ngoding pakai VSCode tetapi merasa lebih menyukai shortcut yang digunakan di Sublime Text, kalian bisa menginstall Ekstensi ini.

 

2. Open In Browser

Extension ini juga merupakan salah satu extension yang mengadopsi fitur dari Sublime Text. Ketika kita membuat suatu halaman HTML di Sublime Text biasanya ketika kita akan menampilkan halamannya, kita akan klik kanan lalu open in browser. Dengan menginstall extension Open In Browser di VSC hal yang serupa juga bisa dilakukan di VSC.

 

3. Live Server

Extension ini sangat memudahkan saat kita sedang mengedit suatu halaman. Biasanya setelah kita melakukan edit maka kita akan melakukan save pada file dan  ALT + TAB ke browser lalu merefresh halamannya. Dengan menggunakan Live Server ketika kalian save filenya maka halaman di browsernya juga akan ikut berubah tidak perlu repot repot merefresh halaman.

 

4. Auto Rename Tag

Auto Rename Tag ini memudahkan ketika kita mengubah sebuah tag. Contohnya ketika kita akan mengubah tag '

' menjadi tag lain pastinya kita akan mengubah tag penutupnya juga yaitu '

 

5. CSS Peek

Ekstension ini berfungsi untuk mengintip style apa saja yang sudah diberikan kepada suatu elemen. Cara menggunakannya yaitu dengan mengarahkan kursor ke suatu elemen sambil menekan CTRL lalu klik. Maka kita akan diarahkan ke suatu file yang isinya semua css yang sudah diberikan ke elemen atau class tersebut.

 

6. Intellisense For CSS Classnames

Dengan menggunakan ekstension ini saat kita akan menggunakan sebuah class pada sebuah elemen maka kita akan diberikan autocomplete class yang terhubung dengan halaman kita.

 

7. Beautify

Beautify ini akan merapikan secara otomatis indentasi yang berantakan. Contohnya saat kita mengcopy suatu script dari bootstrap maka saat kita paste kan ke kode kita, script yang tadi kita paste kan biasanya akan berantakan. Dengan Beautify ini saat kita mengsave kode kita maka script yang tadi akan otomatis diformatkan atau dirapikan.

 

8.  PHP Intellisense

Bagi kalian yang sering bekerja dengan PHP, kalian wajib menginstall ekstensi ini. Ekstensi ini menyediakan auto-complete bagi bahasa PHP, walaupun sebenarnya VSCode sudah menyediakan auto-complete juga tetapi jika kalian ingin lebih lengkap saya sarankan untuk menginstall ekstensi ini.

 

9. Indent Rainbow

Ketika kita menggunakan bootstrap yang banyak elemen div nya, biasanya kita akan bingung saat mencari tag penutup salah satu div tersebut. Ekstensi ini akan memberikan warna pada setiap indentasi di kode kita. Jadi akan sangat memudahkan bagi kita.

 

10. Bracket Pair Colorizer

Ekstensi yang satu ini sekarang untuk kurung kurawal. Biasanya ketika kita ngoding menggunakan bahasa PHP atau JavaScript itu pasti akan ada banyak kurung kurawal, seperti saat kita membuat percabangan, looping, atau apapun yang bersarang. Terkadang kita juga sering ketinggalan satu kurung kurawal untuk menutup suatu blok kode.Dengan menggunakan ekstensi ini kurung kurawal yang berpasangan akan diberi warna yang sama, sehingga memudahkan kita untuk mencari pasangan kurung kurawal. Lebih kerennya lagi ketika kita mengklik salah satu kurung kurawal, maka kurung kurawal tersebut akan menampilkan garis yang menghubungkannya dengan pasangan kurung kurawalnya.