React项目中ESLint抛出Unknown word (CssSyntaxError)问题求助

问题背景 #

开发React项目时，运行ESLint检查JSX文件触发Unknown word (CssSyntaxError)错误，错误来源标记为stylelint，但项目未使用任何CSS-in-JS库或相关样式代码，也未主动安装stylelint。

相关代码 #

MyComponent2.jsx #

import Header from "./Header";
import Footer from "./Footer";
import Food from "./Food";

function App() {
  return (
    <>
      <Header></Header>
      <Food></Food>
      <Footer></Footer>
    </>
  );
}

export default App;

Header.jsx（错误出现在return关键字处） #

function Header() {
    return (
        <header>
            <h1>My Website</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <hr />
        </header>
    );
}

export default Header

Footer.jsx（错误出现在return关键字处） #

function Footer() {
    return (
        <footer>
            <p>&copy; {new Date().getFullYear()} Your website name</p>
        </footer>
    );
}

export default Footer

Food.jsx（错误出现在const关键字处） #

function Food() {

    const food1 = "Orange";
    const food2 = "Mango";

    return (
        <ul>
            <li>Apple</li>
            <li>{food1}</li>
            <li>{food2.toUpperCase()}</li>
        </ul>
    );
}

export default Food

package.json配置 #

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

错误信息 #

"resource": "/e:/Web Projects/Learning React/React js/my-react-app/src/MyComponent2.jsx",
    "owner": "stylelint",
    "code": "CssSyntaxError",
    "severity": 8,
    "message": "Unknown word (CssSyntaxError)",
    "source": "stylelint",
    "startLineNumber": 1,
    "startColumn": 10,
    "endLineNumber": 1,
    "endColumn": 10
}]

已尝试的排查步骤 #

• 检查JSX和CSS代码，确认无拼写或语法错误
• 核查ESLint及关联插件的配置
• 排查JSX文件中是否存在意外写入的CSS代码

解决思路与建议 #

1. 禁用编辑器Stylelint扩展：项目未安装stylelint，但编辑器可能安装了Stylelint扩展，它会自动检测JSX文件并误报。暂时禁用该扩展后重新运行ESLint检查。
2. 清除ESLint缓存：运行eslint . --ext js,jsx --cache --cache-clear清除ESLint缓存，避免旧缓存导致的错误。
3. 检查ESLint配置文件：确认.eslintrc.cjs或.eslintrc.json中未引入任何与stylelint相关的插件或规则，比如eslint-plugin-stylelint，若有则移除。
4. 排查间接依赖：执行npm ls stylelint查看是否有依赖间接安装了stylelint，若存在，可尝试更新相关依赖或使用npm dedupe整理依赖树。
5. 重新生成ESLint配置：删除现有ESLint配置文件，运行npx eslint --init重新生成适配React项目的配置，确保规则设置正确。

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