🌐 زبان
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',
};جایگزینی Markdown/MDX
این افزونه از Markdown و MDX پشتیبانی نمیکند، اما اگر این افزونه از یک زبان درون بلوکهای کد (مثلاً Vue) پشتیبانی کند، فرمتبندی ناخواسته ممکن است درون بلوکهای کد رخ دهد.
برای جلوگیری از فرمتبندی ناخواسته، میتوانید از تنظیمات جایگزین برای Markdown و MDX استفاده کنید.
نمونه JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}گزینهها
ویژگیهای سفارشی
فهرستی از ویژگیها که نام کلاسهای محصورکننده را شامل میشوند.
ویژگیهای 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=60
export function Callout({ children }) {
return (
{children}
);
}
``- مثال
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
پیشفرض | جایگزینی CLI | جایگزینی API
--- | --- | ---
| --ending-position | endingPosition: ""تبدیل نحو (Syntax Transformation)
اولین بار در نسخه v0.7.7 ارائه شد.
اگر شکست خط در نام کلاس نوشته شده با نحو غیر-عبارتی رخ دهد، به نحو عبارتی تبدیل میشود. این تبدیل از قالببندی معکوس پشتیبانی نمیکند.
پیشفرض | جایگزینی CLI | جایگزینی API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: عرض چاپ نام کلاسها (Classnames Print Width)
اولین بار در نسخه v0.10.0 ارائه شد.
عرض چاپ نام کلاس را مشخص کنید. اگر مقداری ارائه نشود، مقدار
به عنوان پیشفرض استفاده میشود.
پیشفرض | جایگزینی CLI | جایگزینی API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: همبستگی نسخه با افزونههای همخانواده
از نسخه
، زمانی که یک انتشار جزئی در یک طرف باشد، در صورت امکان آن تغییر را در طرف دیگر نیز منعکس خواهم کرد.
سازگاری با سایر افزونههای Prettier
اگر بیش از یک افزونه Prettier بتواند متنی که میخواهید قالببندی کنید را مدیریت کند، Prettier فقط آخرین افزونه از آنها را استفاده میکند.
در این حالت، میتوانید آن را به صورت زیر با افزودن prettier-plugin-merge تنظیم کنید تا افزونهها به صورت متوالی اعمال شوند.
مثال JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---