waktu tersisa untuk klaim promo DISKON 40%. Klaim Promo
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Visual Studio Code - List Ekstensi Pendukung CSS

Ditulis oleh aduar jendi, dipublikasi pada 23 Sep 2019 dalam kategori
Visual Studio Code - List Ekstensi Pendukung CSS - CodePolitan.com

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

img

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

img

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

img

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

img

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.

kerja

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)

Penyedia Simbol

Prettier - Code Formatter

img

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.

https://thumbs.gfycat.com/ImpracticalBlissfulGlobefish-size_restricted.gif

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

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

img

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.

Plugin in action

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


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP