Visual Studio Code atau biar lebih gampang disingkat VSCode adalah sebuah teks editor dari Microsoft yang populer dan banyak digunakan oleh para programmer karena fitur dan kemudahannya.
VSCode adalah teks editor yang powerful dengan dukungan ekstensi serta support dari komunitas yang banyak sehingga VSCode ini menjadi primadona bagi para programmer.
Selain itu kelebihan VSCode adalah sudah terintegrasi dengan Emmet yang akan memudahkan penulisan kode sehingga lebih cepat dan efisien. Juga terdapat fitur Git yang memudahkan untuk bekerja dengan tim.
Ada banyak sekali ekstensi yang bisa dipasang di VSCode agar menjadi lebih powerful. Berikut adalah beberapa ekstensi terbaik dan terpopuler yang banyak digunakan para programmer :
1. Live Server
Live Server adalah sebuah ekstensi yang memungkinkan untuk membuat sebuah server pengembangan lokal secara real time. Real time disini berarti ketika kita mengupdate file coding maka otomatis live server akan langsung melakukan reload halaman tanpa perlu kita capek-capek melakukan refresh page atau menekan tombol F5 pada keyboard.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
2. Open in Browser
Seperti namanya, ekstensi Open in Browser ini akan membuka file yang sedang dikerjakan ke browser langsung dengan hanya menekan tombol ALT+B untuk browser default dan ALT+SHIFT+B untuk membuka ke browser lain. Jadi tak perlu repot-repot mencari filenya ketika akan dilihat melalui browser cukup ketikan ALT+B.
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
3. Prettier
Prettier berfungsi untuk merapikan kode secara otomatis. Bila kita risih dengan kode yang berantakan maka dengan Prettier kode kita akan rapi tanpa repot-repot membenahi satu persatu. Prettier ini mendukung bahasa JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML dan masih banyak lagi.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
4. Indent Rainbow
Dengan ekstensi ini akan memudahkan kita untuk membedakan indentasi suatu elemen. Indent Rainbow akan memberikan warna setiap indentasi sehingga mudah untuk membedakan indentasi satu dengan yang lain.
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
5. PHP Intelephense
Untuk para programmer PHP sebaiknya gunakan juga ekstensi ini. PHP Intelephense memiliki fitur code completion yang sangat membantu sekali apabila kita lupa sintaks PHP. Jadi tidak perlu repot-repot mengingat seluruh sintaks PHP. Apabila kita mengaktifkan ekstensi ini alangkah baiknya kita mematikan PHP Sugestion Basic bawaan VSCode.
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
6. Auto Rename Tag
Ketika kita salah menuliskan tag atau ingin merubah sebuah tag pada HTML, maka kita perlu merubah tag pembuka dan penutup. Auto Rename Tag akan memudahkan kita melakukan rename tag secara otomatis. Cukup ubah tag pembuka maka tag penutup akan otomatis mengikuti tag pembuka tanpa repot merubah kedua tag tersebut.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
7. Highlight Matching Tag
Ketika kita mengerjakan projek yang besar maka akan semakin banyak pula kode yang harus kita tulis. Dengan semakin banyaknya tag yang ada, terkadang kita kebingungan untuk mencari pasangan tag. Highlight Matching Tag akan memberikan kemudahan dalam mencari pasangan tag. Cukup arahkan kursor pada tag maka akan terlihat garis bawah kuning yang akan menyorot kedua pasangan tag tersebut.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
8. Laravel Blade Snippets
Laravel Blade Snippets memudahkan kita untuk menuliskan beberapa sintaks blade dengan lebih cepat. Laravel Blade Snippets ini memberikan fitur code completion yang sangat membantu para developer Laravel.
https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade
9. Laravel 5 Snippets
Hampir sama dengan ekstensi sebelumnya, Laravel 5 Snippets ini memberikan fitur code completion untuk fungsi laravel sehingga sangat membantu sekali dalam pembuatan project.
https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets
10. CSS Peek
CSS Peek berfungsi untuk mengetahui property apa saja yang digunakan pada suatu class. Ini akan mempermudah para front end developer dalam melakukan debugging tampilan pada halaman web mereka.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
11. Debugger for Chrome
Debugger for Chrome adalah ekstensi untuk menghubungkan antara VS Code dengan browser Google Chrome. Biasanya digunakan untuk debugging aplikasi web.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
12. Rainbow Bracket
Ketika banyak sekali tanda kurung dalam suatu program terkadang kita susah untuk membedakan. Dengan Rainbow Bracket ini tanda kurung akan diberi warna sesuai pasangannya sehingga mudah untuk membedakan.
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
13. Path Intellisense
Path Intellisense memudahkan kita untuk menuliskan path pada kode. Dengan ekstensi ini ketika kita menuliskan sebuah path maka akan diberikan saran sehingga lokasi path sesuai dan tidak keliru.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
14. One Dark Pro
One Dark Pro adalah tema pada VSCode, jadi ini bukan tools untuk development, tapi Banyak orang yang suka dengan tema ini karena kombinasi warnanya yang cantik dan enak dilihat.
https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
15. Material Icon Theme
Bosan dengan icon-icon pada VSCode?. Material icon theme adalah ekstensi untuk merubah icon file dan folder pada VSCode. Dengan plugin ini icon-icon VSCode kalian akan terasa lebih cantik dan enak untuk dipandang. Jadi betah ngoding kan.
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Demikian beberapa pilihan ekstensi VSCode yang banyak digunakan oleh para developer web, masih banyak juga ekstensi yang gak kalah keren dengan ekstensi yang sudah disebutkan di atas, silahkan cari-cari sendiri di market place VSCode atau langsung di aplikasi VSCodenya juga bisa.
Semoga bermanfaat.
Be the first to comment