如何用ESLint限制styled-components中使用硬编码颜色值？

问题描述 #

我需要在项目中强制开发者仅使用提供的colors变量，禁止在React的styled-components中使用#FFFFFF、rgb(255,255,255)、rgba(255,255,255,0.5)、red、white这类硬编码颜色值。示例如下：

import styled from 'styled-components';
import { colors } from 'custom';

// ❌ 不符合要求（硬编码颜色）
const Container1 = styled.div`
  ...
  color: red;
  ...
`;

// ❌ 不符合要求（硬编码颜色）
const Container2 = styled.div`
  ...
  background-color: rgb(255,255,255);
  ...
`;

// ✅ 符合要求（使用颜色变量）
const Container3 = styled.div`
  ...
  color: ${colors.red};
  ...
`;

现有尝试的局限 #

我使用no-restricted-syntax规则实现了对普通JavaScript字面量的检测，但无法覆盖styled-components的模板字面量场景：

"no-restricted-syntax": [
  "error",
  { "selector": "Literal[value=/^#[a-zA-Z0-9]/i]", "message": "Use 'colors.X' from 'custom'" },
  { "selector": "Literal[value=/^rgb[(]/i]", "message": "Use 'colors.X' from 'custom'" },
  { "selector": "Literal[value=/^rgba[(]/i]", "message": "Use 'colors.X' from 'custom'" }
]

这个规则能检测普通变量中的硬编码颜色，但对styled-components模板内的CSS内容无效。

解决方案 #

方法1：使用现成ESLint插件（推荐） #

使用eslint-plugin-no-hardcoded-colors插件，它支持直接检测styled-components模板中的硬编码颜色：

1. 安装插件：

npm install eslint-plugin-no-hardcoded-colors --save-dev

2. 在ESLint配置文件中启用规则：

{
  "plugins": ["no-hardcoded-colors"],
  "rules": {
    "no-hardcoded-colors/no-hardcoded-colors": [
      "error",
      {
        "properties": true,
        "ignore": ["transparent"], // 可选：添加需要忽略的颜色
        "variables": ["colors"], // 指定允许使用的颜色变量对象
        "styledComponents": true // 开启styled-components检测
      }
    ]
  }
}

该规则会自动扫描styled-components模板内的CSS属性值，识别硬编码的十六进制、rgb/rgba值以及颜色关键字，并抛出错误提示使用指定的colors变量。

方法2：自定义ESLint规则（按需定制） #

如果需要更灵活的检测逻辑，可以编写自定义ESLint规则：

1. 创建自定义规则文件（如rules/no-hardcoded-colors-in-styled.js）：

module.exports = {
  create(context) {
    // 匹配硬编码颜色的正则
    const colorPattern = /(#[0-9a-fA-F]{3,6}|rgb\([^)]+\)|rgba\([^)]+\)|red|white|blue)/gi;

    return {
      TaggedTemplateExpression(node) {
        // 判断是否为styled-components的标签调用
        const isStyledComponent = 
          node.tag.name === 'styled' || 
          (node.tag.object?.name === 'styled' && node.tag.property);

        if (isStyledComponent) {
          // 提取模板字符串中的CSS内容
          const cssContent = node.quasi.quasis
            .map(quasi => quasi.value.cooked)
            .join('');

          // 扫描并上报硬编码颜色
          let match;
          while ((match = colorPattern.exec(cssContent)) !== null) {
            context.report({
              node,
              message: `请使用custom模块中的'colors.X'替代硬编码颜色'${match[0]}'`
            });
          }
        }
      }
    };
  }
};

2. 在ESLint配置中引入自定义规则：

{
  "plugins": {
    "custom": "./path-to-your-rules-folder"
  },
  "rules": {
    "custom/no-hardcoded-colors-in-styled": "error"
  }
}

为什么原有规则无效？ #

no-restricted-syntax的选择器针对的是独立的JavaScript字面量（Literal节点），而styled-components模板中的CSS内容属于模板字面量的quasis节点，并非独立的Literal，因此原有选择器无法匹配到这些内容。

内容的提问来源于stack exchange，提问作者Frits