diff --git a/README.md b/README.md index ce48d79c..688acad5 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ module.exports = { **terminal** ```sh -yarn add eslint-plugin-react --dev +yarn add eslint-plugin-react eslint-plugin-react-hooks --dev ``` **.eslintrc.js** @@ -139,7 +139,7 @@ module.exports = { **terminal** ```sh -yarn add eslint-plugin-flowtype eslint-plugin-react --dev +yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev ``` **.eslintrc.js** @@ -189,7 +189,7 @@ module.exports = { **terminal** ```sh -yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react --dev +yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks --dev ``` **.eslintrc.js** diff --git a/react.js b/react.js index c3c9619b..e75bbd64 100644 --- a/react.js +++ b/react.js @@ -6,5 +6,5 @@ module.exports = { './base.js', 'prettier/react', ], - plugins: ['react'], + plugins: ['react', 'react-hooks'], }; diff --git a/rules/react.js b/rules/react.js index 3d3f0cec..5614b45e 100644 --- a/rules/react.js +++ b/rules/react.js @@ -10,5 +10,7 @@ module.exports = { allowArrowFunctions: true, }, ], + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', }, }; diff --git a/sample-project/package.json b/sample-project/package.json index 4f3eacc6..28f60a9a 100644 --- a/sample-project/package.json +++ b/sample-project/package.json @@ -25,6 +25,7 @@ "eslint-plugin-jest": "21.27.2", "eslint-plugin-prettier": "2.7.0", "eslint-plugin-react": "7.7.0", + "eslint-plugin-react-hooks": "2.1.2", "prettier": "1.18.2" } } diff --git a/sample-project/src/Component.js b/sample-project/src/Component.js new file mode 100644 index 00000000..4e9adc7c --- /dev/null +++ b/sample-project/src/Component.js @@ -0,0 +1,18 @@ +import React, { useEffet } from 'react'; +import PropTypes from 'prop-types'; + +export function Component({ value }) { + // Wrapping the effect with a condition triggers the ESLint plugin `react-hooks` + useEffet(() => {}); + + return ( +
+

React app

+

{value}

+
+ ); +} + +Component.propTypes = { + value: PropTypes.string, +}; diff --git a/sample-project/yarn.lock b/sample-project/yarn.lock index ad4423af..4b0f854f 100644 --- a/sample-project/yarn.lock +++ b/sample-project/yarn.lock @@ -463,6 +463,11 @@ eslint-plugin-prettier@2.7.0: fast-diff "^1.1.1" jest-docblock "^21.0.0" +eslint-plugin-react-hooks@2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7" + integrity sha512-ZR+AyesAUGxJAyTFlF3MbzeVHAcQTFQt1fFVe5o0dzY/HFoj1dgQDMoIkiM+ltN/HhlHBYX4JpJwYonjxsyQMA== + eslint-plugin-react@7.7.0: version "7.7.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"