React项目中stylelint/stylelint-config-styled-components无结果或无报错排查

我之前也碰到过类似的诡异问题，结合你用的stylelint 9.x版本，大概率是这几个原因之一，你可以逐一排查：

1. 缺少关键的样式处理器 #

stylelint默认只能解析纯CSS文件，但styled-components的样式是内嵌在JS/JSX的模板字符串里的——没有专门的处理器，stylelint根本“看不见”这些样式内容。你只装了配置集，却没装stylelint-processor-styled-components，自然不会有任何输出。

解决方法：
安装和stylelint 9.x兼容的处理器版本（建议选v1.x系列，比如1.10.0）：

npm install stylelint-processor-styled-components@1.10.0 --save-dev

然后在项目根目录的.stylelintrc（或.stylelintrc.json）里指定处理器：

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

2. 命令行没指定要扫描的文件路径 #

如果你直接跑stylelint或者npm run lint:css但脚本里没明确文件范围，stylelint可能找不到需要检查的JS/JSX文件——它默认不会自动扫描非CSS后缀的文件。

解决方法：
修改package.json里的脚本，明确指定要检查的文件路径：

"scripts": {
  "lint:css": "stylelint 'src/**/*.{js,jsx}'"
}

这样stylelint才会去扫描src目录下所有JS/JSX文件里的styled-components样式。

3. 版本兼容性冲突 #

你用的stylelint 9.1.3是2018年的旧版本，而stylelint-config-styled-components后续更新的版本已经不再适配这么老的stylelint了。如果你装的是该配置集的最新版，大概率会出现“无声失效”的情况。

解决方法：
降级配置集到适配stylelint 9的版本，比如0.1.1：

npm install stylelint-config-styled-components@0.1.1 --save-dev

4. 配置文件位置或规则配置错误 #

检查你的.stylelintrc是否放在项目根目录，并且extends数组同时包含了stylelint-config-recommended和stylelint-config-styled-components。另外，确认没有在配置里意外禁用了所有规则（比如rules对象是空的或者全设为null）。

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