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 sehinggaVSCode 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.

Visual Studio Code Extension Yang Sering Digunakan Oleh Para Programmer

1. Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

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.

2. Open in Browser

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

Persis 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.

3. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Capek merapikan kode ?. Prettier berfungsi untuk merapikan kode kalian secara otomatis. Bila kalian risih dengan kode yang berantakan maka dengan Prettier kodemu 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.

4. Indent Rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Dengan ekstensi ini akan memudahkan kalian untuk membedakan indentasi suatu elemen. Indent Rainbow akan memberikan warna setiap indentasi sehingga mudah untuk membedakan indentasi satu dengan yang lain.

5. PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

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 kalian mengaktifkan ekstensi ini alangkah baiknya kalian mematikan PHP Sugestion Basic bawaan VSCode.

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.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 kalian melakukan rename tag secara otomatis. Cukup rubah tag pembuka maka tag penutup akan otomatis mengikuti tag pembuka tanpa repot merubah kedua tag tersebut. Cukup menghemat waktu kan

7. Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.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.

8. Laravel Blade Snippets

https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

Laravel Blade Snippets memudahkan kalian untuk menuliskan beberapa sintaks blade dengan lebih cepat. Laravel Blade Snippets ini memberikan fitur code completion yang sangat membantu para developer Laravel.

9. Laravel 5 Snippets

https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets

10. CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-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.

Itu dia beberapa pilihan ekstensi VSCode yang banyak digunakan. Masih banyak juga ekstensi yang gak kalah keren dengan ekstensi yang sudah saya sebutkan diatas, silahkan cari-cari sendiri di market place VSCode atau langsung di aplikasi VSCodenya juga bisa. Sekian dari saya, Happy Coding!!

10 Extensions Terbaik Visual Studio Code Yang Dapat Membantu Anda Untuk Ngoding!