Softonic

JavaScript Formatter

Langkah 1 / 3
Berikutnya

Tempel gumpalan JavaScript yang ter-minify atau berindentasi buruk dan dapatkan kembali kode bersih yang mudah dibaca, terformat dengan aturan yang sama yang dipakai editor. Pilih tab atau spasi, kutipan tunggal atau ganda, pakai titik koma atau tidak, koma akhir di ES5 atau di semua tempat. Menangani sintaks modern, optional chaining, nullish coalescing, JSX, TypeScript, top-level await.

Cara memformat JavaScript

  1. 1

    Tempel source

    JS, JSX, atau TypeScript valid mana pun. Parser memilih dialek dari sintaksnya.

  2. 2

    Atur preferensi Anda

    Ukuran indentasi, tab vs spasi, gaya kutipan, titik koma, lebar cetak, koma akhir.

  3. 3

    Format

    Tool menjalankan pass yang kompatibel-Prettier dan menghasilkan hasil terformat.

  4. 4

    Salin output

    Salin sekali klik, atau unduh sebagai file. Indentasi asli dibuang, bukan dilapisi di atas.

Opsi gaya

Opsi Nilai Bawaan
Indentasi tab, 2, 4 2 spasi
Gaya kutipan single, double ganda
Titik koma always, never selalu
Lebar cetak 60 - 120 80
Koma akhir none, es5, all es5
Kurung fungsi panah always, avoid selalu
Spasi dalam kurung true, false true
Kutipan tunggal JSX true, false false

Mengapa pemformatan penting

Pemformatan bukan kosmetik, ini soal mengurangi beban kognitif. Codebase yang terformat konsisten membuat reviewer fokus pada perubahan logika, bukan berburu kurung yang salah tempat.

  • Bike-shedding berakhir begitu proyek mengadopsi formatter. git diff menampilkan perubahan nyata, bukan debat indentasi.
  • Pre-commit hook (dengan tool seperti Husky + lint-staged) otomatis memformat file ter-stage sebelum di-commit.
  • Integrasi editor (VS Code, WebStorm) menjalankan aturan yang sama saat save.

Apa yang tidak dilakukan pemformatan

  • Ia tidak melakukan lint. Aturan gaya (no-unused-vars, eqeqeq) adalah wilayah ESLint. Formatter hanya membentuk ulang spasi dan tanda baca, ia tidak menolak kode karena masalah logika.
  • Ia tidak memperbaiki error sintaks. Jika input adalah JS tidak valid, formatter akan melempar error. Pakai sebagai pengecekan bahwa kode Anda setidaknya bisa di-parse.
  • Ia tidak menegakkan konvensi penamaan. camelCase vs snake_case adalah aturan lint, bukan formatter.

Kesalahan umum

  • Melawan formatter. Jika Anda terus memformat ulang setelah ia berjalan, Anda berdua membuang waktu. Entah konfigurasikan opsinya, atau terima pilihan proyek.
  • Menjalankan format pada file yang dihasilkan. Output bundler, kode transpile, .min.js, tidak ada yang diuntungkan. Format source, bukan artefak.
  • Memformat tanpa parsing. “Pretty-print” berbasis regex akan merusak template literal, regex literal, dan JSX. Selalu pakai formatter berbasis AST (seperti yang ini).

Pertanyaan yang Sering Diajukan

Ya. Parser mendeteksi sintaks TypeScript (type, interface, generic, decorator) dan memformat sesuai. JSX juga didukung dalam file .tsx / .jsx.

Ia mengikuti aturan yang sama dengan bawaan Prettier, dapat dikonfigurasi melalui opsi biasa (lebar cetak, kutipan, titik koma, koma akhir). File yang diformat di sini harusnya cocok dengan yang diformat Prettier dengan config sama.

Formatter membutuhkan JavaScript yang valid dan dapat di-parse. Jika Anda mendapat error, kode kemungkinan punya masalah sintaks (kurung tak tertutup, JSX tidak valid, typo). Jalankan lewat linter dulu jika pesannya tidak jelas.

Ya. Komentar baris-tunggal (//) maupun blok (/* */) dipertahankan dalam output, diposisikan dekat dengan tempatnya di source.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Alat ini tersedia dalam bahasa lain