Stylelint
مقدمه
معمولاً هر شخص وقتی کد CSS می‌نویسه، برای اون قواعدی در نظر می‌گیره؛ مثلاً ترتیب و اولویت Propertyهای مختلف یا استفاده از یه فرمت رنگ خاص. اما وقتی به صورت تیمی روی پروژه‌ای کار می‌کنید، بهتره این قواعد به صورت عمومی اعمال بشن تا کدی که در نهایت نوشته میشه برای همه قابل‌فهم و توی یه چارچوب باشه. Stylelint ابزاریه که به ما امکان تعریف چنین قواعدی رو می‌ده.
بیشتر بدانیم:
راه‌اندازی
برای افزودن Stylelint به پروژه‌ی خود، از دستور زیر استفاده کنید:
npm install -D stylelint stylelint-order postcss
با اجرای دستور بالا علاوه بر پکیج stylelint دو پکیج دیگه هم به پروژه اضافه می‌شن
که اولی برای تعیین ترتیب Propertyها استفاده میشه و دومی پکیج معروف PostCSS ئه که به‌عنوان Dependency بهش نیاز داریم.
تنظیمات
برای تنظیم قواعد، یه فایل با نام
.stylelintrc.json
بسازید.
تنظیمات پیشنهادی من اینجا آورده شده. سعی کردم لیست کاملی از Propertyها رو اینجا بیارم؛ اما ممکنه نقص‌هایی داشته باشه که به مرور زمان کاملش می‌کنم.
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
"plugins": ["stylelint-order"],
"rules": {
"color-named": "never",
"color-no-hex": true,
"custom-property-empty-line-before": null,
"declaration-block-no-redundant-longhand-properties": null,
"declaration-empty-line-before": null,
"no-descending-specificity": null,
"no-empty-source": null,
"order/order": ["custom-properties", "declarations", "rules"],
"order/properties-order": [
{
"groupName": "reset",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["all"]
},
{
"groupName": "content",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["content"]
},
{
"groupName": "parent-related",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"order",
"grid-column",
"grid-column-start",
"grid-column-end",
"grid-row",
"grid-row-start",
"grid-row-end",
"flex",
"flex-grow",
"flex-shrink",
"grid-area",
"place-self",
"align-self",
"justify-self",
"counter-increment",
"counter-reset"
]
},
{
"groupName": "color",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-origin",
"background-position",
"background-repeat",
"background-size",
"color",
"accent-color",
"fill",
"box-shadow",
"mix-blend-mode",
"opacity",
"visibility"
]
},
{
"groupName": "filter",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["filter", "backdrop-filter"]
},
{
"groupName": "mask",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"mask",
"mask-clip",
"mask-composite",
"mask-image",
"mask-mode",
"mask-origin",
"mask-position",
"mask-repeat",
"mask-size",
"mask-type"
]
},
{
"groupName": "box",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["direction", "box-sizing"]
},
{
"groupName": "position",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"position",
"isolation",
"inset",
"inset-block",
"inset-block-start",
"inset-block-end",
"inset-inline",
"inset-inline-start",
"inset-inline-end",
"top",
"right",
"bottom",
"left",
"overflow",
"overflow-block",
"overflow-inline",
"overflow-x",
"overflow-y",
"overflow-wrap",
"z-index"
]
},
{
"groupName": "display",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"display",
"flex-basis",
"flex-direction",
"flex-flow",
"flex-wrap",
"grid",
"grid-auto-columns",
"grid-auto-flow",
"grid-auto-rows",
"grid-column-gap",
"grid-row-gap",
"grid-template",
"grid-template-areas",
"grid-template-columns",
"grid-template-rows",
"columns",
"place-content",
"place-items",
"align-content",
"align-items",
"justify-content",
"justify-items",
"gap",
"grid-gap",
"column-gap",
"row-gap"
]
},
{
"groupName": "list",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["list-style", "list-style-image", "list-style-position", "list-style-type"]
},
{
"groupName": "size",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"min-block-size",
"block-size",
"max-block-size",
"min-inline-size",
"inline-size",
"max-inline-size",
"min-width",
"width",
"max-width",
"min-height",
"height",
"max-height",
"aspect-ratio",
"resize",
"object-fit",
"object-position",
"scroll-behavior"
]
},
{
"groupName": "scroll",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["scroll-behavior"]
},
{
"groupName": "box-model",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"margin",
"margin-block",
"margin-block-start",
"margin-block-end",
"margin-inline",
"margin-inline-start",
"margin-inline-end",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding-block",
"padding-block-start",
"padding-block-end",
"padding-inline",
"padding-inline-start",
"padding-inline-end",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
{
"groupName": "border",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"border",
"border-block",
"border-block-color",
"border-block-style",
"border-block-width",
"border-block-start",
"border-block-start-color",
"border-block-start-style",
"border-block-start-width",
"border-inline",
"border-inline-color",
"border-inline-style",
"border-inline-width",
"border-inline-start",
"border-inline-start-color",
"border-inline-start-style",
"border-inline-start-width",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-collapse",
"border-color",
"border-image",
"border-image-outset",
"border-image-repeat",
"border-image-slice",
"border-image-source",
"border-image-width",
"border-radius",
"border-start-start-radius",
"border-start-end-radius",
"border-end-end-radius",
"border-end-start-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-top-left-radius",
"border-spacing",
"border-style",
"border-width"
]
},
{
"groupName": "outline",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["outline", "outline-color", "outline-offset", "outline-style", "outline-width"]
},
{
"groupName": "transform",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["transform", "transform-origin", "transform-style"]
},
{
"groupName": "clip-path",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["clip-path"]
},
{
"groupName": "font",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"font",
"font-family",
"font-kerning",
"font-language-override",
"font-size",
"font-size-adjust",
"font-stretch",
"font-style",
"font-synthesis",
"font-variant",
"font-variant-alternates",
"font-variant-caps",
"font-variant-east-asian",
"font-variant-ligatures",
"font-variant-numeric",
"font-variant-position",
"font-weight"
]
},
{
"groupName": "text",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"text-align",
"text-align-last",
"text-combine-upright",
"text-decoration",
"text-decoration-color",
"text-decoration-line",
"text-decoration-style",
"text-decoration-thickness",
"text-emphasis",
"text-indent",
"text-justify",
"text-orientation",
"text-overflow",
"text-shadow",
"text-transform",
"text-underline-position",
"letter-spacing",
"line-break",
"line-height",
"vertical-align",
"white-space",
"word-break",
"word-spacing",
"word-wrap",
"writing-mode"
]
},
{
"groupName": "print",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["page-break-after", "page-break-before", "page-break-inside"]
},
{
"groupName": "3d",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["perspective", "perspective-origin", "backface-visibility"]
},
{
"groupName": "transition",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"transition",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function"
]
},
{
"groupName": "animation",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"animation",
"animation-delay",
"animation-direction",
"animation-duration",
"animation-fill-mode",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function"
]
},
{
"groupName": "cursor & pointer",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["cursor", "pointer-events", "user-select"]
}
]
}
}
WebStorm
برای فعال کردن تنظیمات Stylelint در WebStorm، مراحل زیر رو طی کنید:
- از بالا-چپ روی علامت سه‌نقطه کلیک کنید تا منوی
Fileباز شه. - رو
Settingsکلیک کنید تا پنجره‌ی تنظیمات باز شه. - عبارت
Stylelintرو توی باکس بالا-چپ جست‌وجو کنید. - از قسمت سمت چپ روی گزینه‌ی
Languages & Frameworks > Style Sheets > Stylelintکلیک کنید. - تیک گزینه‌ی
Enableرو فعال کنید.