10 Plugin Visual Studio Code Untuk Buat Kodingmu Lebih Menyenangkan

Visual Studio Code (VSCode) merupakan editor teks cross-platform yang tersedia bagi sistem operasi Windows, Linux, maupun OS X. Editor ini dikembangkan oleh Microsoft dan dengan cepat mengambil hati para developer yang menggunakan Sublime Text untuk pindah menggunakan VSCode.

Seperti Sublime Text, VSCode memiliki sebuah fitur plugin bernama extentions. Extension bisa kita tambahkan langsung dari dalam VSCode itu sendiri. Extension yang tersedia di Marketplace juga bisa langsung dicari dari menu Extension.

VSCode memiliki ribuan Extension yang bisa pembaca eksplor langsung di Marketplace-nya. Di artikel ini penulis akan berbagi 10 Extension yang bisa membantu membuat proses ngoding menjadi lebih menyenangkan.

Faker

Dengan memasang plugin ini kita bisa membuat fake data untuk alamat, nama perusahaan, tanggal, nama orang, nomor telepon, atau sekedar lorem ipsum. Daripada memasukkan "adsfasdfksdfj" lebih baik pasang Extension ini dan buat data yang lebih "nyata".

Prettier

Pernah kan copy paste kode baru yang ternyata tidak terindentasi dengan sempurna? Sering kita atur indentasi kode manual dengan tombol TAB atau SHIFT+TAB. Prettier akan memformat kode kita secara otomatis sehingga kita tidak perlu membuat waktu yang untuk memformat dokumen. Tak hanya mengatur indentasi, ia juga bisa mengatur urutan import, memaksa penggunaan " untuk menggantikan ', mengatur spasi, penulisan parameter, dsb.

Color Info

Plugin ini memberikan informasi seputar kode warna yang kita tulis di CSS. Dengan mengarahkan kursor ke kode hexa warna tertentu, kita akan diberikan preview warnanya beserta nilai-nilainya di berbagai format lain seperti rgb, hsl, cmyk, juga nilai alpha-nya.

TODO Highlight

Plugin ini saat diaktifkan akan menyeleksi komentar TODO di kode kita sehingga bagian-bagian mana yang harus dikerjakan berikutnya bisa terlihat dengan jelas. Saat dipasang ia akan bisa mendeteksi keyword TODO dan FIXME tapi kita juga bisa menambah keyword sendiri.

Minify

Extension ini berguna untuk melakukan minifying kode JavaScript, CSS, maupun HTML dengan memanfaatkan uglify-js, clean-css, dan html-minifier.

Change Case

Change Case membantu kita dalam memodifikasi strings, menjadi camelCase, kebab-case, snake_case, CONST_CASE, dll.

CSS Peek

Extension ini membuat kita bisa langsung mengakses definisi kelas CSS dari file HTML.

Open-In-Browser

VSCode tidak bisa memiliki antarmuka yang langsung membawa kita untuk membuat file HTML ke browser default. Extension ini akan menambahkan menu Open with Default Browser saat dipasang yang akan langsung memuat file HTML tertentu ke Firefox, Chrome, atau IE.

Quokka

Quokka merupakan Extension untuk membantu melakukan live debugging. Saat menulis kode, Quokka akan langsung memberikan umpan balik berupa hasil dari kode yang dieksekusi.

Git Lens

Git Lens akan menunjukkan siapa saja anggota tim yang menuliskan bagian-bagian kode yang sedang kita buka. Dengan plugin ini kita bisa tahu siapa menulis kode yang mana.

Referensi: shopify, tutorialzine