10 Extension Visual Studio Code Populer untuk Pemula – Halo Programmer, Salam sejahtera untuk kita semua. Postingan kali ini ane akan membahas 10 extension yang populer di dalam Visual Studio Code untuk pemula. kamu pasti bertanya, apakah kita perlu menggunakan extension untuk programmer pemula ? ya tentu saja perlu, karena itu dapat memudahkan para programmer pemula dalam membuat suatu pengkodingan atau sintaks menjadi lebih cepat dan lebih efektif.
Sebelum kita bahas kita harus persiapkan terlebih dahulu Software Visual Studio Code nya, atau bisa mendownload nya disini. Kalau belum tau cara menginstal VSCode dan extension nya ane sudah memposting Cara Menginstall Visual Studio Code di Windows kalau pakai linux atau Mac bisa langsung download didalam website nya dan download sesuai dengan sistem operasi nya disini. Oke jika sudah di download dan di install langsung saja kita bahas 10 extension yang populer di dalam Visual Studio Code untuk pemula.
Note : Pastikan sebelum mendownload extension nya harus terkoneksi internet terlebih dahulu.
1. Live Server
Extension Live Server adalah extension yang tidak hanya menampilkan website kamu menjadi lebih mudah tetapi kalau misalkan kamu biasanya melakukan edit itu website nya harus kamu Alt + tab untuk berpindah dari text editor dengan web tampilan kamu jadi dengan adanya extension ini kamu tidak perlu untuk me-reload lagi. extension ini mempunyai server lokal sendiri dari Visual Studio Code. jadi, kamu bisa menampilkan nya langsung secara live begitu kamu save project website nya akan berubah atau ter-reload otomatis. berikut cara review extension nya.
- Tampilan instal extension nya
review instal liver server nya- kemudian klik kanan di dalam kode html nya lalu pilih “Open with live server”. seperti di gambar:
Klik Kanan -> Open with live server- lalu pilih “Allow Access” jika muncul serperti ini.
pilih Allow Access jika muncul serperti ini- Maka akan tampil pada browser default nya kalau saya pake chrome. gambar nya seperti ini.
tampilan live server pada browser
2. Sublime Text Keymap and Settings Importer
Extension Sublime Text Keymap and Settings Importer adalah extension untuk kamu yang sebelumnya pengguna sublime text , extension ini sangat bermanfaat sekali karena Shortcut nya sama seperti yang ada di sublime text. misal nya seperti kita ingin menampilkan dan menghilangkan sidebar seperti yang ada di sublime text tinggal kita ketik perintah di keyboard dengan menekan ( Ctrl + K + B ). dan masih banyak lagi tinggal anda lihat di deskripsi nya di gambar berikut ini.
review extension sublime text keymap3. Open in Browser
Extension open in browser ini adalah extension yang juga merupakan salah satu fitur yang ada di sublime text. kalau kita membuat sebuah halaman html di sublime text untuk menampilkan nya di browser kita cukup klik kanan open in browser. Jadi di dalam Visual Studio code ini belum ada fitur seperti itu jadi ini extension cocok untuk kamu yang dulu nya main sublime text dan ingin mencoba Visual Studio Code. dengan mendownload extension ini kamu bisa menggunakan fitur yang ada di dalam sublime text kedalam Kedalam Sudio Code nya. ini lah gambar riview nya.
review extension open in browser4. Auto rename tag
![]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAAC0AQAAAABA8o/oAAAAAnRSTlMAAHaTzTgAAAAdSURBVFjD7cEBDQAAAMKg909tDjegAAAAAACAVwMX6AAB07zEKwAAAABJRU5ErkJggg==)
Extension Auto rename tag ini sangat membantu ketika kamu ingin mengganti sebuah tag, misalkan ada tag <h1>Heading</h1> kamu mau ganti tag <h1></h1> nya menjadi <h2></h2> kamu hanya cukup ganti tag <h1> yang di depan nya saja dan penutup tag nya akan otomatis terganti tag nya sesuai dengan yang kamu ganti. ini lah gambar riview nya.
review auto rename tag5. Intellisense for css classnames
Extension Intellisense for css classnames ini sangat membantu untuk para web designer apalagi untuk kamu yang menggunakan framework bootstrap jadi kita bisa melihat ada kelas apa saja yang ada dialam file css yang sudah kita panggil atau kita bisa melihat file yang ada di class tersebut. ini lah gambar riview nya.
review Intellisense for css classnames6. Indent rainbow
Extension Indent rainbow ini sangat membantu pada saat kita membuat sebuah halaman dimana terdapat banyak <div></div>, terkadang kita bingung div yang ini tutupnya dimana mana, misalkan kita mau menggunakan bootstrap mau membuat NAVBAR kan kita copy ke dalam body, nah pas di paste tab nya ngacak pasti bingung kan meskipun udah ada bantuan visual berupa garis garis vertikal. Dengan menggunakan indent rainbow ini sekarang ada warna nya jadi kalian bisa lihat tutupnya ada dimana. berikut gambar riview nya.
review extension indent rainbow7. Bracket Pair Colorizer
Extension Bracket pair colorizer ini sama kaya indent rainbow tetapi ini menggunakan kurung kurawal (). misalkan kita ngoding menggunakan PHP atau JS kadang – kadang banyak kurung kurawal yang kita lupa buka nya dimana tutup nya dimana, dengan menggunakan extention ini jadi akan mewarnai kurung kurawal-nya dan keren-nya lagi jika di klik salah satu kurung kurawalnya dia akan memperlihatkan garis ke arah penutup kurung kurawal tersebut. berikut gambar riview nya.
review extension Bracket pair colorizer8. Beautify
Extension Beautify ini cukup keren untuk membantu formating codingan kita seperti tadi kita copy script bootstrap ke coding kita pas kita liat indentasinya pasti berantakan jadi harus di format manual biasanya. nah dengan menggunakan ekstension ini jadi nanti akan di otomatis formatkan atau formatnya bisa bikin sendiri atau bisa juga menggunakan format yg sudah ada didalam ekstensionnya.
(Extension ini sangat membantu pada saat bekerja dalam TIM jadi kodenya di gabungkan menjadi satu dan menggunakan format yg sama). berikut gambar riview nya.
review extension beautify9. PHP IntelliSense
Extension PHP IntelliSense adalah extension yang dikhususkan untuk PHP ketika kamu mengetik sesuatu sintaks php akan keluar auto complete nya, tetapi sebenarnya didalam Visual Studio Code ini sudah ada intelliSense-nya tetapi untuk PHP kurang lengkap jadi kalau mau lengkap lebih baik install ekstension ini. berikut gambar riview nya.
review extsension php intellisense10. One Dark Pro
Terakhir yaitu One dark Pro ini sebenarnya adalah tema yang paling populer digunakan, seperti atom yang skema warnanya itu banyak banget yg suka bukan extension jadi kita bisa install tema atom itu kedalam Visual Studio Code, tema ini sudah banyak yang pakai sudah sekitar 7 juta yang menginstall tema ini nah menurut saya warnanya sangat enak dilihat . jadi kalo kalian mau ganti temanya ini adalah salah satu tema yang paling populer. berikut gambar riview nya.
review tema one dark proDemikian 10 Extension Visual Studio Code populer untuk Pemula yang sudah ane buat semoga artikel ini bermanfaat. Jangan sungkan – sungkan untuk bertanya dan jangan lupa tinggalkan komentar untuk kita bisa Sharing ilmu bareng – bareng. Sekian dan terima kasih.:)