feat: add plugin react hooks #23

README.md

@@ -112,6 +112,7 @@ then run `npm run lint`
 - [Imports](./documentation/imports.md) (ES6/7/8)
 - [React](./documentation/react.md) (ES6/7/8)
 - [React A11y](./documentation/react-a11y.md) (ES6/7/8)
+- [React hooks](./documentation/react-hooks.md) (ES6/7/8)
 - [Typescript](./documentation/typescript.md) (typescript)
 
 ## Thanks to

bin/write-documentation.js

@@ -27,6 +27,10 @@ function getESLintUrl(name, groupName) {
 			return 'https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/' + name + '.md';
 		case 'react-a11y':
 			return 'https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/' + name + '.md';
+		case 'react-hooks':
+			return 'https://reactjs.org/docs/hooks-rules.html';
+		case 'typescript':
+			return 'https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/' + name.replace(/.ts$/, '') + '.md';
 		default:
 			return 'http://eslint.org/docs/rules/' + name;
 	}
@@ -133,7 +137,7 @@ function addSnippet(arr, fileData) {
 function addRule(arr, name, path, groupName) {
 
 	var fileData = utils.readFile(path);
-	var nameCleaned = name.replace(/\.js$/, '');
+	var nameCleaned = name.replace(/\.js$/, '').replace(/\.ts$/, '');
 	var title = utils.capitalize(nameCleaned.replace(/-/g, ' '));
 
 	arr.push('### [' + title + '](' + getESLintUrl(nameCleaned, groupName) + ')');

configurations/es6-react-disable-styles.js

@@ -4,6 +4,7 @@ module.exports = {
 		'./es6-disable-styles.js',
 		'../rules/react-disable-styles.js',
 		'../rules/react-a11y-disable-styles.js',
+		'../rules/react-hooks-disable-styles.js',
 	].map(require.resolve),
 
 };

configurations/es6-react.js

@@ -3,11 +3,13 @@ module.exports = {
 	'plugins': [
 		'jsx-a11y',
 		'react',
+		'react-hooks',
 	],
 	'extends': [
 		'./es6.js',
 		'../rules/react.js',
 		'../rules/react-a11y.js',
+		'../rules/react-hooks.js',
 	].map(require.resolve),
 	'env': {
 		'browser': true,

configurations/es7-react-disable-styles.js

@@ -4,6 +4,7 @@ module.exports = {
 		'./es7-disable-styles.js',
 		'../rules/react-disable-styles.js',
 		'../rules/react-a11y-disable-styles.js',
+		'../rules/react-hooks-disable-styles.js',
 	].map(require.resolve),
 
 };

configurations/es7-react.js

@@ -3,11 +3,13 @@ module.exports = {
 	'plugins': [
 		'jsx-a11y',
 		'react',
+		'react-hooks',
 	],
 	'extends': [
 		'./es7.js',
 		'../rules/react.js',
 		'../rules/react-a11y.js',
+		'../rules/react-hooks.js',
 	].map(require.resolve),
 	'env': {
 		'browser': true,

configurations/es8-react-disable-styles.js

@@ -4,6 +4,7 @@ module.exports = {
 		'./es8-disable-styles.js',
 		'../rules/react-disable-styles.js',
 		'../rules/react-a11y-disable-styles.js',
+		'../rules/react-hooks-disable-styles.js',
 	].map(require.resolve),
 
 };

configurations/es8-react.js

@@ -4,11 +4,13 @@ module.exports = {
 	'plugins': [
 		'jsx-a11y',
 		'react',
+		'react-hooks',
 	],
 	'extends': [
 		'./es8.js',
 		'../rules/react.js',
 		'../rules/react-a11y.js',
+		'../rules/react-hooks.js',
 	].map(require.resolve),
 	'env': {
 		'browser': true,

configurations/typescript-react-disable-styles.js

@@ -3,5 +3,6 @@ module.exports = {
 		'./typescript-disable-styles.js',
 		'../rules/react-disable-styles.js',
 		'../rules/react-a11y-disable-styles.js',
+		'../rules/react-hooks-disable-styles.js',
 	].map(require.resolve),
 };

configurations/typescript-react.js

@@ -3,11 +3,13 @@ module.exports = {
 		'@typescript-eslint',
 		'jsx-a11y',
 		'react',
+		'react-hooks',
 	],
 	extends: [
 		'./typescript.js',
 		'../rules/react.js',
 		'../rules/react-a11y.js',
+		'../rules/react-hooks.js',
 	].map(require.resolve),
 	env: {
 		browser: true,

documentation/react-hooks.md

@@ -0,0 +1,99 @@
+
+## React hooks
+
+
+### [Exhaustive deps](https://reactjs.org/docs/hooks-rules.html)
+
+> Checks effect dependencies
+
+
+:white_check_mark: Enabled (error)
+
+```javascript
+
+// Bad
+/*
+// https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+function MyComponent() {
+	const local = {};
+	useEffect(() => {
+		console.log(local);
+	}, []);
+}
+*/
+
+// Good
+function MyComponent2() {
+	const local = {};
+	useEffect(() => {
+		console.log(local);
+	}, [local]);
+}
+
+```
+<br />
+
+
+
+### [Rules of hooks](https://reactjs.org/docs/hooks-rules.html)
+
+> Checks rules of Hooks
+
+
+:white_check_mark: Enabled (error)
+
+```javascript
+
+// Bad
+/*
+function getFriendStatus(friendID) {
+	const [isOnline, setIsOnline] = useState(null);
+	// ...
+	return isOnline;
+}
+
+function Foo({ alt, src }) {
+	const [name, setName] = useState('Mary');
+	const [surname, setSurname] = useState('Poppins');
+
+	// 🔴 We're breaking the first rule by using a Hook in a condition
+	if (name !== '') {
+		useEffect(function persistForm() {
+			localStorage.setItem('formData', name);
+		});
+	}
+
+	return <img alt={alt} src={src} />;
+}
+*/
+
+// Good
+function useFriendStatus(friendID) {
+	const [isOnline, setIsOnline] = useState(null);
+	// ...
+	return isOnline;
+}
+
+function Foo2({ alt, src }) {
+	// 1. Use the name state variable
+	const [name, setName] = useState('Mary');
+
+	// 2. Use an effect for persisting the form
+	useEffect(function persistForm() {
+		localStorage.setItem('formData', name);
+	});
+
+	// 3. Use the surname state variable
+	const [surname, setSurname] = useState('Poppins');
+
+	// 4. Use an effect for updating the title
+	useEffect(function updateTitle() {
+		document.title = name + ' ' + surname;
+	});
+	return <img alt={alt} src={src} />;
+}
+
+```
+<br />
+
+