Bagi seorang pengembang website, Integrated Development Environment atau disingkat IDE merupakan salah satu tools yang paling utama untuk meningkatkan produktivitas menulis kode program. Dibandingkan dengan code editor biasa, IDE memiliki banyak sekali fitur, seperti syntax highlighting, error highlighting, code completion, dan sebagainya.

Namun, sering kali semua keunggulan ini belum terpenuhi untuk dapat dikatakan produktif. Alasannya, kita masih bisa memberikan fitur yang lebih pada IDE dengan ekstensi/plugin. Kebanyakan IDE saat ini mendukung adanya hal tersebut. Nah, kali ini kita akan berbicara tentang plugin yang ada di VS Code. Kamu bisa melihat bahasa pemrograman yang didukung VS Code pada halaman Language Support in Visual Studio Code.

Pengenalan VS Code

Visual Studio Code atau VS Code adalah pengedit kode bersifat open-source yang membantu para developer menuliskan kode dengan cepat. Ia diciptakan dan dipelihara oleh Microsoft Corporation yang dirilis pertama kali pada tanggal 29 April 2015.

Karena mendukung banyak sekali bahasa pemrograman, ia dapat dimanfaatkan untuk menuliskan kode apa pun tanpa berpindah-pindah pengedit kode lainnya. Beberapa bahasa pemrograman yang didukung adalah Java, C++, JavaScript, TypeScript, Python, dan masih banyak lagi.

Apa itu Plugin VS Code

Salah satu fitur unggulan yang ditawarkan oleh VS Code adalah VS Code extensions. Ia memungkinkan untuk memperluas alur kerja dari pengembangan aplikasi sehingga memiliki kemampuan lebih dari asalnya.

Dengan fleksibilitas atau keterbukaan dari source code-nya, pembuat VS Code extension dapat menambahkan ekstensi pada VS Code secara langsung dan mudah serta berkontribusi dalam memperkaya fiturnya dengan API yang tersedia.

Untuk menjelajahi ekstensi di VS Code, kamu perlu membuka halaman pencariannya terlebih dahulu. Ada dua cara, yaitu menekan tombol kombinasi CTRL + SHIFT + X atau menekan tombol berlogo berikut.

Seharusnya, VS Code akan menampilkan seperti halaman berikut.

Gambar halaman di atas menampilkan daftar extensions dan halaman detail dari ekstensi yang dipilih. Jika kamu klik salah satu ekstensi yang tersedia di panel kiri, halaman detail dari ekstensi tersebut akan muncul.

Daftar Rekomendasi Plugin VS Code

Setelah berkenalan dengan VS Code beserta ekstensinya, kami memiliki lima rekomendasi VS Code extensions yang dapat meningkatkan produktivitasmu dalam membuat halaman website.

Auto rename tag

Tahukah kamu, dalam membuat elemen HTML, sebenarnya VS Code dapat menyediakan tag penutupnya secara otomatis seusai menuliskan tag pembukanya? Yap, hal ini sudah dilakukan secara otomatis tanpa ekstensi tambahan.

Namun, pernahkah terekspektasikan oleh Anda bahwa mengubah nama tag pada satu sisi juga akan mengubah sisi lainnya secara otomatis? Jawabannya, tidak bisa dilakukan oleh VS Code kecuali dengan extension.

Nah, fenomena di atas adalah contoh pengubahan nama tag HTML yang tidak tersinkron secara otomatis pada sisi lainnya. Bagi sebagian orang mungkin hal ini terlihat sepele, tetapi hal ini sangat berpotensi mengganggu dan membuat dongkol developer yang produktif.

Untuk meningkatkan kebahagiaan developer, ada ekstensi yang bernama Auto Rename Tag dari Jun Han. Sejak artikel ini ditulis, ekstensi ini sudah diunduh sebanyak 13.5 juta kali.

Hasilnya akan seperti berikut jika dipasang dan diterapkan.

IntelliSense for CSS class names in HTML

Dalam menyusun styling untuk dokumen HTML, tidak jarang kita memanfaatkan class selector untuk melakukannya. Semakin banyak penggunaan class selector, maka akan semakin runyam atau pusing dalam pengelolaannya. Belum lagi jika kita lupa nama class selector yang didefinisikan.

Nah, ada ekstensi yang sangat berguna untuk membantu mengingat nama class selector yang tersedia. Ia bernama IntelliSense for CSS class names in HTML dari Zignd. Sebagaimana namanya, ekstensi ini membantu penyelesaian penulisan kode CSS class names dalam dokumen HTML. Berikut contohnya.

Namun, ada hal yang perlu dilakukan agar ekstensi ini dapat berjalan dengan baik, yaitu kamu perlu melakukan caching setiap kali terjadi perubahan kode pada berkas styling. Jika tidak, perubahan kode styling yang terjadi tidak akan diketahui dan muncul dalam daftar suggestion.

Caranya untuk melakukan caching sangatlah mudah. Kamu dapat melakukannya dengan membuka command bar (CTRL + SHIFT + P) dan ketikkan “Cache CSS class definitions”.

Cara alternatif yang lebih cepat dari cara di atas adalah menekan tombol berikut pada sisi bawah dari VS Code-mu.

JavaScript (ES6) code snippets

Membuat aplikasi website tidak akan terlepas dari JavaScript untuk meningkatkan interaktivitas. Saat ini, banyak kode JavaScript yang dituliskan dengan versi ES6 ke atas. Namun, terkadang kita khawatir mengenai backward compatibility sehingga kita perlu downgrade versi JavaScript.

Namun, ekstensi yang kami rekomendasikan tidaklah bersinggungan dengan masalah di atas. Ekstensi JavaScript (ES6) code snippets dari Charalampos Karypidis menyediakan “kode pendek” untuk menghasilkan kode fungsi yang lengkap. “Kode pendek” ini dapat disebut sebagai singkatan dari kode tersebut.

Contohnya, kita ingin melakukan looping menggunakan method forEach pada sebuah array untuk ditampilkan di halaman website.

Contoh di atas adalah salah satu contoh dari “kode pendek” yang ditawarkan oleh ekstensi ini. Kamu dapat mengunjungi halaman dokumentasi resminya untuk melihat keseluruhan kode tersebut pada halaman detail dari ekstensi ini.

Live Preview

Setiap pengembangan aplikasi web, tentunya developer ingin menguji aplikasi dengan cara menjalankannya secara lokal. Secara tidak langsung, sebetulnya kita dapat menjalankannya dengan menggunakan Uniform Resource Identifier (URI) dengan skema File, contohnya “file:///home/nurrizkiadip/web-test” jika melalui sistem operasi linux.

Tentunya, hal ini cukup merepotkan developer. Microsoft memiliki banyak sekali ekstensi yang dirilis ke VS Code extensions. Salah satunya adalah Live Preview. Berikut contohnya.

Live Preview akan menyediakan local server sehingga dapat menampilkan halaman website. Kamu juga dapat membuka URL dari local server yang diberikan pada browser kesayanganmu.

Prettier Code Formatter

Sadar maupun tidak sadar, menuliskan kode dengan rapi sangat meningkatkan kemudahan dalam membaca kode. Meskipun demikian, merapikan kode merupakan pekerjaan yang melelahkan dan membuang-buang waktu bagi sebagian orang.

Nah, prettier.io memiliki ekstensi dalam VS Code untuk membantu para developer merapikan kode mereka. Anda dapat mengunjungi halaman marketplace-nya di sini.

Secara default, prettier tidak ditetapkan sebagai formatter utama dalam VS Code. Kita perlu melakukan setelan terlebih dahulu. Kamu bisa melakukannya melalui GUI maupun settings.json.

# GUI

# settings.json

Untuk memberikan custom configuration, kamu dapat membuat berkas konfigurasi prettier. Kamu dapat memeriksanya pada halaman Configuration File di prettier.io.

Penutup

Oke, itulah lima VS Code plugin yang sangat bermanfaat dalam membuat website dan meningkatkan pengalaman coding-mu agar semakin asyik. Tentunya, tidak hanya lima ini, kamu bisa eksplor untuk mencari ekstensi lainnya sehingga IDE-mu semakin kaya akan fitur dan powerful.

Untuk kamu yang ingin mempraktikkan penggunaan extensions, tapi bingung mau membuat proyek apa? Coba deh ikuti salah satu kelas yang ada di Learning Path Front-End Web Developer. Dijamin kamu bakal disuguhi dengan proyek-proyek yang menarik!

Jika ingin artikel menarik lainnya seperti ini, silakan komentar di bawah untuk topik selanjutnya. See you on the next article!