prettier-plugin-classnames
Plugin Prettier yang membungkus nama kelas yang panjang berdasarkan opsi printWidth.

Instalasi[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Jika versi prettier-plugin-classnames Anda kurang dari 0.4.0, Anda juga perlu menginstal @prettier/sync.
Konfigurasi
Contoh JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Contoh JS (modul CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Contoh JS (modul ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Opsi
Atribut Kustom
Daftar atribut yang nama kelasnya disertakan.
Atribut class dan className selalu didukung, bahkan jika tidak ada opsi yang ditentukan.
Default | Override CLI | Override API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Fungsi Kustom
Daftar fungsi yang nama kelasnya disertakan.
Fungsi classNames selalu didukung, bahkan jika tidak ada opsi yang ditentukan.
Default | Override CLI | Override API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Posisi Akhir
Tersedia pertama kali di v0.5.0.
absolute-with-indent ditambahkan di v0.6.0.
absolute-with-indent dihapus di v0.8.0, tetapi Anda bisa mendapatkan keluaran yang sama dengan absolute.
Nilai default berubah dari relative menjadi absolute di v0.8.0.
Ini adalah kriteria untuk mengakhiri nama kelas pada setiap baris saat mengganti nama kelas asli dengan nama kelas multi-baris.
- Contoh
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- contoh
relative:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Default | Override CLI | Override API
--- | --- | ---
"absolute" | --ending-position | endingPosition: ""Transformasi Sintaksis
Pertama tersedia di v0.7.7.
Jika terjadi pembungkusan baris pada nama kelas yang ditulis dalam sintaks non-ekspresi, maka akan diubah menjadi sintaks ekspresi. Transformasi ini tidak mendukung pemformatan yang dapat dibalik.
Default | Override CLI | Override API
--- | --- | ---
false | --syntax-transformation | syntaxTransformation: Korelasi versi dengan plugin saudara
Mulai dari
0.6.0, ketika ada rilis minor di satu sisi, saya berencana untuk mencerminkan perubahan tersebut di sisi lain juga jika memungkinkan.
Kompatibilitas dengan plugin Prettier lain
Jika lebih dari satu plugin Prettier dapat menangani teks yang ingin Anda format, Prettier hanya akan menggunakan plugin terakhir dari plugin-plugin tersebut.
Dalam kasus ini, Anda dapat mengaturnya seperti berikut dengan menambahkan prettier-plugin-merge untuk menerapkan plugin-plugin tersebut secara berurutan.
Contoh JSON:
json
{
"plugins": [
"prettier-plugin-tailwindcss",
"prettier-plugin-classnames",
"prettier-plugin-merge"
]
}
``--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---