用于 `styled-components` 的自定义 `stylelint` 插件答案

【问题标题】：Custom `stylelint` plugin for `styled-components`用于 `styled-components` 的自定义 `stylelint` 插件
【发布时间】：2021-08-28 09:32:21
【问题描述】：

我一直在尝试在following the instructions here 之后为styled-components 构建一个新的自定义stylelint 插件。

要求是构建一个自定义stylelint 插件，我想阻止用户指定styled-components 中存在的硬编码值，以支持使用应该从通用设计文件中读取的值。

// Incorrect usage
const Header = styled.div`
  font-size: 14px;
  color: red;
`;


// Correct usage
import {FONT, COLOR} from 'constants';

const Header = styled.div`
  font-size: ${FONT.M};
  color: ${COLOR.PRIMARY};
`;

我发现stylelint-processor-styled-components 应该充当我们styled-components 的处理器。但是，我找不到任何可以帮助我将处理器添加到自定义插件的文档或方法。

这里的任何帮助都会很有帮助。

【问题讨论】：

标签： reactjs styled-components stylelint

【解决方案1】：

您可以在 .stylelintrc 文件中添加 stylelint-processor-styled-components 为：

{"processors": [
"stylelint-processor-styled-components"
 ]}

之后，您可以添加官方 stylelint 文档中给出的 linting 规则以防止静态值，即

"rules": {
    "length-zero-no-unit":true,
    "color-no-hex": true,
    "color-named": [
        "never",
        {
            "message": "Static color name"
        }
    ]}

【讨论】：