fix: 🐛 eslint setup

Author: MatthysDev

challenges/ecosystem/02.md

@@ -124,10 +124,10 @@ 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 eslint-plugin-react-native eslint-plugin-simple-import-sort
+npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
 ```
 ```console
-yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-simple-import-sort
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react 
 ```
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
@@ -148,7 +148,7 @@ module.exports = {
     "plugin:react/jsx-runtime", // support for React 17 JSX
     "plugin:prettier/recommended" // Prettier recommended rules
   ],
-  plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
+  plugins: ["react", "simple-import-sort"], // add React and React Native plugins
   rules: {
     "prettier/prettier": [ // Prettier rules
       "warn",
@@ -161,26 +161,6 @@ module.exports = {
     "react-native/no-raw-text": 0, // detect raw text outside of Text component
     "react-native/sort-styles": 2, // enforce style definitions are sorted
     "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
-    "simple-import-sort/exports": "warn", // enforce sorting exports within module
-    "simple-import-sort/imports": [
-      "warn",
-      {
-        groups: [
-          // Side effect imports.
-          ["^\\u0000"],
-          // Packages `react` related packages come first.
-          ["^react", "^@?\\w"],
-          // Environment variables
-          ["^(@env)(/.*|$)"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-        ]
-      }
-    ],
-     quotes: ["error", "double"], // enforce double quotes
-    "react/no-unescaped-entities": "off", // Disable the rule
   }
 };
 ```
@@ -205,6 +185,74 @@ module.exports = {
 
 ### Updating ESLint rules
 
+We want to add some rules to our ESLint configuration.
+
+```console
+npm install --dev eslint-plugin-react-native
+```
+```console
+yarn add -D eslint-plugin-react-native
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following react-native rules:
+
+```json
+// .eslintrc.js
+
+{
+  "rules": {
+    ...
+    "react-native/no-color-literals": 2, // enforce color literals are not used
+    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
+    "react-native/no-raw-text": 0, // detect raw text outside of Text component
+    "react-native/sort-styles": 2, // enforce style definitions are sorted
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
+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
+```
+```console
+yarn add -D eslint-plugin-simple-import-sort
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following import rules:
+
+```json
+// .eslintrc.js
+
+{
+  "rules": {
+    ...
+    "simple-import-sort/exports": "warn", // enforce sorting exports within module
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        groups: [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Environment variables
+          ["^(@env)(/.*|$)"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+        ]
+      }
+    ],
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
 We have no control on the api data we are pulling from SWAPI. Sometimes we want to update our rules to reflect differences.
 
 In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we want to disable this rule.
@@ -223,6 +271,8 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 }
 ```
 
+- [ ] Lint your code and push your changes to GitHub.
+
 ## 👽 Bonus
 
 You can share your VSCode settings with your team by adding a `.vscode` folder at the root of your project with the following content:

hackathon/spacecraft/.eslintrc.js

@@ -46,7 +46,5 @@ module.exports = {
         ],
       },
     ],
-    quotes: ["error", "double"], // enforce double quotes
-    "react/no-unescaped-entities": "off", // Disable the rule
   },
 };