Visual Studio Code (VS Code) merupakan salah satu editor yang populer saat ini. Pada survey developer 2019 di insight.stackoverflow.com mengenai Development Environments and Tools, VS Code menduduki posisi paling populer diantara deretan editor lainnya. Tidak bisa dipungkiri bahwa VS Code memiliki keunggulan dalam hal banyaknya ekstensi yang dapat diinstall yang dapat mempermudah penggunanya.

Banyak jawaban di dunia maya ini ketika kita mencari tips dan rekomendasi ekstensi VS Code untuk mempermudah kita. Make Life Easier! Akan tetapi sebagai pemula beberapa diantaranya malah membuat kita bingung, ini untuk apa, itu untuk apa, untuk situasi bagaimana digunakan, dan lain sebagainya karena masih sedikitnya ilmu dan pengalaman yang kita miliki. But behold ladies and gentlemen, 5 hal berikut ini setidaknya akan mencukupi dahaga anda.

#1 — Do These Settings

Setting tema VS Code itu penting! Untuk pemula seperti saya hal ini sangat membantu. Pilihlah tema yang dengan warna teks yang membuat anda nyaman tapi juga memberikan banyak informasi. Saya pribadi lebih menghindari white theme, dengan alasan terlalu terang dan membuat mata Lelah. Contohnya disini saya memakai tema One Dark Pro.

Selain itu dia juga dapat membantu kita dengan menampilkan warna teks yang berbeda ketika ada yang tidak sesuai, seperti contoh berikut ini:

Format on Save! Setelah setting tema, selanjutnya adalah mengaktifkan Format on Save. Setting ini dapat kita aktifkan dengan masuk menu setting (Ctrl + , ) kemudian ketik kata kunci format on save pada search bar dan centang.

Dengan mengaktifkan opsi tersebut, VS Code secara otomatis akan merapikan barisan kode yang telah kita ketik ketika melakukan save. Beberapa hal yang terkoreksi diantaranya tabulasi, penempatan spasi, dan lain-lain. Sebagai opsi tambahan kita juga bisa install ekstensi bernama Prettier Code Formatter, fungsinya sama yaitu merapikan barisan kode yang telah kita ketik saat melakukan save, akan tetapi dengan koreksi yang lebih lengkap seperti menambah semicolon diakhir baris, merapatkan baris kosong, dan lain-lain.

#2 — Auto Rename Tag

Seperti namanya, Auto Rename Tag kita butuhkan untuk rename otomatis html tag. Bagi pemula yang menyentuh html pasti akan sangat mengesalkan jika ada kesalahan yang setelah ditelusuri ternyata hanya lupa rename tag. Ketika <div> ditutup dengan </span> misalnya, atau ketika typo, atau malah ketika harus rename tag cukup banyak dan harus depan belakang.

Dengan ekstensi ini, ketika kita melakukan rename pada suatu tag html, closing tag yang bersangkutan akan secara otomatis berubah juga. Misal ketika <div> kita rename misalkan jadi <span>, closing tag </div> pun secara otomatis akan jadi </span>.

#3 — Bookmarks

Kode terlalu panjang? Lost track? Bingung yang mana ada dimana? Jangan khawatir, ada ekstensi yang dapat membantu kita melalui masalah tersebut. Bookmarks menandai baris tertentu pada kode kita bahkan dengan label sehingga kita tidak kebingungan ketika mencari bagian-bagian tertentu.

Untuk menggunakannya sangat mudah, cukup arahkan dibaris mana akan kita bookmark. Kemudian akses Command Palette dengan menekan Ctrl + Shift + P dan masukan command yang disediakan oleh ekstensi Bookmarks. Yang biasa saya pakai yaitu Bookmarks: Toggle Labeled, lalu berikan label yang relevan. List bookmark yang sudah kita buat bisa kita akses melalui Command Palette lagi atau dengan memilih tab icon Bookmarks disamping kiri.

#4 — Bracket Pair Colorizer

Seringkali salah satu kesalahan kita sebagai pemula dalam coding adalah lupa dan kebingungan dalam “menutup bracket”. Ketika bracket pembuka sudah bertumpuk seperti [blabla {blabla [blabla [blabla { , kita akan bingung menutupnya dan seringkali terlewat sehingga memunculkan error.

Untuk itu ada ekstensi yang bisa membantu dan mempermudah kita untuk kasus tersebut. Bracket Pair Colorizer secara otomatis membedakan warna masing-masing urutan bracket tersebut sehingga memudahkan kita untuk menentukan bagian mana yang sudah atau belum tertutup.

#5 — Live Server

Ketika kita membuat html, css dan javascript sering sekali kita harus bolak balik refresh browser hanya untuk melihat tampilan perubahan dari barisan kode yang kita ketik. Apakah sudah sesuai atau belum, margin dan paddingnya sudah pas belum, layoutnya rapi atau tidak, dan sebagainya. Hal tersebut tentu akan merepotkan bukan?

Dengan Live Server hal merepotkan tersebut dapat kita hindari. Cukup install, setelah itu kita reload VS Code, lalu klik kanan html yang mau kita buka secara live oleh Live Server, dan pilih Open with Live Server.

Web browser default anda otomatis akan terbuka menampilkan html yang kita buat. Apapun perubahan yang kita buat pada file tersebut dan file yang berhubungan lainnya akan secara live terlihat perubahannya pada browser tanpa harus kita buka dan klik refresh berulang-ulang. Hal ini akan lebih efektif ketika window browser dan window VS Code dibuka berdampingan.