8.1 'React' must be in scope when using JSX
原因:老规则,React 17+ 不再需要 import React。
修法:.eslintrc 关掉:
{
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off"
}
}
8.2 Parsing error: Cannot read file 'tsconfig.json'
eslint 的 parserOptions.project 路径错。
修法:用绝对路径或显式相对路径:
{
"parserOptions": {
"project": "./tsconfig.json",
"tsconfigRootDir": "__dirname"
}
}
8.3 Prettier 与 ESLint 冲突
两个工具都管格式化时会循环修改。
修法:装 eslint-config-prettier,关掉所有格式类规则,只让 prettier 管格式:
npm i -D eslint-config-prettier
{
"extends": ["...", "prettier"]
}
prettier必须放在 extends 数组最后,才能覆盖前面的格式规则。
8.4 react-hooks/exhaustive-deps 警告
症状:useEffect 警告依赖不全,加上后又触发无限循环。
修法:
- 真依赖 → 加上,并用
useCallback/useMemo稳定引用 - 假依赖(只在 mount 跑一次) → 用 ref 持有,不放依赖
- ❌ 不要图省事
// eslint-disable-next-line,先想清楚为什么不需要
8.5 no-restricted-imports 与 monorepo / 路径别名
想禁止 import xxx from '../../../api',强制用 @/api:
{
"rules": {
"no-restricted-imports": ["error", {
"patterns": ["../*api*"]
}]
}
}
8.6 commit 时 ESLint 卡住
用 husky + lint-staged 时,如果改动文件很多,lint 全跑会很慢。
修法:
lint-staged只 lint staged 文件- ESLint 用
--cache - 大改动绕过:
git commit --no-verify(谨慎)
8.7 编辑器与 CLI 报错不一致
原因:VSCode ESLint 扩展用的版本和 CLI 不同;.eslintrc 在工作区根目录但项目在子目录。
修法:
.vscode/settings.json加"eslint.workingDirectories": ["./frontend"]- 重启 ESLint server(Cmd+Shift+P → ESLint: Restart)
