Visual Studio Code - List Ekstensi Pendukung CSS

Salah satu bagian yang sangat mengesankan dari Visual Studio itu adalah kemampuan kustomisasinya, terutama bagian dari fasilitas ekstensi. Dengan banyaknya pembuat atau pengembang ekstensi, fungsionalitas Visual Studio Code tidak ada habisnya! Berikut adalah beberapa ekstensi sangat membantu untuk menulis sourcode CSS.

HTML CSS Support

HTML CSS Support adalah ekstensi yang memberikan intellisense dalam file HTML yang menyertakan source code CSS Berikut list fitur yang disediakan.

Link Ekstensi

Satu hal yang sangat istimewa tentang ektensi ini adalah anda dapat menentukan atribut file CSS secara online. Dengan menambah pengaturan berikut. Contoh nya pada file CSS Bootstrap 4

"css.remoteStyleSheets": [
	"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
]

Intellisense for CSS Class Names

Ekstensi Visual Studio Code yang menyediakan nama class CSS untuk atribut HTML berdasarkan definisi yang ditemukan di Workspase Anda atau file eksternal yang dirujuk melalui elemen link.

Link Ekstensi

Fitur yang di sediakan :

Mendukung penyesuian otomatis untuk definisi class CSS. Mendukung stylesheet eksternal yang dirujuk melalui elemen link dalam file HTML, perintah secara manual melakukan cache ulang definisi class yang digunakan dalam penyesuaian otomatis. Pengaturan pengguna untuk mengganti folder dan file yang mana harus dipertimbangkan atau dikecualikan dari proses caching.

Mode Bahasa yang Didukung : HTML, Razor, PHP, Laravel (Blade), JavaScript, JavaScript React (.jsx), TypeScript React (.tsx), Vue (.vue), Twig, Markdown (.md), Embedded Ruby (.html.erb), Handlebars, EJS (.ejs), Django template (django-html).

CSS Peek

Ekstensi ini memperluas pengeditan source code HTML dan ejs dengan dukungan Go to Definition dan Go To Symbol di dalam Workspace untuk css/scss/less (class dan ID) yang ditemukan dalam kode sumber berupa string.

Ekstensi ini mendukung semua kemampuan pelacakan definisi symbol, seperti class, ID, dan tag HTML.

Link Ekstensi

​ Memuat file css dan melakukan pengeditan praktis ( Ctrl+Shift+F12 )

​ Go To : memuat langsung ke file css atau buka di editor baru (F12)

​ Memperlihatkan definisikan symbol (Ctrl+hover)

Prettier - Code Formatter

Link Ekstensi

Prettier adalah ekstensi digunakan untuk merapihkan source code secara otomatis. dengan cara mem-parsing source code yang Anda buat lalu mencetaknya kembali dengan tata letak yang beraturan/rapih seperti source code pada umumnya yang dimana memperhitungkan panjang garis maksimum, dan bisa mengelompokan source code bila perlu.

Pemakaian: Ctrl + Shift + P ketikan "Format Document"

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Tentu ada banyak proyek website menggunakan Bootstrap atau Font Awesome. Itu sebabnya saya pikir layak membagikan ekstensi ini. Ekstensi ini menyediakan Intellisense untuk Bootstrap 4, Font Awesome 4, dan Font Awesome 5.

Link Ekstensi

Ada begitu banyak class di Bootstrap sehingga tidak memungkinkan menghafal semuanya. sama dengan package Font Awesome, tidak usah bingung lagi berkat etensi ini Anda sudah di permudahkan dengan ekstensi ini.

Untuk mengaktifkan Bootstrap sangat mudah tingal ketikan awalan "B4" pada lembar kerja, ekstensi akan otomatis bekerja.

Penutup

Sekian dari saya tentang beberapa ekstensi CSS yang membantu pemrograman web. Jika anda merasa saya melewatkan sesuatu atau ada kata atau tulisan yang salah, penulis mohon maaf. Untuk mengkoreksi artikel ini Anda cukup berkomentar artikel dibawa ini.

Referensi : https://scotch.io/bar-talk/6-awesome-css-extensions-for-vs-code