Update 02.md

Author: MatthysDev

challenges/ecosystem/02.md

@@ -55,10 +55,10 @@ npx expo lint
 - [ ] Answer **yes** to the following question:
 
 ```console
-✔ No ESLint config found. Install and configure ESLint in this project? 
+✔ No ESLint config found. Install and configure ESLint in this project?
 ```
 
-You will have a `.eslintrc.js` file created at the root of your project.
+You will have a `eslint.config.js` file created at the root of your project.
 
 ### Run ESLint from the terminal
 
@@ -69,7 +69,7 @@ You will have a `.eslintrc.js` file created at the root of your project.
 
   "scripts": {
     ...
-    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
+     "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx ."
     ...
   }
 ```
@@ -110,10 +110,11 @@ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
 yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
 ```
 
-- [ ] Update your `eslintrc.js` file to add the following rules:
+- [ ] Update your `eslint.config.js` file to add the following rules:
 
 ```javascript
-// https://docs.expo.dev/guides/using-eslint/
+// eslint.config.js
+
 const { defineConfig } = require("eslint/config");
 const expoConfig = require("eslint-config-expo/flat");
 const prettier = require("eslint-plugin-prettier");
@@ -131,7 +132,6 @@ module.exports = defineConfig([
     },
   },
 ]);
-
 ```
 
 ### ESLint and prettier rules for React Native
@@ -141,40 +141,45 @@ We are making progress, but we are not done yet. We need to add rules for React
 - [ ] Install the following plugins
 
 ```console
-npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
+npm install --save-dev eslint-plugin-react @typescript-eslint/parser
 # or
-yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
+yarn add --dev eslint-plugin-react @typescript-eslint/parser
 ```
 
-- [ ] Update your `.eslintrc.js` file to add the following rules:
+- [ ] Update your `eslint.config.js` file to add the following rules:
 
 ```javascript
-// .eslintrc.js
+// eslint.config.js
+
+const { defineConfig } = require("eslint/config");
+const expoConfig = require("eslint-config-expo/flat");
+const prettier = require("eslint-plugin-prettier");
+const prettierConfig = require("eslint-config-prettier");
+const reactPlugin = require("eslint-plugin-react");
+const typescriptParser = require("@typescript-eslint/parser");
 
-module.exports = {
-  env: {
-    node: true
+module.exports = defineConfig([
+  expoConfig,
+  prettierConfig,
+  {
+    languageOptions: {
+      parser: typescriptParser, // Specifies the ESLint parser
+    },
+    plugins: {
+      prettier,
+      react: reactPlugin, // add React plugin
+    },
+    rules: {
+      "prettier/prettier": [ // Prettier rules
+        "warn",
+        {
+          usePrettierrc: true,
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
+    },
   },
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-  root: true, // make sure eslint picks up the config at the root of the directory
-  extends: [
-    "eslint:recommended", // ESLint rules
-    "plugin:@typescript-eslint/recommended", // TypeScript rules
-    "plugin:react/recommended", // React rules
-    "plugin:react/jsx-runtime", // support for React 17 JSX
-    "plugin:prettier/recommended" // Prettier recommended rules
-  ],
-  plugins: ["react"], // add React and React Native plugins
-  rules: {
-    "prettier/prettier": [ // Prettier rules
-      "warn",
-      {
-        usePrettierrc: true
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
-  }
-};
+]);
 ```
 
 - [ ] Create a `.prettierrc` file at the root of your project with the following content:
@@ -187,7 +192,7 @@ module.exports = {
   "semi": true,
   "singleAttributePerLine": true,
   "trailingComma": "all",
-  "tabWidth": 2, 
+  "tabWidth": 2,
   "singleQuote": false,
   "endOfLine": "crlf" // for windows users only
 }
@@ -198,19 +203,25 @@ module.exports = {
 We want to add some rules to our ESLint configuration.
 
 ```console
-npm install --dev eslint-plugin-react-native
+npm install --save-dev eslint-plugin-react-native
 # or
 yarn add --dev eslint-plugin-react-native
 ```
 
-- [ ] Update your `.eslintrc.js` file to add the following react-native rules:
+- [ ] Update your `eslint.config.js` file to add the following react-native rules:
 
 ```javascript
-// .eslintrc.js
+// eslint.config.js
+
+const reactNativePlugin = require("eslint-plugin-react-native");
 
+// Add to plugins:
 {
-  plugins: ["react", "react-native"],
-  "rules": {
+  plugins: {
+    ...
+    "react-native": reactNativePlugin,
+  },
+  rules: {
     ...
     "react-native/no-color-literals": 2, // enforce color literals are not used
     "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
@@ -225,19 +236,25 @@ yarn add --dev eslint-plugin-react-native
 We now want to sort our imports automatically. We can use the `simple-import-sort` plugin.
 
 ```console
-npm install --dev eslint-plugin-simple-import-sort
+npm install --save-dev eslint-plugin-simple-import-sort
 # or
 yarn add --dev eslint-plugin-simple-import-sort
 ```
 
-- [ ] Update your `.eslintrc.js` file to add the following import rules:
+- [ ] Update your `eslint.config.js` file to add the following import rules:
 
 ```javascript
-// .eslintrc.js
+// eslint.config.js
+
+const simpleImportSort = require("eslint-plugin-simple-import-sort");
 
+// Add to plugins:
 {
-  "rules": {
-    plugins: ["react", "react-native", "eslint-plugin-simple-import-sort"],
+  plugins: {
+    ...
+    "simple-import-sort": simpleImportSort,
+  },
+  rules: {
     ...
     "simple-import-sort/exports": "warn", // enforce sorting exports within module
     "simple-import-sort/imports": [
@@ -254,8 +271,8 @@ yarn add --dev eslint-plugin-simple-import-sort
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.
           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-        ]
-      }
+        ],
+      },
     ],
   },
 }
@@ -267,16 +284,16 @@ We have no control on the api data we are pulling from SWAPI. Sometimes we want
 
 In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we want to disable this rule.
 
-- [ ] Update your `.eslintrc.js` file to add the following rules:
+- [ ] Update your `eslint.config.js` file to add the following rules:
 
 ```javascript
-// .eslintrc.js
+// eslint.config.js
 
 {
-  "rules": {
+  rules: {
     ...
     camelcase: "off", // disable camelcase rule
-    "@typescript-eslint/no-explicit-any": "warn" // detect usage of `any` type
+    "@typescript-eslint/no-explicit-any": "warn", // detect usage of `any` type
   },
 }
 ```