React+TS+MUI项目配置Stylelint检测TSX文件HEX颜色

云原生阿岚

2026-8-26

问题解决方案

1. 使用Stylelint实现需求

可以通过配置Stylelint解析TSX文件并识别JSX内联样式来实现检测HEX颜色的需求，步骤如下：

安装依赖

首先安装必要的Stylelint插件与语法解析器：

npm install stylelint postcss postcss-jsx stylelint-config-standard --save-dev

修改Stylelint配置

在package.json或.stylelintrc.json中更新配置，指定TSX文件的解析语法并调整规则：

{
  "extends": ["stylelint-config-standard"],
  "customSyntax": "postcss-jsx",
  "rules": {
    "color-no-hex": true
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "rules": {
        // 关闭TSX标签相关的CSS选择器错误，避免误报
        "selector-type-no-unknown": null
      }
    }
  ]
}

执行检测

重新运行命令即可正常检测TSX文件中的HEX颜色：

npx stylelint "**/*.tsx"

该配置会识别Typography组件的color属性、sx对象内的bgcolor属性中的HEX颜色，并触发color-no-hex规则报错。

2. 使用ESLint作为替代方案

如果更倾向于用ESLint统一检测代码，可以借助eslint-plugin-unicorn插件实现HEX颜色检测，步骤如下：

安装依赖

npm install eslint @typescript-eslint/eslint-plugin eslint-plugin-unicorn --save-dev

修改ESLint配置

在.eslintrc.json中启用相关规则：

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:unicorn/recommended"
  ],
  "plugins": ["@typescript-eslint", "unicorn"],
  "rules": {
    "unicorn/no-hex-colors": "error"
  }
}