Feat/basic setup (#14)

* chore: use eslint package from the repo and not from npm in the example app

* chore: add defineConfig to type-check the index.js file

* feat: ignore default config files for analysis

* fix: parser is a dependency

* refacto: remove unnecessary plugins

Both plugins were already included in the shareable configs imported in the "extends" section

* feat: disable rule that require to import React with jsx

* feat: add rules for react-hooks

* feat: add prettier config

* chore: reproduce same config as in enablers

* feat: add custom rules config from enablers

* feat: add rules for typescript

* fix: config eslint extension for monorepo

Author: alexisdelage

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "eslint.workingDirectories": ["packages/example-app", "packages/eslint"]
 }

packages/eslint/README.md

@@ -4,7 +4,11 @@ This project is an ESLint config that gathers all the rules, plugins and parsers
 
 ## How to use?
 
-In your app, run `yarn add --dev @bam.tech/eslint-config eslint-plugin-react-native eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint typescript`.
+In your app, run
+
+```bash
+yarn add --dev @bam.tech/eslint-config @typescript-eslint/eslint-plugin eslint eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native prettier
+```
 
 In your `.eslintrc` config file, extend the exported configuration:
 

packages/eslint/index.js

@@ -1,27 +1,73 @@
+// @ts-check
 "use strict";
 
-module.exports = {
-  env: {
-    node: true,
-    "react-native/react-native": true,
-  },
+const { defineConfig } = require("eslint-define-config");
+
+module.exports = defineConfig({
+  ignorePatterns: [
+    ".cache", // tsc/eslint/metro cache
+    ".expo-shared",
+    ".expo",
+    ".yarn", // yarn 3
+    "android", // react-native
+    "ios", // react-native
+    "coverage", // jest
+    "dist", // expo updates
+    "node_modules",
+  ],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime", // Disables the rules that require importing react when using JSX
     "plugin:react-native/all",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "no-return-await": "error",
+    "prettier/prettier": ["error", { printWidth: 80 }],
+    "react-hooks/exhaustive-deps": "error",
+    "react-native/no-color-literals": "off",
+    "react-native/no-raw-text": ["error", { skip: ["Trans"] }],
+    "react-native/sort-styles": "off",
+    "react/no-unstable-nested-components": "error",
+    "react/prop-types": "off",
+  },
+  env: {
+    node: true,
+    "react-native/react-native": true,
+  },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
   },
-  plugins: ["@typescript-eslint", "react-native"],
   settings: {
     react: {
       version: "detect",
     },
   },
-};
+  overrides: [
+    {
+      files: ["**/*.ts?(x)"],
+      parserOptions: {
+        project: "tsconfig.json",
+      },
+      rules: {
+        // Note: disable the base rule as it can report incorrect errors
+        "no-return-await": "off",
+        "@typescript-eslint/return-await": "error",
+      },
+    },
+  ],
+});

packages/eslint/package.json

@@ -9,10 +9,16 @@
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": ">= 5",
     "eslint": ">= 8",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-native": "^4.0.0"
+    "eslint-plugin-prettier": ">=4.2.1",
+    "eslint-plugin-react": ">=7.31.11",
+    "eslint-plugin-react-hooks": ">=4.6.0",
+    "eslint-plugin-react-native": ">=4.0.0",
+    "prettier": ">=2.8.8",
+    "react": ">=17"
   },
-  "devDependencies": {
-    "@typescript-eslint/parser": "^5.48.0"
+  "dependencies": {
+    "@typescript-eslint/parser": "^5.48.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-define-config": "^1.21.0"
   }
 }

packages/example-app/break-prettier-eslint-rules.ts

@@ -0,0 +1,4 @@
+// This should trigger an error breaking eslint-plugin-prettier:
+// prettier/prettier
+
+export function aVeryLongFunctionNameWhichShouldBeForbiddenBecauseItIsReallyTooLongToRead() { return 1; }

packages/example-app/break-react-eslint-rules.tsx

@@ -1,4 +1,4 @@
-// This should trigger two errors breaking eslint-plugin-react:
-// react/react-in-jsx-scope
-// react/react-in-jsx-scope
+// This should trigger one error breaking eslint-plugin-react:
+// react/jsx-no-undef
+
 export const MyComponent = () => <ThisIsAViewThatDoesntExist />;

packages/example-app/break-react-hook-eslint-rules.tsx

@@ -0,0 +1,16 @@
+// This should trigger an error breaking eslint-plugin-react-hooks:
+// react-hooks/exhaustive-deps
+
+import { useState, useEffect } from "react";
+
+const MyComponent = () => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    setCount(count + 1);
+  }, []);
+
+  return <></>;
+};
+
+export default MyComponent;

packages/example-app/break-react-native-eslint-rules.ts

@@ -0,0 +1,8 @@
+// This should trigger one error breaking eslint-plugin-react-native:
+// react-native/no-raw-text
+
+import { View } from "react-native";
+
+export const MyText = () => {
+  return <View>Test</View>;
+};

packages/example-app/break-react-native-eslint-rules.tsx

@@ -1,4 +1,5 @@
 // This should trigger two errors breaking typescript-eslint rules:
 // @typescript-eslint/no-unused-vars
 // @typescript-eslint/ban-types
+
 const str: String = "foo";