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