prettier-plugin-classnames
إضافة لبرنامج Prettier تقوم بتقسيم أسماء الصفوف الطويلة بناءً على خيار printWidth.

التثبيت[^1]
npm install -D prettier prettier-plugin-classnames[^1]: إذا كان إصدارك من prettier-plugin-classnames أقل من 0.4.0، ستحتاج أيضًا إلى تثبيت @prettier/sync.
التهيئة
مثال JSON:
{
"plugins": ["prettier-plugin-classnames"]
}مثال JS (وحدة CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};مثال JS (وحدة ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};الخيارات
السمات المخصصة
قائمة السمات التي تحتوي على أسماء الفئات المغلقة.
سمتا class و className مدعومتان دائمًا، حتى لو لم يتم تحديد أي خيارات.
القيمة الافتراضية | تجاوز CLI | تجاوز API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
الدوال المخصصة
قائمة الدوال التي تحتوي على أسماء الفئات المغلقة.
دالة classNames مدعومة دائمًا، حتى لو لم يتم تحديد أي خيارات.
القيمة الافتراضية | تجاوز CLI | تجاوز API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
وضع النهاية
ظهرت لأول مرة في الإصدار v0.5.0.
تمت إضافة absolute-with-indent في v0.6.0.
تمت إزالة absolute-with-indent في v0.8.0، لكن يمكنك الحصول على نفس الناتج باستخدام absolute.
تم تغيير القيمة الافتراضية من relative إلى absolute في v0.8.0.
هذا هو المعيار لإنهاء اسم الفئة في كل سطر عند استبدال اسم الفئة الأصلي باسم فئة متعدد الأسطر.
- مثال على
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- مثال على
relative:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
الافتراضي | تجاوز CLI | تجاوز API
--- | --- | ---
"absolute" | --ending-position | endingPosition: ""تحويل البنية النحوية
متوفر لأول مرة في الإصدار v0.7.7.
إذا حدث التفاف للسطر في اسم الصنف المكتوب بصيغة غير تعبيرية، يتم تحويله إلى صيغة تعبيرية. هذا التحويل لا يدعم التنسيق العكسي.
الافتراضي | تجاوز CLI | تجاوز API
--- | --- | ---
false | --syntax-transformation | syntaxTransformation: ارتباط الإصدارات مع الإضافات الشقيقة
بدءًا من الإصدار
0.6.0، عندما يكون هناك إصدار فرعي على أحد الجانبين، أخطط لعكس هذا التغيير على الجانب الآخر أيضًا إذا أمكن ذلك.
التوافق مع إضافات Prettier الأخرى
إذا كان هناك أكثر من إضافة Prettier يمكنها معالجة النص الذي تريد تنسيقه، سيستخدم Prettier فقط آخر إضافة من تلك الإضافات.
في هذه الحالة، يمكنك تكوين ذلك كما يلي بإضافة prettier-plugin-merge لتطبيق تلك الإضافات بشكل متسلسل.
مثال JSON:
json
{
"plugins": [
"prettier-plugin-tailwindcss",
"prettier-plugin-classnames",
"prettier-plugin-merge"
]
}
``--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---