Beralih antara format dan minify kapan saja; hasil diperbarui saat Anda mengetik. Rapikan HTML, CSS, dan JavaScript yang berantakan, atau perkecil untuk situs web yang lebih cepat. Berjalan di browser Anda, gratis, dan privat.
Cara memformat atau minify kode
- Pilih Format atau Minify.
- Pilih bahasa: HTML, CSS, atau JavaScript.
- Untuk memformat, pilih indentasi: 2 spasi, 4 spasi, atau Tab.
- Tempel kode Anda ke kotak input, atau tekan Contoh untuk melihat cara kerjanya.
- Baca hasil di bawah Diformat, lalu tekan Salin.
- Hapus mengosongkan input.
Fungsi pemformatan
Pemformatan hanya mengubah spasi kosong. CSS mendapat satu deklarasi per baris, aturan dipisah baris kosong, dan media query serta aturan bersarang diberi indentasi. JavaScript diindentasi ulang menurut kurung kurawalnya dengan satu pernyataan per baris, sementara string, template literal, regular expression, dan header for (;;) dibiarkan persis seperti ditulis. HTML diindentasi menurut penumpukan, dengan elemen inline tetap sebaris dengan teksnya agar halaman dirender sama, dan blok <script> serta <style> inline diformat dengan formatter JavaScript dan CSS.
Fungsi minify
Minify menghapus komentar dan setiap spasi yang tidak dibutuhkan browser. Komentar yang diawali /*! dipertahankan, karena biasanya berisi lisensi. JavaScript mempertahankan jeda baris di mana penyisipan titik koma otomatis bergantung padanya, jadi kode yang ditulis tanpa titik koma tetap berfungsi. Nama tidak dipendekkan dan tidak ada kode yang ditulis ulang, jadi hasilnya berperilaku persis seperti aslinya. Di HTML, isi pre dan textarea tidak pernah disentuh, dan spasi antar elemen inline dipertahankan sebagai satu spasi agar kata tidak menyatu.
Batas yang perlu diketahui
Formatter membaca kode dengan tokenizer sungguhan, bukan cari dan ganti, tetapi tidak mengurai sepenuhnya, jadi tidak akan menangkap setiap kesalahan sintaks. Saat menemukan masalah, seperti string, komentar, atau tanda kurung yang tidak tertutup, alat memberi tahu barisnya. TypeScript, JSX, dan bahasa template tidak didukung. Minify HTML menghapus jarak antar elemen blok seperti item daftar; jika tata letak bergantung pada spasi itu di antara item inline-block, periksa setelah minify.
Tips
- Simpan file asli Anda. Kode yang sudah di-minify sulit dibaca dan diedit, jadi minify salinan untuk dipublikasikan.
- Uji halaman Anda setelah minify, terutama jika tata letak bergantung pada spasi antar elemen.
- Gunakan pemformatan untuk membaca kode yang tidak Anda tulis, seperti cuplikan yang disalin atau file yang terkompresi.
- Pilih indentasi yang sama dengan tim Anda agar perubahan tetap kecil.
- Bandingkan sebelum dan sesudah dengan pemeriksa diff.
Siapa yang memakainya
Siswa yang belajar membaca kode, freelancer yang merapikan situs klien, dan usaha kecil yang memangkas bobot halaman untuk kecepatan. Untuk file JSON gunakan toolkit JSON.
Privat sejak awal
Kode Anda diformat di halaman ini di browser Anda. Tidak ada yang diunggah, jadi aman untuk pekerjaan privat atau yang belum dirilis.
Pertanyaan
Apakah minify akan merusak kode saya?
Alat ini hanya menghapus komentar dan spasi yang tidak perlu dan tidak menulis ulang kode Anda, sehingga perilakunya tetap sama. Selalu uji hasilnya.
Apakah mendukung TypeScript atau JSX?
Tidak. HTML, CSS, dan JavaScript didukung.
Mengapa sebuah komentar dipertahankan?
Komentar yang diawali /*! dipertahankan karena biasanya berisi lisensi.