15 Ekstensi Visual Studio Code Terbaik untuk Membantu Web Developer - Iqbal Pambudi

Latest

9/19/2019

15 Ekstensi Visual Studio Code Terbaik untuk Membantu Web Developer



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.

15 Ekstensi Visual Studio Code Terbaik untuk Membantu Web Developer

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

#2 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


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


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


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



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


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


Hampir sama dengan ekstensi sebelumnya, Laravel 5 Snippets ini memberikan fitur code completion untuk fungsi laravel sehingga sangat membantu sekali dalam pembuatan project.

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

#11 Debugger for Chrome


Debugger dor Chrome adalah ekstensi untuk menghubungkan antara VS Code dengan browser Google Chrome. Biasanya digunakan untuk debugging aplikasi web.

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

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

#14 One Dark Pro


Ini bukan tools untuk development, tapi One Dark Pro adalah tema pada VSCode. Banyak orang yang suka dengan tema ini karena kombinasi warnanya yang cantik dan enak dilihat. Bagaimana menurutmu?.

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

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!!

3 comments:

  1. pusing gan saya nggak mudeng haha

    ReplyDelete
  2. pnjg jg artklnya.. Mantap.. Kunjngi balik ya kelasmat.com

    ReplyDelete
  3. Ada beberapa juga saya pakai ekstensi diatasa, kunjungi juga yaa https://codepalapa.com/

    ReplyDelete