Code Formatter

Fungsinya

Code formatter ini mengambil kode yang berdesakan, sudah di-minify, atau indentasinya tidak konsisten, lalu mencetaknya kembali dengan gaya yang bersih dan seragam. Alat ini mendukung bahasa yang paling sering ditemui dalam pekerjaan web: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML, dan GraphQL.

Di balik layar, alat ini menjalankan Prettier, formatter yang dipakai jutaan proyek, sehingga hasilnya persis seperti kode yang dirapikan di VS Code atau oleh pre-commit hook. Parser setiap bahasa hanya dimuat saat Anda memilihnya, sehingga halaman tetap cepat.

Cara menggunakan

1. Pilih Bahasa kode Anda.
2. Tempel kodenya, atau buka sebuah file.
3. Pilih gaya Indentasi (2 spasi, 4 spasi, atau tab) dan Lebar baris. Baris yang lebih panjang dari lebar tersebut akan dipecah di tempat yang diizinkan bahasa itu.
4. Untuk JavaScript dan TypeScript, pilih apakah pernyataan diakhiri dengan titik koma. Untuk script dan stylesheet, pilih kutip tunggal jika proyek Anda memakainya.
5. Salin hasilnya atau unduh.

Contoh

Contohnya adalah halaman HTML satu baris dengan CSS dan JavaScript inline. Setelah dirapikan, setiap elemen berada di barisnya sendiri, aturan CSS dijabarkan dengan satu deklarasi per baris, dan arrow function di script mendapat tanda kurung serta titik koma:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Tips

• Merapikan kode juga sekaligus menjadi pemeriksaan sintaks cepat. Jika Prettier tidak bisa mem-parse input, pesan error menampilkan baris dan kolomnya sehingga Anda bisa langsung melompat ke kesalahannya.
• XML dirapikan dengan menganggap whitespace tidak signifikan agar tag bersarang mendapat indentasi. Jika dokumen Anda bergantung pada whitespace yang persis di dalam elemen, periksa hasilnya sebelum dipakai.
• Butuh kebalikannya? Gunakan minifier JavaScript dan CSS untuk memperkecil kode untuk produksi, atau JSON formatter untuk validasi dan minify JSON.