🌐 Dil
prettier-plugin-classnames
printWidth seçeneğine göre uzun sınıf adlarını saran bir Prettier eklentisi.
Kurulum[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Eğer prettier-plugin-classnames sürümünüz 0.4.0'dan küçükse, ayrıca @prettier/sync paketini de yüklemeniz gerekecektir.
Yapılandırma
JSON örneği:
{
"plugins": ["prettier-plugin-classnames"]
}JS örneği (CommonJS modülü):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};JS örneği (ES modülü):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Markdown/MDX Geçersiz Kılma
Bu eklenti Markdown ve MDX'i desteklemez, ancak bu eklenti kod bloklarının içinde bir dili destekliyorsa (ör. Vue), kod bloklarının içinde istenmeyen biçimlendirme oluşabilir.
İstenmeyen biçimlendirmeyi önlemek için, Markdown ve MDX için yapılandırma geçersiz kılmalarını kullanabilirsiniz.
JSON örneği:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}Seçenekler
Özel Nitelikler
Sınıf adlarını kapsayan niteliklerin listesi.
class ve className nitelikleri, hiçbir seçenek belirtilmese bile her zaman desteklenir.
Varsayılan | CLI Geçersiz Kılma | API Geçersiz Kılma
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Özel Fonksiyonlar
Sınıf adlarını kapsayan fonksiyonların listesi.
classNames fonksiyonu, hiçbir seçenek belirtilmese bile her zaman desteklenir.
Varsayılan | CLI Geçersiz Kılma | API Geçersiz Kılma
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Bitiş Pozisyonu
İlk kez v0.5.0 sürümünde mevcut.
absolute-with-indent v0.6.0 sürümünde eklendi.
absolute-with-indent v0.8.0 sürümünde kaldırıldı, ancak aynı çıktıyı absolute ile alabilirsiniz.
Varsayılan değer v0.8.0’da relative’dan absolute’a değiştirildi.
Bu, orijinal sınıf adını çok satırlı bir sınıf adıyla değiştirirken, her satırda sınıf adının bitiş kriteridir.
absoluteörneği:
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``
örneği:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Varsayılan | CLI Geçersiz Kılma | API Geçersiz Kılma
--- | --- | ---
| --ending-position | endingPosition: ""Sözdizimi Dönüşümü
İlk olarak v0.7.7’de kullanılabilir.
Bir sınıf adı ifadesiz sözdizimi ile yazıldığında ve satır kırılması gerçekleşirse, bu ifade sözdizimi haline dönüştürülür. Bu dönüşüm geri döndürülebilir biçimlendirmeyi desteklemez.
Varsayılan | CLI Geçersiz Kılma | API Geçersiz Kılma
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Classnames Yazdırma Genişliği
İlk olarak v0.10.0’de kullanılabilir.
Sınıf adının yazdırma genişliğini belirtin. Eğer bir değer girilmezse, varsayılan olarak
değeri kullanılır.
Varsayılan | CLI Geçersiz Kılma | API Geçersiz Kılma
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Sibling eklentilerle sürüm korelasyonu
ile birlikte, bir tarafta minör bir sürüm çıktığında, mümkünse bu değişikliği diğer tarafta da yansıtmayı planlıyorum.
Diğer Prettier eklentileriyle uyumluluk
Formatlamak istediğiniz metni birden fazla Prettier eklentisi işleyebiliyorsa, Prettier yalnızca bu eklentilerin sonuncusunu kullanır.
Bu durumda, eklentileri sıralı olarak uygulamak için prettier-plugin-merge ekleyerek aşağıdaki gibi yapılandırabilirsiniz.
JSON örneği:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---