Visual Studio Code adalah kode editor yang ringan dan powerful dalam user interfacenya, vs code ini berjalan di Sistem Operasi Windows, macOS dan Linux. Vs code sudah terintegrasi dengan beberapa perintah seperti, debugging, kontrol Git dan GitHub, penyorotan sintaks, IntelliSense, snippet, dan refactoring kode serta berbagai macam theme yang menarik, memanjakan mata kita saat ngoding.
Visual Studio Code free dan open source, tidak perlu khawatir teman-teman dengan lisensenya karena vs code gratis untuk penggunaan pribadi atau komersial.
Pada kali ini admin akan sharing beberapa ekstensi yang sering digunakan saat ngoding menggunakan vs code, walaupun tanpa ekstensi, vs code sudah powerfull dalam penggunaanya, tapi yang namanya manusia pasti butuh sesuatu yang cepat apalagi dalam pengerjaan project. Terlebih untuk teman-teman yang baru belajar web developer.
Berikut adalah Extension Visual Studio Code untuk WEB Developers Pemula
Sublime Text Keymap
Ekstensi ini sangat bermanfaat klo misalkan teman-teman sebelumnya pengguna Sublime Text. Kalian sudah hafal shorcut-shorcut nya, ketika berpindah ke vs code kalian masih pengen menggunakan shorcut punyanya sublime text. |
| Sublime Text Keymap |
Open In Browser
Ekstensi ini merupakan salah satu extension yang mengadopsi fitur dari sublime text, klo kita membuat sebuah halaman HTML di sublime text untuk menampilkannya di browser kan kita cukup klik kanan open in browser. Nah kebetulan di vs code fitur itu tidak ada, makanya kita harus install. |
| Open In Browser |
Live Server
Ekstensi ini fiturnya mirip dengan Open in browser, tapi lebih keren. Extension ini tidak hanya menampilkan website kalian dengan mudah tapi juga akan mendeteksi perubahan di dalam file HTML dan otomatis melakukan live reload halaman. |
| Live Server |
Auto Rename Tag
Ekstensi ini membantu ketika kalian ingin mengganti sebuah tag, misalkan kalian tulis h1 terus mau diganti h2, nah kalian tidak perlu mengganti tag pembuka dan penutupnya, cukup ganti aja tag pembukanya otomatis nanti tag penutupnya diganti. |
| Auto Rename Tag |
IntelliSense for CSS class names in HTML
Ekstensi ini membantu kalian sebagai web designer apalagi klo misalkan kalian bekerja dengan frame work bootstrap, di bootstrap kan banyak class-class yang tidak mungkin kita hafal semua. Ekstensi ini memudahkan kita untuk melihat ada kelas apa saja di dalam file css yang sudah kita panggil. |
| IntelliSense for CSS class names in HTML |
CSS Peek
Ekstensi ini untuk melihat detail dari suatu id atau class dari CSS yang terdapat didalam HTML. Misalkan kalian ingin tau elemen ini terkena css apa. |
| CSS Peek |
Indent Rainbow
Ekstensi ini sangat membantu ketika kita membuat sebuah halaman, terutama HTML yang didalamnya mungkin nanti banyak div-div, kadang-kadang kita bingung div ini tutupnya yang mana. Dengan menggunakan ekstensi ini maka nanti indentasinya akan ada warnanya, kalian bisa liat ini yang warna hijau tutupnya di sini. |
| Indent Rainbow |
Bracket Pair Colorizer
Ekstensi ini mirip dengan Indent Rainbow tapi, ini untuk kurung kurawal ({...}). Misalkan kalian ngoding menggunakan PHP atau JavaScript itu kan kadang-kadang kita membuat banyak kurung kurawal nah dengan ekstensi ini akan mewarnai {} secara berpasangan dan klo kita klik di salah satu kurung kurawal, akan ngeliatin garis untuk menghubungkan {} satu dengan yang lain. |
| Bracket Pair Colorizer |
Beautify
Ekstensi ini membantu untuk formating coding kita, ketika kita copas script dari file lain atau internet. Saat kita simpan indentasinya akan berantakan. nah dengan menggunakan ekstensi ini maka nanti kodenya akan otomatis di formatkan/dirapihkan. |
| Beautify |
Konfigurasi
File - Preferences - Settings - Text Editor - Formating - Check Format On Save - Otomatis ketika di save akan rapih.
PHP IntelliSense
Ekstensi ini digunakan ketika bekerja dengan PHP, klo kita ketikkan sesuatu keluar auto complatenya. Sebetulnya di dalam vs code sudah ada intellisensenya tapi, untuk PHP belum selengkap ekstensi ini. |
| PHP IntelliSense |
Theme
Extension ini untuk memilih tampilan vs code kita, banyak sekali theme yang bisa teman-teman gunakan. Tuliskan saja theme di pencarian Extension, otomatis akan banyak theme yg tampil. Admin sendiri menggunaka theme Shades of Purple, Winter is Coming Theme dan Material Icon Theme. |
| Theme |
Itulah beberapa Extension Visual Studio Code untuk WEB developers Pemula, silahkan teman-teman praktekkan dan rasakan sensasinya, semoga bermanfaat.
Jika teman-teman memiliki pertanyaan atau masalah, silakan tinggalkan komentar. Admin akan dengan senang hati menjelaskan lebih detail. Terima kasih banyak atas semua tanggapan dan dukungan teman-teman!.