Ketikmedia.com – Visual Studio Code atau VSCode telah menjadi editor kode paling populer saat ini. Popularitasnya didukung oleh ekosistem extension VSCode yang sangat kaya.
Perlu kamu ketahui, extension tersebut berfungsi untuk menambah kemampuan dasar editor. Dengan adanya dukungan extension, programmer atau developer dapat meningkatkan efisiensi kerja.
Akan tetapi, bagi pemula di VSCode, mungkin kebingungan memilih extension. Oleh karena itu, simak ulasan di artikel ini supaya pemula tidak salah.
Rekomendasi Extension VSCode untuk Pemula
Memilih extension VSCode untuk pemula bisa jadi tantangan tersendiri. Kamu perlu memilih ekstensi yang benar-benar esensial. Hal itu karena ekstensi yang baik akan membantu kamu menulis kode lebih cepat. Jadi, jika kamu belum paham harus memilih ekstensi yang mana di VSCode, kamu bisa coba beberapa rekomendasi extension berikut ini.
1. Auto Rename Tag
Pertama, ada ekstensi Auto Rename Tag. Ini adalah salah satu extension VSCode untuk html yang paling banyak diunduh. Fungsinya adalah menjaga konsistensi kode markup kamu.
Jadi, ketika kamu mengubah nama tag pembuka (opening tag), extension ini bekerja otomatis, yang mana secara otomatis tag penutup (closing tag) juga akan ikut berubah. Hal ini menghilangkan kebutuhan untuk mengubah tag penutup secara manual.
Ekstensi ini memastikan tag pembuka dan penutup selalu sinkron. Sehingga, workflow kerjamu menjadi jauh lebih lancar dan minim eror.
2. Prettier
Selanjutnya, ada ekstensi bernama Prettier. Prettier adalah extension yang sangat populer. Fungsinya adalah memformat dan merapikan kode secara otomatis.
Prettier adalah extension VSCode untuk merapikan code yang paling direkomendasikan. Jadi, bagi kamu yang ingin kode yang ada di VSCode tampak rapi dan tidak berantakan, Prettier wajib kamu download.
Dengan adanya Prettier, kamu tidak perlu lagi khawatir soal indentasi yang berantakan atau soal spasi yang tidak rapi di antara baris. Pasalnya, Prettier akan memformat kodemu setiap kali kamu menyimpan file. Hal ini memastikan kode terlihat bersih dan profesional.
3. Live Server
Ketiga, ekstensi yang perlu kamu coba download lainnya adalah Live Server. Perlu kamu ketahui bahwa Live Server berfungsi untuk membuat server lokal untuk development. Extension ini memudahkan proses testing website kamu, jadi kamu cukup mengklik tombol Go Live di VSCode, kemudian website kamu akan terbuka di browser otomatis.
Keunggulan utamanya adalah fitur auto-reload. Setiap kali kamu menyimpan perubahan pada kode. Browser akan secara otomatis memuat ulang halaman, sehingga ekstensi ini menghemat banyak waktu berharga.
4. CSS Peek
Kemudian, ada yang namanya CSS Peek. CSS Peek sangat berguna bagi pengembang front-end. Ini adalah salah satu extension VSCode untuk html yang meningkatkan navigasi, fungsinya adalah membantu kamu melihat definisi rule CSS tanpa perlu beralih file CSS.
Untuk menggunakannya, cukup letakkan kursor pada nama class atau ID di HTML. Lalu, ekstensi ini akan menampilkan pop-up kecil yang berisi definisi CSS yang relevan. Selain itu, kamu juga bisa melompat ke file CSS yang terkait. Hal ini membuat proses styling menjadi lebih cepat dan intuitif.
5. VSCode Icons
Jika kamu mencari extension VSCode untuk tampilan, maka VSCode Icons bisa jadi salah satunya. VSCode Icons adalah extension untuk kustomisasi visual. Fungsinya adalah menambahkan ikon yang relevan di samping nama file atau folder kamu.
Ikon-ikon ini didasarkan pada jenis file atau framework yang kamu gunakan. Misalnya, file HTML akan memiliki ikon HTML yang khas. Hal ini memudahkan kamu mengidentifikasi jenis file dengan cepat.
6. CodeSnap
Selanjutnya, ada ekstensi bernama CodeSnap. Jadi, CodeSnap adalah eksteni yang unik namun cukup bermanfaatk untuk dokumentasi. Pasalnya, CodeSnap bersungsi untuk mengambil screenshot dari kode kamu.
Kamu bisa memilih blok kode tertentu yang ingin kamu screenshot, kemudian ekstensi ini akan menghasilkan gambar dengan latar belakang yang estetik. Hasil screenshot-nya tidak akan menyertakan elemen UI editor yang mengganggu.
7. PHP Intelephense
PHP Intelephense adalah extension vital bagi developer PHP. Ini adalah salah satu extension VSCode untuk PHP yang paling kuat. Fungsinya adalah menyediakan fitur IntelliSense tingkat lanjut, fitur tersebut mencakup autocompletion kode yang cerdas.
Extension ini juga menawarkan navigasi kode yang cepat. Kamu bisa melompat ke definisi fungsi atau kelas. Sehingga, workflow pengembangan PHP-mu akan menjadi lebih mulus.
8. Bracket Pair Colorizer
Bracket Pair Colorizer bertujuan meningkatkan keterbacaan kode. Ini adalah salah satu extension VSCode untuk tampilan yang sangat fungsional. Perlu kamu ketahui, Bracket Pair Colorizer berfungsi untuk memberikan warna yang berbeda pada pasangan kurung kurawal atau tanda kurung.
Fitur yang Bracket Pair Colorizer sediakan memudahkan kamu untuk melacak scope kode yang kompleks. Kamu tidak akan bingung lagi mencari pasangan kurung. Sehingga, fitur ini sangat membantu saat kamu bekerja menulis kode di VSCode melalui laptop.
9. Laravel Blade Snippets
Laravel Blade Snippets adalah extension wajib bagi pengguna Laravel. Ini adalah salah satu extension VSCode untuk laravel yang sangat meningkatkan kecepatan. Pasalnya, Laravel Blade Snippets punya fungsi untuk menyediakan potongan kode cepat (snippets) untuk sintaks template Blade.
Dengan bantuan ekstensi ini, kamu bisa mengetik pintasan (shortcut) singkat. Kemudian extension ini akan memasukkan struktur kode Blade lengkap. Contohnya adalah struktur if-else atau foreach Blade.
10. Indent Rainbow
Kemudian, rekomendasi extension VSCode untuk tampilan lainnya adalah Indent Rainbow. Indent Rainbow adalah extension yang berhubungan dengan visual, fungsinya adalah mewarnai indentasi kode. Jadi, setiap tingkat indentasi akan diberi warna yang berbeda.
Pewarnaan ini membantu kamu secara visual. Kamu bisa melihat kedalaman dan hierarki kode. Selain itu, kamu juga bisa menghindari kesalahan struktur yang umum terjadi.
11. Path Intellisense
Rekomendasi extension VSCode untuk html lainnya adalah Path Intellisense. Path Intellisense adalah ekstensi kecil namun sangat kuat, berfungsi untuk menyediakan autocompletion nama file saat kamu mengetik jalur (path) ke file.
Jadi, contohnya, saat kamu mengetik source gambar atau link CSS. Extension ini akan menyarankan nama file yang benar. Hal ini menghilangkan kesalahan ejaan path yang umum.
12. Browser Preview
Lalu, rekomendasi yang terakhir ada ekstensi bernama Browser Preview. Fungsinya adalah menampilkan browser utuh di dalam VSCode. Sehingga, kamu tidak perlu beralih aplikasi lagi untuk mengecek browser, hal ini sangat berguna saat kamu coding dan melihat hasilnya.
Ekstensi ini memungkinkan preview langsung. Kamu bisa melihat perubahan kode secara real-time. Jadi, Browser Preview bisa menghemat waktumu dalam mengecek hasil kode.
Penutup
Itulah beberapa rekomendasi extension VSCode untuk pemula mulai dari Auto Rename Tag, Bracket Pair Colorizer, PHP Intelephense, yang mana akan cukup membantu dalam menggunakan Visual Studio Code. Setiap ekstensi punya fungsi masing-masing, jadi jika ingin download, sesuaikan dengan kebutuhanmu.
Harapannya, dengan ulasan rekomendasi extension VSCode yang tertera di artikel ini, kamu bisa lebih mudah dalam menulis kode di VSCode.
