1.0.3 • Published 4 years ago
eslint-plugin-react-hooks-eleme v1.0.3
eslint-plugin-react-hooks-eleme
eslint-plugin-react-hooks-eleme
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-react-hooks-eleme
:
$ npm install eslint-plugin-react-hooks-eleme --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-react-hooks-eleme
globally.
Usage
Add react-hooks-eleme
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"react-hooks-eleme"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
// ...
// 官方Hooks Rules继承
"react-hooks-eleme/rules-of-hooks": "error",
"react-hooks-eleme/exhaustive-deps": "warn",
// 1.Hook调用顺序: [useState,useReducer] > useMemo > useRef > 自定义Hook > useCallback > useEffect
"react-hooks-eleme/call-order-of-hooks": "error",
// 2.组件作用域、自定义Hook作用域声明的函数用useCallback方法包装
"react-hooks-eleme/functions-declared": "error",
// 3.组件作用域、自定义Hook作用域声明的变量或常量用useMemo方法包装
"react-hooks-eleme/variables-or-constants-declared": "error",
// 4.useEffect不允许循环引用
"react-hooks-eleme/useeffect-circular-reference": "error",
// 5.不允许以直接修改状态属性的方式更新状态
"react-hooks-eleme/update-state-directly": "error",
// 6.useState的声明 const [stateName, setStateName] = useState()
// 7.useReducer的声明 const [state, stateDispatch] = useReducer(stateReducer, stateInitialVal, stateInit)
// 8.useRef的声明
// 9.useMemo的声明
"react-hooks-eleme/declaration-of-usestate": "error",
"react-hooks-eleme/declaration-of-usereducer": "error",
"react-hooks-eleme/declaration-of-useref": "error",
"react-hooks-eleme/declaration-of-usememo": "error",
}
}
Supported Rules
- Fill in provided rules here