Pertanyaan yang Sering Diajukan

Alat web interaktif gratis yang memungkinkan Anda mengonfigurasi setiap opsi Prettier secara visual dan langsung menyalin file .prettierrc yang dihasilkan.

Prettier adalah formatter kode yang menerapkan gaya konsisten di seluruh kode, menghilangkan perdebatan tentang gaya dalam ulasan kode.

File konfigurasi di root proyek yang memberi tahu Prettier cara memformat kode.

Pilih opsi Prettier di halaman utama. Konfigurasi diperbarui secara real-time. Klik "Salin Konfigurasi" dan tempel JSON ke file .prettierrc.

Ya, sepenuhnya gratis. Tanpa pendaftaran, tanpa akun, tanpa batas penggunaan.

Ya. Mencakup setiap opsi Prettier yang didukung resmi dengan deskripsi dan nilai default.

Klik tombol "Salin Konfigurasi" di sidebar (desktop) atau tombol mengambang (mobile).

Ketiganya adalah cara yang valid. .prettierrc mendukung JSON/YAML, prettier.config.js adalah modul JavaScript, kunci prettier di package.json menyimpan semuanya dalam satu file.

Ya. Mendukung TypeScript, JSX/TSX, Vue single-file component, dan banyak format lainnya.

Instal ekstensi "Prettier - Code formatter" dan tambahkan formatOnSave: true ke pengaturan VS Code.

Jalankan npx prettier --write . di root proyek.

JavaScript, TypeScript, JSX, CSS, HTML, Vue, JSON, YAML, Markdown, dan lainnya.

Buat file .prettierignore di root proyek.

Ya. Instal eslint-config-prettier.

Memberi tahu panjang baris target. Default 80.

singleQuote mengontrol kutipan di JS/TS, jsxSingleQuote mengontrol atribut JSX.

Gunakan bilah pencarian di bagian atas halaman.

Ya. Klik tombol toggle tema di header.

printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Buka issue atau pull request di repositori GitHub.

Anda dapat memilih rilis Prettier 3.x apa pun dari dropdown versi — 3.0 hingga 3.6 ditambah "latest". Bundel versi yang dipilih dimuat sesuai permintaan dari jsDelivr, sehingga daftar opsi selalu sesuai dengan skema rilis tersebut.

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, template Angular, JSON, JSON5, JSON dengan komentar, Markdown, MDX, YAML, dan GraphQL. Parser dideteksi secara otomatis dari input, tetapi Anda dapat menggantinya dengan dropdown.

Klik tombol bagikan dan versi Prettier saat ini, opsi yang dipilih, kode, serta penggantian parser dikompres dengan LZ ke dalam hash URL, lalu disalin ke clipboard. Membuka tautan tersebut akan memulihkan konfigurasi yang sama persis. Tidak ada yang dikirim ke server — semuanya tetap di browser.

Itu menunjukkan berapa banyak token AI yang akan dikenakan untuk input dan output Anda di bawah model yang dipilih. GPT-4o / GPT-4 / GPT-3.5 menggunakan tokenizer BPE resmi untuk hitungan tepat; Claude, Gemini, Llama, dan Mistral menggunakan perkiraan berbasis karakter dengan awalan "~".

Ya. Versi Prettier, pilihan opsi, dan preferensi split-view / tokenizer Anda disimpan ke localStorage, sehingga pemuatan ulang memulihkan semuanya. Hash URL yang dapat dibagikan akan diutamakan jika ada saat Anda membuka halaman.

Ketika parser Prettier tidak dapat memparsing input Anda — biasanya karena parser yang dipilih tidak cocok dengan kode (misalnya CSS dipilih tetapi Anda menempelkan JSX) — pesan kesalahan muncul di strip merah di atas diff. Ganti parser agar sesuai dengan kode Anda dan kesalahan akan hilang.

Ya. Tab Preview memiliki parser dropdown tersendiri di samping toggle diff, dan setiap parser hadir dengan contoh khusus — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, ditambah TypeScript / JS. Mengganti parser akan memformat ulang contoh yang sesuai berdasarkan opsi Anda saat ini, sehingga opsi khusus bahasa seperti proseWrap, htmlWhitespaceSensitivity, dan vueIndentScriptAndStyle memiliki tempat untuk menunjukkan efeknya. Pilihan Anda tetap tersimpan setelah memuat ulang.