chore(lint): refactor react, react-hooks and ts-eslint usage (#11254)

Changes: 1. Refactors the usage of react and react-hooks plugins 2. Consolidates the ts-eslint plugin usage
redwoodjs · Aug 14, 2024 · aac0ed2 · aac0ed2
1 parent f1c3d2b
commit aac0ed2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 36 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,15 +14,29 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:jest-dom/recommended',
   ],
   parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 'latest',
+    ecmaFeatures: {
+      jsx: true,
+    },
     babelOptions: {
       configFile: findBabelConfig(),
     },
   },
+  plugins: [
+    'unused-imports',
+    '@babel',
+    'import',
+    'jsx-a11y',
+    'react',
+    'react-hooks',
+    'jest-dom',
+    '@redwoodjs',
+  ],
   // Prevents unused eslint-disable comments
   reportUnusedDisableDirectives: true,
   settings: {
@@ -46,16 +60,6 @@ module.exports = {
     'packages/codemods/**/__testfixtures__/**/*',
     'packages/cli/**/__testfixtures__/**/*',
   ],
-  plugins: [
-    'unused-imports',
-    '@babel',
-    'import',
-    'jsx-a11y',
-    'react',
-    'react-hooks',
-    'jest-dom',
-    '@redwoodjs',
-  ],
   rules: {
     curly: 'error',
     'unused-imports/no-unused-imports': 'error',
@@ -156,17 +160,25 @@ module.exports = {
     es2022: true,
   },
   overrides: [
+    // We disable react-hooks/rules-of-hooks for packages which do not deal with React code
     {
-      files: ['*.tsx', '*.js', '*.jsx'],
-      excludedFiles: ['api/src/**'],
+      files: [
+        'packages/api-server/**/*.ts',
+        'packages/graphql-server/**/*.ts',
+        'packages/realtime/**/*.ts',
+      ],
       rules: {
-        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/rules-of-hooks': 'off',
       },
     },
+    // TypeScript specific linting
     {
       files: ['*.ts', '*.tsx'],
       parser: '@typescript-eslint/parser',
-      extends: ['plugin:@typescript-eslint/recommended'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/stylistic',
+      ],
       rules: {
         // TODO: look into enabling these eventually
         '@typescript-eslint/no-empty-function': 'off',
@@ -180,6 +192,23 @@ module.exports = {
           'error',
           { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
         ],
+
+        // TODO: Look into enabling these eventually
+        '@typescript-eslint/array-type': 'off',
+        '@typescript-eslint/consistent-generic-constructors': 'off',
+        '@typescript-eslint/consistent-indexed-object-style': 'off',
+        '@typescript-eslint/consistent-type-definitions': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+        '@typescript-eslint/prefer-for-of': 'off',
+        '@typescript-eslint/prefer-function-type': 'off',
+        '@typescript-eslint/consistent-type-imports': 'error',
+
+        // Specific 'stylistic' rules we alter
+        camelcase: 'off',
+        curly: 'error',
       },
     },
     {
@@ -205,28 +234,6 @@ module.exports = {
         jest: true,
       },
     },
-    {
-      extends: ['plugin:@typescript-eslint/stylistic'],
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        // TODO: Look into enabling these eventually
-        '@typescript-eslint/array-type': 'off',
-        '@typescript-eslint/consistent-generic-constructors': 'off',
-        '@typescript-eslint/consistent-indexed-object-style': 'off',
-        '@typescript-eslint/consistent-type-definitions': 'off',
-        '@typescript-eslint/no-empty-function': 'off',
-        '@typescript-eslint/no-empty-object-type': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-require-imports': 'off',
-        '@typescript-eslint/prefer-for-of': 'off',
-        '@typescript-eslint/prefer-function-type': 'off',
-        '@typescript-eslint/consistent-type-imports': 'error',
-
-        // Specific 'stylistic' rules we alter
-        camelcase: 'off',
-        curly: 'error',
-      },
-    },
     {
       files: ['packages/structure/src/**'],
       rules: {

diff --git a/package.json b/package.json
@@ -85,6 +85,8 @@
     "@types/jscodeshift": "0.11.11",
     "@types/ncp": "2.0.8",
     "@types/prompts": "2.4.9",
+    "@typescript-eslint/eslint-plugin": "8.1.0",
+    "@typescript-eslint/parser": "8.1.0",
     "all-contributors-cli": "6.26.1",
     "babel-jest": "^29.7.0",
     "babel-plugin-auto-import": "1.1.0",
@@ -99,6 +101,8 @@
     "dependency-cruiser": "16.3.10",
     "dotenv": "16.4.5",
     "eslint": "8.57.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-unused-imports": "3.2.0",
     "execa": "5.1.1",
     "fast-glob": "3.3.2",

diff --git a/yarn.lock b/yarn.lock
@@ -26647,6 +26647,8 @@ __metadata:
     "@types/jscodeshift": "npm:0.11.11"
     "@types/ncp": "npm:2.0.8"
     "@types/prompts": "npm:2.4.9"
+    "@typescript-eslint/eslint-plugin": "npm:8.1.0"
+    "@typescript-eslint/parser": "npm:8.1.0"
     all-contributors-cli: "npm:6.26.1"
     babel-jest: "npm:^29.7.0"
     babel-plugin-auto-import: "npm:1.1.0"
@@ -26661,6 +26663,8 @@ __metadata:
     dependency-cruiser: "npm:16.3.10"
     dotenv: "npm:16.4.5"
     eslint: "npm:8.57.0"
+    eslint-plugin-react: "npm:7.35.0"
+    eslint-plugin-react-hooks: "npm:4.6.0"
     eslint-plugin-unused-imports: "npm:3.2.0"
     execa: "npm:5.1.1"
     fast-glob: "npm:3.3.2"