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

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 dari formulir singkat: atur entry, folder output, dan mode, lalu aktifkan TypeScript, Babel, loader CSS, HtmlWebpackPlugin, dan dev server.

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.

Dari SQL ke NoSQL

Ubah satu pernyataan SQL SELECT menjadi kueri find() MongoDB. Memetakan kolom, WHERE (=, >, <, >=, <=, !=), AND/OR, ORDER BY, dan LIMIT. Tanpa JOIN, GROUP BY, atau agregasi.

Validator XSD

Validasi dokumen XML terhadap skema XSD dan laporkan ketidakcocokan elemen dan tipe dengan nomor baris persis.

Generator Robots.txt

Buat file robots.txt yang valid: tetapkan user-agent, cantumkan jalur Disallow dan Allow, tambahkan Crawl-delay, dan deklarasikan sitemap Anda, lalu salin hasilnya.

Generator Slug

Konversi judul atau frasa apa pun menjadi slug yang aman untuk URL: huruf kecil, dipisahkan dengan tanda hubung, tanpa aksen, opsi membuang stop word, serta kompatibel dengan Unicode.

Alat ini tersedia dalam bahasa lain