TSX Formatter & Minifier
Rapikan TSX (React + TypeScript) dengan Prettier, atau padatkan. Tool ini merapikan (beautify) sekaligus memadatkan (minify) TSX dalam satu halaman — tempel kode, pilih mode, lalu klik. Semua diproses di perangkat Anda tanpa dikirim ke server.
Semua proses berjalan di browser Anda. Kode tidak pernah dikirim ke server kami.
Contoh
Contoh Input
const A=():JSX.Element=><div/>
Contoh Output
const A = (): JSX.Element => <div />;
Cara Penggunaan
- 1Pilih mode Format atau Minify di bagian atas.
- 2Tempel kode TSX Anda pada kolom Input.
- 3Jika perlu, atur lebar indentasi di "Pengaturan Lainnya".
- 4Klik tombol (atau tekan Ctrl+Enter) untuk memproses. Hasilnya muncul di kolom Hasil.
- 5Klik Salin untuk menyalin hasilnya.
Tentang TSX Formatter
TSX Formatter merapikan kode TSX — JSX dengan TypeScript — menggunakan Prettier, memahami baik markup JSX maupun anotasi tipe TS.
Cara kerjanya: Format memakai parser TypeScript Prettier yang menangani JSX + tipe sekaligus, lalu mencetak ulang secara konsisten. Minify menghapus whitespace dan komentar.
TSX adalah format paling umum untuk komponen React modern berbasis TypeScript. Memformatnya menjaga komponen tetap rapi dan bertipe dengan gaya yang seragam.
Pertanyaan Umum (FAQ)
Apakah TSX ini bisa format sekaligus minify?
Ya. Satu halaman dengan toggle — mode Format untuk merapikan (beautify) dengan indentasi, dan mode Minify untuk memadatkannya. Tidak perlu dua halaman terpisah.
Apakah kode saya dikirim ke server?
Tidak. TSX diproses sepenuhnya di browser Anda menggunakan JavaScript/WebAssembly. Kode Anda tidak pernah meninggalkan perangkat Anda.