Visual Studio Code Extensions untuk HTML & CSS

Extensions Visual Studio Code yang akan memudahkan anda dalam pemrograman front end website menggunakan HTML dan CSS

Berikut ini adalah 9 extensions Visual Studio Code yang akan memudahkan anda dalam pemrograman front end website menggunakan HTML dan CSS :

1. Auto Rename Tag

Extensions ini akan membantu anda jika ingin mengubah nama tag secara cepat, misalnya anda ingin mengubah tag H1 menjadi H2, anda cukup mengubah opening tagnya saja menjadi H2, maka otomatis closing tagnya akan berubah menjadi H2.
Cara penggunaan : Cukup ubah salah satu tag (opening atau closing), maka pasangan tag yang lainnya akan otomatis berubah

2. Prettier - Code formatter

Extensions ini akan membantu merapikan kode-kode anda sesaat ketika anda menyimpan pekerjaan anda. Kode yang awalnya berantakan akan menjadi rapi secara otomatis tanpa anda harus melakukannya secara manual satu per satu.
Cara penggunaan : Anda hanya perlu menyimpan file anda (Ctrl+S), maka otomatis code anda akan disusun secara rapi dengan sendirinya.

3. Open in browser

Extensions ini akan membantu anda membuka hasil pekerjaan anda langsung ke browser.
Cara penggunaan :
Tekan ALT+B untuk preview ke default browser
Tekan Shift+ALT+B untuk preview ke browser lainnya

4. Live preview

Extensions ini akan membantu anda melihat hasil dari pekerjaan anda secara live, langsung di tab Visual Studio Code. Fitur ini membantu anda agar tidak perlu berpindah-pindah dari Visual Studio Code ke browser selama pekerjaan anda sedang dalam proses.
Cara penggunaan :
Klik Kanan pada area file yang terbuka, lalu klik Show Preview

5. IntelliSense for css class names in HTML

Extensions ini akan membantu anda untuk melihat kelas kelas CSS yang terhubung dengan halaman yang sedang anda kerjakan. Fitur ini sejenis autocomplete untuk CSS. Fitur ini membantu anda menyelesaikan pekerjaan lebih mudah, khususnya yang berhubungan dengan penulisan syntax CSS.
Cara penggunaan :
Ketikkan salah satu huruf dalam tanda petik isian class, maka kelas-kelas yang terhubung akan muncul dalam daftar

6. CSS Peek

Extensions ini membantu anda untuk melihat style dari kelas CSS yang ada pada setiap elemen.
Cara penggunaan : Arahkan mouse ke nama class bersamaan dengan tombol Ctrl (Ctrl+Hower), maka style yang ada pada kelas itu akan terlihat. Jika style terlalu banyak, maka anda bisa menekan tombol link yang ada didalamnya untuk membuka tab baru yang berisi susunan style pada class tersebut.

7. Indent rainbow

Extensions ini memberikan garis bantu vertikal yang berwarna warni untuk membantu anda melihat konten dari setiap elemen di project HTML anda.
Cara penggunaan : Otomatis

8. Polacode

Extensions ini membantu anda untuk membuat screenshot dari code atau script yang ingin anda bagikan. Hasil berupa file image yang siap dishare atau sebagai bahan untuk tutorial.
Cara penggunaan : Tekan menu View->Command Pallete atau tekan Ctrl+Shift+P, kemudian klik Polacode. Paste Code pada kotak polacode yang muncul, sesuaikan ukuran dengan drag kanan kiri atas bawah, setelah sesuai klik tombol Polacode yang berbentuk bulat dibawah kotak, kemudian simpan file.

9. htmltagwrap

Extensions ini membantu anda untuk mengubah text atau kalimat biasa menjadi tag html.
Cara penggunaan : Blok taxt atau kalimat yang akan dijadikan tag HTML, kemudian klik Alt+W atau Options+W untuk Mac. Secara default tag yang terbentuk adalah tag paragraf, bisa dengan mudah disesuaikan dengan tag lain yang dibutuhkan dengan mengganti salah satunya (opening atau closing)

Credit : Penulis : Nurani P Gambar Ilustrasi : Canva