🌐 Bahasa
prettier-plugin-classnames
Sebuah 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',
};Pengesampingan Markdown/MDX
Plugin ini tidak mendukung Markdown dan MDX, namun jika plugin ini mendukung bahasa di dalam blok kode (mis. Vue), format yang tidak diinginkan dapat terjadi di dalam blok kode.
Untuk mencegah format yang tidak diinginkan, Anda dapat menggunakan pengaturan override untuk Markdown dan MDX.
Contoh JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}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=60
export function Callout({ children }) {
return (
{children}
);
}
``- contoh
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Default | Override CLI | Override API
--- | --- | ---
| --ending-position | endingPosition: ""Transformasi Sintaks
Pertama kali tersedia di v0.7.7.
Jika terjadi pemisahan 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
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Lebar Cetak Classnames
Pertama kali tersedia di v0.10.0.
Tentukan lebar cetak dari nama kelas. Jika tidak ada nilai yang diberikan, nilai
digunakan sebagai default.
Default | Override CLI | Override API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Korelasi Versi dengan Plugin Sibling
Mulai dari
, ketika ada rilis minor di satu sisi, saya berencana untuk merefleksikan perubahan tersebut di sisi lain jika memungkinkan.
Kompatibilitas dengan Plugin Prettier Lainnya
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 mengkonfigurasinya seperti berikut dengan menambahkan prettier-plugin-merge untuk menerapkan plugin-plugin tersebut secara berurutan.
Contoh JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---