Lewati ke konten

Pemformat kode

Format atau minifikasi JSON, JavaScript, HTML, dan CSS di peramban Anda, dengan deteksi bahasa otomatis saat Anda menempelkan atau menjatuhkan file.

atau lepaskan satu di sini

Hasil pemformatan

Status

Siap

Tempel, jatuhkan, atau ketik kode, lalu klik Format atau Minifikasi.

Karakter
-
Baris
-

Cara kerja

Pemformat kode mengatur ulang indentasi sumber yang berantakan atau terminifikasi dengan baris baru dan spasi yang tepat, sedangkan alat minifikasi menghapus ruang kosong tersebut untuk mengecilkan ukuran file guna produksi, tanpa mengubah fungsi kode.

  1. Tempelkan, jatuhkan, atau ketik kode

    Menempelkan atau menjatuhkan file juga akan mencoba mendeteksi bahasa secara otomatis.

  2. Konfirmasi bahasa

    JSON, JavaScript, HTML, atau CSS. Ubah secara manual jika deteksi tidak tepat.

  3. Format atau minifikasi

    Format mengatur ulang indentasi; Minifikasi mengompresi menjadi ruang kosong minimal. Salin atau unduh hasilnya.

Format versus minifikasi

Format menambahkan ruang kosong dan baris baru agar kode mudah dibaca dan diawakutu oleh pengguna. Minifikasi menghapus spasi, baris baru, dan komentar yang tidak perlu untuk menghasilkan file yang lebih kecil, yang biasanya dikirimkan situs web kepada pengunjung untuk mengurangi waktu muat. Keduanya mempertahankan logika yang sama; hanya ruang kosong dan komentar yang berubah.

Hal yang aman ditangani pemformat JavaScript

Pemformat dan peminifikasi JavaScript memperlakukan string literal templat dengan kutip tunggal, kutip ganda, dan tanda kutip terbalik sebagai teks buram, sehingga tanda kurung kurawal, titik koma, atau karakter komentar yang ditulis di dalam string, termasuk di dalam ekspresi templat ${...}, dibiarkan persis seperti yang Anda ketik alih-alih diformat ulang seolah-olah itu adalah kode. Alat ini tidak mengurai JavaScript sepenuhnya, sehingga menerapkan indentasi struktural alih-alih panduan gaya seperti Prettier atau ESLint.

Semuanya tetap berada di perangkat Anda

Proses pemformatan dan peminifikasian berjalan sepenuhnya di peramban Anda, termasuk untuk file yang Anda seret atau pilih. Kode Anda, termasuk rahasia yang tertanam, titik akhir API, atau logika bisnis, tidak pernah meninggalkan perangkat Anda, sehingga alat ini aman digunakan dengan kode berpemilik, konfigurasi internal, atau bundel produksi terminifikasi yang ingin Anda periksa.

Pertanyaan yang sering diajukan

Bagaimana cara memformat dan merapikan kode JavaScript atau HTML yang berantakan secara daring?

Tempel atau seret kode Anda, konfirmasi bahasa yang terdeteksi atau pilih salah satu dari menu tarik-turun, lalu klik Format. Alat ini menerapkan indentasi yang sesuai untuk bahasa yang dipilih: penyarangan tag untuk HTML, indentasi blok untuk JavaScript, dan pengelompokan properti untuk CSS. Jumlah Karakter dan Baris diperbarui untuk menampilkan hasilnya.

Apakah kode sumber dikirim ke server saat menggunakan pemformat kode ini?

Tidak. Semua logika pemformatan dan minifikasi berjalan sepenuhnya di peramban Anda, termasuk file yang Anda seret atau pilih. Kode Anda tidak pernah meninggalkan perangkat Anda, sehingga alat ini aman digunakan dengan kode berpemilik, konfigurasi internal, atau bundel produksi hasil minifikasi yang ingin Anda periksa.

Apakah alat ini menangani literal templat JavaScript dengan backtick secara benar?

Ya. Literal templat yang dibatasi backtick, termasuk interpolasi `${...}` di dalamnya, diperlakukan sebagai satu string opak. Kurung kurawal atau titik koma yang ditulis di dalam teks templat dibiarkan persis seperti yang diketik alih-alih diformat ulang sebagai kode, yang sebelumnya dapat merusak nilai aktual string tersebut.

Dapatkah saya menggunakan alat ini untuk melakukan minifikasi JavaScript atau CSS untuk produksi?

Alat ini menyediakan minifikasi dasar dengan menghapus spasi kosong, baris baru, dan komentar, yang mengurangi ukuran file. Alat ini tidak melakukan tree-shaking, penghapusan kode mati, penggantian nama variabel, atau optimasi tingkat lanjut lainnya. Untuk minifikasi tingkat produksi, gunakan alat khusus seperti Terser untuk JavaScript, cssnano untuk CSS, atau bundler seperti webpack atau Vite.

Apa perbedaan antara Pemformat Kode ini dan alat Pemformat JSON yang terpisah?

Pemformat JSON dikhususkan hanya untuk JSON dan memberikan pesan kesalahan validasi yang tepat beserta posisi karakternya. Pemercantik Kode ini menangani JSON sebagai satu dari empat bahasa bersama JavaScript, HTML, dan CSS. Jika Anda bekerja secara eksklusif dengan JSON dan menginginkan validasi paling terperinci, silakan gunakan pemformat JSON khusus.