Kayyis

  • Home
  • Donasi
  • Android
  • Windows
  • MacOS
  • Linux
  • Internet
  • Software
  • Download
  • Blogger
  • Programming
  • Desain Grafis
  • MS Office
  • Games
  • Event
  • How to
  • About
  • Contact
  • Sitemap
  • Disclaimer
  • Privacy Policy
HomeProgramming

Extension Visual Studio Code untuk WEB DEVELOPER Pemula

kayyis
12:54 AM 0Comments
  • Share to Facebook
  • Share to Twitter
visual studio code

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!.
Tags Programming
  • Share to Facebook
  • Share to Twitter
kayyis
Sukses Sukses Sukses Aamien.
    0Comments

    Previous Post Next Post

    Popular Posts

    Kumpulan Font Arab Keren Gratis

    kayyis in Desain 4:51 PM

    Akun Canva Pro atau Premium Gratis 30 Hari

    kayyis in Android 6:09 PM

    Aktivasi Windows 10 Secara GRATIS Tanpa Software Tambahan

    kayyis in Windows 12:49 PM

    Install dan aktivasi Office 2019 secara GRATIS menggunakan Volume lisensi

    kayyis in Windows 9:03 PM

    Akun PicsArt Gold atau Pro GRATIS 1 Bulan Gunakan Sesuka Hati

    kayyis in Android 10:31 AM

    no-style

    • WhatsApp
    • Telegram
    • Youtube
    © Copyrights - | Kayyis