CSS pada dasarnya berupa berkas teks biasa, sehingga teorinya bisa ditulis di aplikasi Notepad sekalipun. Namun menulis kode di aplikasi teks biasa terasa lambat: tidak ada pewarnaan sintaks, tidak ada pelengkap otomatis, dan kesalahan ketik lolos tanpa peringatan. Code editor mengatasi semua itu. Pada chapter ini kita membandingkan pilihan yang populer, lalu menyiapkan rekomendasi utama beserta ekstensi yang berguna untuk pekerjaan CSS.
Pilihan Editor yang Umum #
| Editor | Harga | Karakter utama |
|---|---|---|
| VS Code | Gratis | Paling banyak dipakai; ringan; ekosistem extension paling besar |
| WebStorm | Berbayar, tersedia opsi gratis untuk penggunaan non-komersial | IDE lengkap dengan banyak fitur bawaan |
| Sublime Text | Berbayar (masa uji coba tanpa batas waktu) | Sangat cepat dan ringan |
| Zed | Gratis, open source | Performa tinggi; ekosistemnya masih bertumbuh |
| Neovim | Gratis, open source | Berbasis terminal; sangat bisa dikustomisasi, kurva belajar tercuram |
Untuk course ini kita memakai VS Code sebagai acuan. Alasannya sederhana: gratis, berjalan di semua sistem operasi, dan paling banyak referensi belajarnya. Meski demikian, prinsip kerjanya sama di semua editor — kita menulis berkas teks berekstensi .css, menyimpannya di folder proyek, lalu membukanya di browser.
Ekstensi VS Code untuk Pekerjaan CSS #
Kekuatan utama VS Code ada pada extension. Pasang lewat panel Extensions (ikon kotak di sidebar atau Ctrl+Shift+X). Tiga ekstensi berikut paling membantu saat mengerjakan CSS:
| Ekstensi | Fungsi |
|---|---|
| Prettier – Code formatter | Memformat kode secara otomatis sehingga indentasi dan spasi tetap konsisten |
| Live Server | Membuka halaman lewat server lokal dan memuat ulang otomatis setiap berkas disimpan |
| CSS Peek | Melompat ke definisi suatu class CSS langsung dari berkas HTML |
Di samping tiga itu, VS Code sudah membawa banyak kemampuan bawaan yang relevan:
- Color picker bawaan: setiap nilai warna pada CSS diberi kotak kecil di margin editor; klik kotaknya untuk membuka pemilih warna visual.
- Emmet: ketik
!lalu tekan Tab pada berkas HTML untuk menghasilkan kerangka dokumen lengkap seketika. - Peringatan sintaks: kurung kurawal yang belum ditutup langsung ditandai, sehingga kesalahan terlihat sebelum halaman dibuka.
Pengaturan yang Layak Diaktifkan #
Buka pengaturan (Ctrl+,) lalu atur dua hal berikut:
- Format On Save — aktifkan agar setiap penyimpanan berkas otomatis merapikan kode. Kita tidak perlu memikirkan gaya penulisan lagi.
- Default Formatter — pilih Prettier sebagai formatter bawaan agar Format On Save memakai mesin yang sama untuk semua jenis berkas.
Efek format otomatis ini terlihat jelas:
Kode yang ditulis acak:
h1{color:#1f6f54;font-size:32px}
Hasil setelah Format On Save:
h1 {
color: #1f6f54;
font-size: 32px;
}Dua bentuk di atas identik bagi browser, tetapi bentuk kedua jauh lebih mudah dibaca. Konsistensi format juga membuat riwayat perubahan pada version control hanya berisi perubahan yang bermakna, bukan perbaikan spasi.
Latihan: Berkas Pertama di Editor #
Buat folder bernama proyek-latihan, buka folder tersebut di VS Code (menu File → Open Folder), lalu buat berkas index.html berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Proyek latihan</title>
</head>
<body>
<h1>Proyek latihan CSS</h1>
<p>Berkas ini akan kita hubungkan ke styles.css pada chapter berikutnya.</p>
</body>
</html>Bila ekstensi Live Server sudah terpasang, klik kanan berkas lalu pilih Open with Live Server. Halaman terbuka di browser dan dimuat ulang otomatis setiap kali kamu menyimpan perubahan — siklus edit dan lihat hasil menjadi jauh lebih cepat.
Ringkasan #
VS Code adalah pilihan aman untuk mengikuti course ini: gratis, ringan, dan diperkaya ekstensi seperti Prettier, Live Server, dan CSS Peek. Aktifkan Format On Save sejak awal agar kode selalu rapi tanpa usaha tambahan. Editor sudah siap dan folder proyek berisi index.html; pada chapter berikutnya kita membuat berkas CSS pertama yang sesungguhnya.