5 Ekstensi Visual Studio Code untuk CSS Development

"Koding setiap hari, tapi kok ya gini - gini aja." mungkin cocok untuk kalimat pembuka pada artikel singkat yang bakal saya tulis dibawah ini. Bukan tanpa sebab, saya mengatakan demikian karena ini terjadi pada kehidupan saya dan teman - teman seperjuangan saya. Buat agan yang udah banyak pengalaman mungkin beda cerita ya, tetapi buat rookie atau newbie bagi saya khususnya, kegiatan koding bakal kerasa mainstream karena masih minimnya pengalaman soal kode mengkode.

Kebetulan melalui sebuah kegiatan komunitas Linux dan Opensource (bisa disebut UKM sih...) yang saya ikuti didalam kampus, memberikan sedikit banyak pengalaman untuk mengantarkan saya kejenjang 'agak' profesional kodinger. Sedikit banyak gimana maksudnya gan, begini, sedikit ini saya utarakan karena komunitas yang saya ikuti ini sangat minim sekali waktu untuk berkumpul, bahkan agendanya pun dijadwal, jadinya ya saya merasa kurang leluasa untuk mengasah ilmu yang lebih dalam lagi. Banyak bisa saya utarakan sebab saya merasa sangat jauh berada digaris yang berbeda dari senior saya, saya merasa level saya jauh dibawah, seperti halnya seorang bayi yang baru saja lahir dan tidak tahu menahu soal dunia pro itu seperti apa. Dan beruntung saya sudah bergabung didalam komunitas tersebut, banyak sekali pengalaman yang saya dapatkan, dan itu benar-benar langsung dari ahlinya.

Okeh! Kok kata pengantarnya panjang sih gan, jadi males nih mau ngebaca artikelnya >:(
ehh.. maap gan, saya jadi sedikit curcol. tapi beneran deh, pesan saya ikut komunitas itu penting apalagi menyangkut komunitas IT yang mana didalamnya banyak orang berpengalaman yang mau berbagi dengan kita, dan itu gratis. Rugi misalnya agan kuliah tapi gak join komunitas seperti yang saya sebutkan. Cukup, itu pesan dari saya, mari kita lanjutkan artikelnya untuk membahas ekstensi Visual Studio Code.

Informasi tentang Ekstensi VSCode ini saya dapatkan melalui komunitas saya gan, jadi sebelum saya tahu menahu soal ekstensi, package, plugin pada sebuah kode editor ataupun IDE, saya beneran bekerja secara manual. Jika dibandingkan dengan menggunakan ekstensi atau tidak, hasilnya jauh lebih cepat dengan menggunakan bantuan ekstensi, jelas, tetapi ini saya lakukan setelah saya pernah mencoba mengkoding manual, dan itu membosankan, maka saya pasanglah ekstensi tersebut untuk membantu menyingkat waktu.

Berikut ini daftar ekstensi Visual Studio Code yang wajib kalian install untuk CSS Development:

1. HTML CSS Support (Unduh disini)

Fungsinya buat apa sih ini sob?
Banyak, seperti yang sudah tertulis dalam gambar. Ekstensi ini bisa membantu mempercepat proses, salah satunya dengan fitur auto complete untuk atribut class dan id. Ekstensi ini juga bisa membantu kalian scanning CSS / SCSS file yang ada dalam folder workspace kalian.

2. IntelliSense for CSS Class Name in HTML (Unduh disini)

Fungsinya buat apa nih gan?
Mungkin gambar diatas yang bisa menjelaskan ya gan, hehe

3. CSS Peek (Unduh disini)

Kata mbah Google => Ekstensi mendukung semua kemampuan normal pelacakan definisi simbol, tetapi melakukannya untuk penyeleksi css (kelas, ID, dan tag HTML). Ini termasuk:

Peek: memuat file css sebaris dan melakukan pengeditan cepat di sana. (Ctrl + Shift + F12)
Go To: lompat langsung ke file css atau buka di editor baru (F12)
Hover: perlihatkan definisi dalam layang di atas simbol (Ctrl + hover)

gitu...

=> Beautify Code Extension

Selain daripada auto complete tag, kalian mungkin juga bakal butuh yang namanya formatter. Disini fungsi dari formatter adalah untuk mempercantik susunan kode yang sudah kalian tulis. Semisal beberapa ada yang dirasa kurang rapi, maka dengan ekstensi ini kalian bisa dengan sekali klik, bim salabim, kode kalian rapi seketika.

Kalian cukup download salah satu saja dari daftar dibawah ini:

1. Beautify css/sass/scss/less (Unduh disini)
2. Beautify (Unduh disini) ~> ini yang sedang saya pakai.
3. Prettier - Code formatter (Unduh disini)