Как я могу получить `eslint-plugin-Reaction-hooks` для lint функциональных компонентов, которые экспортируются как` default`?

Question

Я специально создал простой функциональный компонент, который нарушает правила хуков.Он содержит следующий фрагмент:

  if (Math.rand > 0.5) {
    const [name, setName] = useState("fred");
  }

Я ожидаю, что eslint-plugin-react-hooks будет допускать эту явную ошибку, но это не так.Попытавшись докопаться до сути, я обнаружил, что при экспорте функции по умолчанию - линтер не выполняет свою функцию.(Я использую @typescript-eslint/parser для того, что это стоит).

Есть ли способ заставить последний синтаксис работать с eslint / eslint-plugin-react-hooks, или я должен всегда создавать именованный функциональный компонент, а затем запускать export default name; под функцией?

https://codesandbox.io/s/hook-demo-c10y2

Answer 1

Итак ... Я только что обнаружил, что это известная ошибка с eslint-plugin-react-hooks.Похоже, вам нужно иметь именованную функцию для плагина, чтобы ловить и удерживать ваши ошибки.https://github.com/facebook/react/issues/14404 (в частности, просто правило "react-hooks/rules-of-hooks").