stylelint 规则强制使用预定义的类而不是 css

【问题标题】：stylelint rule to enforce use of predefined classes instead of cssstylelint 规则强制使用预定义的类而不是 css
【发布时间】：2022-02-03 19:19:46
【问题描述】：

我已经定义了常见的 css 类名，以便在多个地方重复使用，例如

common.scss：

.m-r-4 {margin-right: 4px}
.m-l-4 {margin-left: 4px}
.p-r-4 {padding-right: 4px}
.p-l-4 {padding-left: 4px}

是否有任何 stylelint 插件警告使用这些类而不是在其他 css 文件中编写相同的 css 规则（例如：margin-right: 4px）？该项目使用 React、Webpack 和 StyleLint

如果没有插件，任何可以帮助开发这样的插件的链接/教程都会有所帮助

谢谢

【问题讨论】：

标签： css reactjs eslint stylelint

【解决方案1】：

您可以使用内置的property-disallowed-list 规则来禁止属性，并且可以使用custom message 来传达您的意图。

{
  "rules": {
    "property-disallowed-list": [
      ["/^margin/", "/^padding/"],
      {
        "message": "Use the appropriate utility class instead"
      }
    ]
  }
}

然后您可以在您的common.scss 文件中turn off the rule：

/* stylelint-disable property-disallowed-list */
.m-r-4 {margin-right: 4px}
.m-l-4 {margin-left: 4px}
.p-r-4 {padding-right: 4px}
.p-l-4 {padding-left: 4px}

或者，您可以write a plugin checks against the built-in rule，但不能通过在处理前检查文件名来检查common.scss 文件。

【讨论】：