Percantik JavaScript _

Cara kerja pengindahan JavaScript

Pemerelah membaca kode Anda karakter demi karakter, melacak seberapa dalam setiap pernyataan bersarang, dan memancarkanya kembali dengan spasi yang konsisten. Ia tidak pernah mengubah apa yang dilakukan kode — hanya bagaimana tampilannya.

1. Tokenisasi. Pustaka memindai input Anda menjadi aliran token: kata kunci, identifier, string, operator, dan tanda baca. String, template literal, dan literal ekspresi reguler dikenali sebagai unit tunggal, sehingga brace di dalam string tidak pernah tertukar dengan pemisah blok.
2. Lacak sarang. Saat menelusuri aliran token, pemerelah menyimpan level indentasi yang berjalan. Setiap brace keriting, tanda kurung siku, atau tanda kurung pembuka memperdalam level; setiap yang menutup mengembalikannya. Kedalaman itu menentukan berapa banyak unit indentasi yang berada di depan setiap baris yang Anda terima kembali.
3. Terapkan pilihan Anda. Pilihan indentasi Anda (2 spasi, 4 spasi, atau tab) menetapkan lebar satu level. Pengaturan brace-style menentukan apakah brace pembuka menempel pada pernyataan sebelumnya atau jatuh ke barisnya sendiri. Batas baris kosong meratakan rentetan panjang baris kosong hingga batas yang Anda pilih.
4. Pancarkan ulang. Akhirnya pemformat mencetak token kembali dengan indentasi dan jeda baris yang telah dihitung, secara opsional menambahkan titik koma yang automatic semicolon insertion akan sediakan saat runtime. Hasilnya adalah program yang sama, ditata agar manusia bisa membacanya.

Mengapa memperindah JavaScript

• Baca kode yang diminify. Bundle produksi dikirim dalam satu baris dengan nama variabel satu huruf. Pengindahan memulihkan jeda baris dan indentasi sehingga Anda benar-benar bisa menelusuri bug kembali ke pernyataan yang menyebabkannya, bahkan tanpa source map.
• Rapikan file yang tidak konsisten. Kode yang disentuh banyak orang melayang ke indentasi dan gaya brace yang campur aduk. Satu kali melewati pemerelah menormalkan seluruh file ke satu tata letak, yang membuat diff berikutnya menampilkan perubahan logika nyata alih-alih noise spasi.
• Alat ini tidak membebani halaman Anda. Kebanyakan pemformat online memuat seluruh pustaka begitu Anda membuka halaman. Alat ini lazy-load js-beautify hanya saat Anda mengklik Cantikkan atau mengaktifkan mode langsung, jadi membuka halaman hanya memerlukan beberapa kilobyte alih-alih beberapa ratus, dan render awal tetap cepat.
• Tidak ada yang meninggalkan peramban Anda. Pemerelah berjalan sepenuhnya di perangkat Anda. Kode Anda tidak pernah diunggah ke server, yang penting ketika skrip yang Anda periksa milik klien, berisi jalur API internal, atau berada di bawah perjanjian kerahasiaan.

Aplikasi umum

Pengindahan JavaScript muncul setiap kali seseorang perlu membaca kode yang tidak ditulis untuk dibaca.

• Debug produksi: tempel bundle yang diminify yang diambil dari tab Network untuk menemukan fungsi di balik stack error yang tidak bisa Anda dekode dengan cara lain.
• Persiapan code review: format ulang file kontributor yang tidak konsisten sebelum membuka pull request agar reviewer melihat logika, bukan kekacauan tata letak.
• Audit keamanan dan kepatuhan: perluas snippet analitik atau iklan pihak ketiga untuk mengonfirmasi dengan tepat apa yang dilakukannya sebelum ditayangkan.

Contoh yang dikerjakan

Ambil satu baris yang diminify: function f(a){if(a){return a*2}else{return 0}}. Tempel di atas dengan indentasi diatur ke 2 spasi dan gaya brace Rapat, lalu klik Cantikkan. Anda mendapatkan kembali blok yang mudah dibaca: function f(a) {, kemudian if (a) { yang diindentasi, pernyataan return a * 2; bersarang satu level lebih dalam, dan brace penutup yang sesuai berbaris di bawah. Ubah gaya brace menjadi Renggang dan setiap brace pembuka jatuh ke barisnya sendiri. Ubah indentasi menjadi Tab dan setiap level beralih dari dua spasi ke karakter tab. Strukturnya identik; hanya tata letak yang berubah.

FAQ

Apakah ini berjalan di peramban saya?

Ya. Pustaka js-beautify dimuat secara lazy pertama kali Anda mengklik Cantikkan atau mengaktifkan mode langsung, lalu di-cache. Kode Anda tidak pernah meninggalkan halaman — tidak ada round-trip ke server dan tidak ada unggahan.

Apakah pengindahan sama dengan un-minifying?

Ini memulihkan pemformatan yang bisa dibaca — indentasi, jeda baris, dan spasi — tetapi tidak dapat memulihkan nama variabel asli atau komentar yang dihapus oleh minifikasi. Jika source map ada, DevTools peramban Anda dapat memulihkan nama asli; pemerelah saja hanya bekerja dengan apa yang ada di file.

Apakah pengindahan mengubah cara kerja kode saya?

Tidak. Pengindahan hanya menambah dan menghapus spasi serta jeda baris; program berjalan identik. Satu-satunya opsi yang menyentuh token adalah "Tambahkan titik koma yang hilang", yang menyisipkan terminator pernyataan yang automatic semicolon insertion akan tambahkan saat runtime, membuat kode aman untuk diminify kemudian.

Apa arti pilihan gaya brace?

Rapat mempertahankan brace pembuka di baris yang sama dengan pernyataan (if (x) {), yang merupakan konvensi JavaScript umum. Renggang menjatuhkan setiap brace pembuka ke barisnya sendiri (gaya Allman). Renggang di akhir mempertahankan brace pembuka menempel tetapi menempatkan else dan catch di baris baru setelah brace penutup.

Pengindahan JavaScript di sisi peramban memberi Anda kode yang bisa dibaca tanpa langkah build atau unggahan. Tempel skrip yang diminify atau berantakan, pilih indentasi dan gaya brace Anda, lalu salin atau unduh hasilnya. Tidak ada yang meninggalkan perangkat Anda, tidak ada akun, dan pustaka hanya dimuat saat Anda memintanya — sehingga membuka halaman ini hanya memerlukan beberapa kilobyte, bukan satu megabyte.