文章目录
1. eslint去掉注释报错:// eslint-disable-next-line react-hooks/rules-of-hooks
在使用react hook时会遇到一些问题,就是在使用hook的一些api时就会出现如下所示报错,使用vscode的自动修复就是加上注释,但是每用一次就加一次注释非常麻烦
解决办法
- 下包
# npm
npm install eslint-plugin-react-hooks --save-dev
# yarn
yarn add eslint-plugin-react-hooks --dev
- 添加一个文件
.eslintrc.json
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": ["@typescript-eslint", "react", "prettier", "react-hooks"],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true
}
],
"@typescript-eslint/interface-name-prefix": 0,
"react/prop-types": [0],
"no-console": "off",
"eqeqeq": ["error", "always"],
"jsx-a11y/anchor-is-valid": "off",
"@typescript-eslint/camelcase": "off",
"@typescript-eslint/explicit-function-return-type": "error",
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn", // 检查 effect 的依赖
"no-debugger": "off"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
}
}
2. 使用组件和props编译报错
错误信息如下
React Hook "useState" is called in function "xxxxx: FC<Props>" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
解决办法
其实是因为你的命名不规范,首字母应该是大写
- 组件命名大写
- interface声明props时需要大写