feat: Add React and React Hook linting rules (#729)

* Added new config that extends base rules with react and react hook rules

* feat: Add react rules to .tsx file in the base config (removed react specific config)

Author: RowanTate

.eslintrc-react.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  extends: ['./.eslintrc.cjs'],
+
+  overrides: [
+    {
+      /** Overrides for typescript */
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+      ],
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/explicit-function-return-type': 'error',
+      },
+    },
+  ],
+};

.eslintrc.cjs

@@ -34,7 +34,14 @@ module.exports = {
       },
       parser: '@typescript-eslint/parser',
     },
-
+    {
+      /** Overrides for tsx (this will add to the above .tsx rules) */
+      files: ['**/*.tsx'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+      ],
+    },
     {
       /**
        * Overrides for typescript tests

README.md

@@ -63,8 +63,10 @@ IntelliJ has ESLint support by default,
 npm install @linzjs/style
 ```
 
-2. Create the base configuration files
+2. Applying eslint config
+There are two ways to apply the config
 
+**Either create the base configuration files**
 ```bash
 # If on windows run `node ./node_modules/@linzjs/style/build/src/install.js`
 # - tsconfig.json
@@ -73,12 +75,32 @@ npm install @linzjs/style
 npx linz-style-install
 ```
 
+**Or extend your existing `eslintrc.js` config**   
+
+Example extending the `.eslintrc.js` file in your project
+```js
+module.exports = {
+  extends: ["./node_modules/@linzjs/style/.eslintrc.cjs"],
+
+  overrides: [
+    {
+      /** Overrides for typescript */
+      files: ["**/*.ts", "**/*.tsx"],      
+      rules: {
+        "@typescript-eslint/super-crazy-hook-rule": "error",
+      },
+    },
+  ]
+}
+```
+
 3. Apply the formatting/linting to all source code
 
 ```
 npx eslint .
 ```
 
+
 ## Migration from 3.x to 4.x
 
 See [Migration Docs](./migration.4.md)

package.json

@@ -21,14 +21,17 @@
     "lint": "npx eslint . --ignore-path .gitignore"
   },
   "devDependencies": {
-    "@types/node": "^20.2.5"
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.12"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.8",
     "typescript": "^5.1.3"
   },

src/__test__/MyComponent.tsx

@@ -0,0 +1,14 @@
+import React, { ReactElement, useEffect } from 'react';
+
+/**
+ * Basic React Component for testing react linting rules
+ *
+ * @constructor
+ */
+export default function MyComponent(): ReactElement {
+  useEffect(() => {
+    console.log('test');
+  });
+
+  return <div></div>;
+}