10 Ekstensi VSCode Untuk Web Developer Pemula

27/10/2021

Sebelum masuk ke pembahasan tentang Ekstensi VSCode untuk Web Developer, kita kenalan dulu yuk apa itu VSCode. Visual Studio Code atau biasa yang dikenal dengan VSCode merupakan salah satu dari teks editor terbaik yang banyak digunakan oleh para developer atau programmer. Teks editor yang satu ini memiliki fitur-fitur yang powerfull dibanding jenis teks editor lainnya. Selain itu dengan banyak manfaat yang didapat dari teks editor yang satu ini, Visual Studio Code dapat digunakan di berbagai sistem operasi seperti Windows, Linux, MacOS, dan lainnya.

Visual Studio Code dirilis pada tahun 2015 oleh Microsoft dan dapat didownload secara gratis dari website resminya yaitu Visual Studio Code. Walaupun tergolong baru, tetapi teks editor ini merupakan teks editor paling populer berdasarkan survei yang dilakukan oleh Stackoverflow pada tahun 2021 mengalahkan teks editor lainnya seperti Sublime Text, Notepad++, dan sejenisnya.

Hal ini tentunya bukan menjadi sesuatu yang mengagetkan dimana Visual Studio Code memang menawarkan beberapa fitur-fitur berupa ekstensi atau plugin yang memudahkan para developer dalam menyelesaikan pekerjaannya di bidang coding. Ekstensi tersebut bisa dengan mudah disesuaikan dengan kebutuhan dari pengguna sendiri. Jadi walaupun pengguna tersebut menggunakan lebih dari satu teknologi atau banyak bahasa pemrograman sekalipun hal itu bukan menjadi masalah yang berarti.

Lalu sebagai Web Developer, ekstensi apa yang harus dipasang di dalam Visual Studio Code tersebut? Berikut mimin telah merangkum 10 Ekstensi VSCode untuk Web Developer yang wajib diinstall, terutama bagi pemula yang baru menjajal teks editor ini.

HTML Snippets

Ekstensi VSCode untuk Web Developer pertama yang wajib diinstall yaitu HTML Snippets. Ekstensi yang dirilis pada tahun 2015 ini telah diinstall oleh lebih dari 6 juta orang. HTML Snippets bekerja dengan merekomendasikan kepada pengguna tag-tag html ketika pengguna tersebut hanya mengetik beberapa karakter huruf yang mengarah ke sebuah tag. Hal ini tentunya sangat memudahkan developer, yang mana dengan ekstensi ini developer tak harus susah-susah mengetik tag dengan awalan tanda “<” lagi. Selain itu dengan ekstensi ini developer juga tak perlu menulis tag penutup, karena sudah secara otomatis ada ketika kita menulis nama tag html tersebut. HTML Snippets tentunya membuat ngoding menjadi semakin cepat dan efektif.

CSS Peek

Ekstensi ini merupakan ekstensi yang bekerja dengan menampilkan CSS dari sebuah class. Ketika pengguna menekan tombol ctrl dan secara bersamaan menyorot sebuah kelas yang ada pada syntak html, maka secara otomatis menampilkan CSS dari class tersebut. Ekstensi ini dirilis pada 2016 dan telah diinstall lebih dari 2 juta pengguna.

Live Server

Ekstensi ini merupakan salah satu ekstensi yang banyak diinstall oleh pengguna terutama Front End Developer. Ekstensi ini telah diinstall lebih dari 15 juta pengguna. Cara kerja dari ekstensi ini memungkinkan pengguna dapat langsung melihat tampilan web yang dibuat secara realtime tanpa harus merefresh browser. Jadi bisa ngoding sambil lihat langsung hasilnya ya..

Auto Rename Tag

Selanjutnya ada ekstensi yang bernama Auto Rename Tag. Ekstensi ini dirilis pada 2016 dan telah hampir 7 juta pengguna. Ekstensi ini sangat memudahkan pengguna ketika ingin mengubah tag pada html. Cukup dengan mengubah tag pembuka, maka tag penutup secara otomatis akan menyesuaikan.

Prettier – Code Formatter

Ekstensi VSCode untuk Web Developer selanjutnya yang direkomendasikan adalah Prettier – Code Formatter. Ekstensi ini merupakan salah satu ekstensi yang paling populer dipakai oleh pengguna VSCode. Ekstensi yang dirilis pada 2017 ini bekerja dengan merapikan syntak codinganmu secara rapi dan otomatis ketika kita melakukan save pada file project yang dibuat.

Sublime Text Keymap and Setting Importer

Ekstensi ini mungkin bukan ekstensi yang wajib diinstall setiap orang. Tetapi ekstensi ini akan sangat berguna untuk kalian para alumni pengguna teks editor Sublime Text. Dengan menginstall ekstensi ini kita dapat menggunakan VSCode tanpa harus memerlukan adaptasi yang memerlukan banyak waktu.

Bracket Pair Colorizer

Ekstensi ini dirilis pada 2016 dan pada tahun 2021 telah diinstall oleh 6 juta pengguna. Ekstensi ini sangat memudahkan pengguna dengan memberikan “tanda khusus” berupa warna yang beraneka ragam di setiap tanda kurung / kurawal. Hal ini membuat developer dapat dengan mudah membedakan syntak percabangan atau perulangan satu dengan yang lain.

Git Graph

Ekstensi VSCode untuk Web Developer selanjutnya ialah Git Graph. Git Graph sangat direkomendasikan untuk para developer yang lebih banyak bekerja dalam sebagai tim. Ekstensi ini sangat memudahkan pekerjaan yang melibatnya lebih dari 2 orang, karena ekstensi ini dapat merepresentasikan branch-merge yang tentunya telah sinkron dengan github masing-masing developer.

VSCode Icons

Ekstensi ini dirilis pada 2016 dan telah dipakai lebih dari 9 juta. Ekstensi ini bermanfaat untuk mempercantik folder dan file yang ada pada project kalian. Ekstensi ini sangat direkomendasikan buat kalian yang sangat memperhatikan tampilan dari teks editor yang sedang digunakan.

One Dark Pro

Ekstensi terakhir yang wajib diinstall adalah One Dark Pro. Sama halnya VSCode Icons, ekstensi ini digunakan untuk mempercantik tampilan dari teks editor ini. Dengan menginstall ekstensi ini, kalian bisa memilih banyak pilihan tema yang dapat disesuaikan dengan selera pengguna.

Itu dia 10 Ekstensi Terbaik pada Visual Studio Code yang diperuntuhkan bagi Web Developer pemula atau baru pertama kali menginstall Visual Studio Code di komputer masing-masing. Selain ini masih banyak ekstensi lainnya yang belum tercantum pada artikel ini. Semuanya tentunya sudah tersaji lengkap di dalam Teks Editor ini.

Semoga artikel ini bermanfaat buat kalian semua coders…