eslint-plugin-hooks-logic-order

What's this?

This is an package with eslint plugin that allows keep logical block in component in defined order. Triggers when useEffect expression exist.

How to use

Add this code into your eslint config in rules section:

{
  "plugins": [
    "hooks-logic-order"
  ],
  "rules": {
    "hooks-logic-order/hooks-on-top": [
      "error",
      {
        "order": ["hook2var", "var", "hook", "func", "others"]
      }
    ]
  }
}

Explanations

• hook2var code looks like this: const router = useRouter();
• var code looks like this: const foo = 'bar';
• hook code looks like this: useEffect(() => {}, []);
• func code looks like this: -- const foo = () => 'bar'; -- function boo() {};
• others are just others operations (ifs, return, etc)

Example

With order "hook2var", "var", "hook", "func", "others"

Valid component:

const Cmp = () => {
  // hook2var
  const router = useRouter();

  // var
  const isValid = router.path.startsWith('/users');

  // hook
  useEffect(() => {}, []);

  // func
  const handleSelect = () => {};

  // ...
}

Invalid component:

const Cmp = () => {
  // hook2var
  const router = useRouter();

  // var
  const isValid = router.path.startsWith('/users');

  // func
  const handleSelect = () => {};

  // hook
  useEffect(() => {}, []);

  // ..
}

Why invalid?

Cause we got hook2var -> var -> func -> hook -> others but we need hook2var -> var -> hook -> func -> others