fix: 🐛 update ecosystem-02 eslint config

Author: MatthysDev

challenges/ecosystem/02.md

@@ -42,32 +42,40 @@ Prettier is an opinionated code formatter. It enforces a consistent style by par
 
 ![Prettier format on save preview on VS Code](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/ecosystem/format-on-save.png)
 
-### Setup ESLint rules for React Native project
 
-- [ ] Install ESLint as a dev dependency.
+### Setup ESLint in your expo project
 
 ```console
-npm install --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
-# same as `yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser`
+npx expo lint
 ```
 
-- [ ] Run `npx expo lint` to create a `.eslintrc.js` file at the root of your project.
+You can lint your code manually by rerunning `npx expo lint` in your terminal.
+
+- [ ] Setup ESLint in your project.
+- [ ] Run `npx expo lint` in your terminal.
 
+### Prettier
+
+For other packages managers
 ```console
-npx expo lint
+npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
 ```
 
-- [ ] Update your `.eslintrc.js` file to add the following rules:
+For yarn
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
+```
+
+- [ ] add the dependencies to your project.
+
+- [ ] Update your `eslintrc.js` file to add the following rules:
 
 ```javascript
-// .eslintrc.js
 module.exports = {
-  extends: ["expo", "react-native-wcandillon"],
-  plugins: ["@tanstack/query"],
-  requireConfigFile: false,
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
   rules: {
-    camelcase: "off",
-    "import/no-anonymous-default-export": [1, { allowArray: true }],
+    "prettier/prettier": "warn",
   },
 };
 ```
@@ -118,6 +126,9 @@ We are making progress, but we are not done yet. We need to add rules for React
 ```console
 npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-simple-import-sort
 ```
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-simple-import-sort
+```
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
 
@@ -167,7 +178,9 @@ module.exports = {
           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
         ]
       }
-    ]
+    ],
+     quotes: ["error", "double"], // enforce double quotes
+    "react/no-unescaped-entities": "off", // Disable the rule
   }
 };
 ```
@@ -188,7 +201,6 @@ module.exports = {
 }
 ```
 
-- [ ] Run `--fix` to automatically fix your errors.
 - [ ] if you encounter a difference between errors on your terminal and VSCode, reload VSCode with `⌘ + ⇧ + P` "Developer: Reload Window".
 
 ### Updating ESLint rules
@@ -205,7 +217,7 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 {
   "rules": {
     ...
-    "camelcase": "off", // disable camelcase rule
+    camelcase: "off", // disable camelcase rule
     "@typescript-eslint/no-explicit-any": "warn" // detect usage of `any` type
   },
 }

hackathon/spacecraft/.eslintrc.js

@@ -1,4 +1,52 @@
-// https://docs.expo.dev/guides/using-eslint/
 module.exports = {
-  extends: 'expo',
-};
+  env: {
+    node: true,
+  },
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  root: true, // make sure eslint picks up the config at the root of the directory
+  extends: [
+    "expo",
+    "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", "react-native", "simple-import-sort"], // add React and React Native plugins
+  rules: {
+    camelcase: "off", // disable camelcase rule
+    "@typescript-eslint/no-explicit-any": "warn", // detect usage of `any` type
+    "prettier/prettier": [
+      // Prettier rules
+      "warn",
+      {
+        usePrettierrc: true,
+      },
+    ],
+    "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
+    "@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
+  },
+};

hackathon/spacecraft/.prettierrc

@@ -1,4 +1,8 @@
 {
+  "$schema": "http://json.schemastore.org/prettierrc",
   "semi": true,
+  "singleAttributePerLine": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
   "singleQuote": false
-}
+}

hackathon/spacecraft/App.tsx

@@ -1,8 +1,8 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Constants from "expo-constants";
 import React from "react";
 import { NetworkProvider } from "react-native-offline";
 import { Provider as PaperProvider } from "react-native-paper";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Constants from "expo-constants";
 
 import { AuthenticationProvider } from "~/context/Authentication";
 import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";

hackathon/spacecraft/package.json

@@ -80,18 +80,26 @@
     "@types/jest": "^29.5.4",
     "@types/react": "~18.2.79",
     "@types/react-dom": "~18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "app-icon-badge": "^0.0.15",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-root-import": "^6.6.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.56.0",
     "eslint-config-expo": "^7.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-native-wcandillon": "^3.9.0",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-native": "^4.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "jest": "^29.6.4",
     "jest-expo": "~51.0.2",
+    "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   }
 }

hackathon/spacecraft/src/components/Button.stories.tsx

@@ -7,22 +7,41 @@ export default {
 
 export const _Button = () => (
   <View style={{ flex: 1, justifyContent: "space-around", padding: 16 }}>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="contained">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="contained"
+    >
       contained
     </Button>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="contained-tonal">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="contained-tonal"
+    >
       contained-tonal
     </Button>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="elevated">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="elevated"
+    >
       elevated
     </Button>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="outlined">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="outlined"
+    >
       outlined
     </Button>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="text">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="text"
+    >
       text
     </Button>
-    <Button onPress={() => Alert.alert("Pressed!")} mode="text" icon="camera">
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      mode="text"
+      icon="camera"
+    >
       <ActivityIndicator />
       text
     </Button>
@@ -53,7 +72,10 @@ export const _Button = () => (
 export const _ButtonSizes = () => (
   <View style={{ flex: 1, justifyContent: "space-around", padding: 16 }}>
     <Button onPress={() => Alert.alert("Pressed!")}>small</Button>
-    <Button onPress={() => Alert.alert("Pressed!")} compact={true}>
+    <Button
+      onPress={() => Alert.alert("Pressed!")}
+      compact={true}
+    >
       medium
     </Button>
   </View>

hackathon/spacecraft/src/components/ButtonSupport.tsx

@@ -9,12 +9,16 @@ interface Props {
 export const ButtonSupport = ({ mode = "contained" }: Props) => {
   const handleOpenGitHub = async () => {
     await WebBrowser.openBrowserAsync(
-      "https://github.com/flexbox/react-native-bootcamp/issues"
+      "https://github.com/flexbox/react-native-bootcamp/issues",
     );
   };
 
   return (
-    <Button onPress={handleOpenGitHub} mode={mode} style={{ marginBottom: 12 }}>
+    <Button
+      onPress={handleOpenGitHub}
+      mode={mode}
+      style={{ marginBottom: 12 }}
+    >
       Give my opinion
     </Button>
   );

hackathon/spacecraft/src/components/Card.stories.tsx

@@ -1,6 +1,6 @@
 import { NavigationContainer } from "@react-navigation/native";
-
 import type { StarshipProps } from "api/types";
+
 import { StarshipCard } from "~/components/StarshipCard";
 
 const shipFixture = {

hackathon/spacecraft/src/components/FromInput.test.tsx

@@ -6,7 +6,13 @@ import { FormInput } from "~/components/FromInput";
 describe("FormInput", () => {
   const mock = jest.fn();
   it("renders correctly", () => {
-    render(<FormInput label="your-car" value="tesla" onChangeText={mock} />);
+    render(
+      <FormInput
+        label="your-car"
+        value="tesla"
+        onChangeText={mock}
+      />,
+    );
     screen.getAllByText("your-car");
     fireEvent.changeText(screen.getAllByText("your-car")[0], "tesla");
     expect(mock).toHaveBeenCalled();

hackathon/spacecraft/src/components/Header.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react-native";
 import React from "react";
+import { render, screen } from "@testing-library/react-native";
 
 import { Header } from "./Header";
 

hackathon/spacecraft/src/components/Header.tsx

@@ -1,5 +1,5 @@
-import { View, StyleSheet } from "react-native";
 import React from "react";
+import { StyleSheet, View } from "react-native";
 import { Text, useTheme } from "react-native-paper";
 import Constants from "expo-constants";
 
@@ -24,10 +24,10 @@ export const Header = ({ title }: HeaderProps) => {
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: Constants.statusBarHeight,
     alignItems: "center",
-    justifyContent: "center",
     height: 256,
+    justifyContent: "center",
+    paddingTop: Constants.statusBarHeight,
   },
   headerText: {
     fontWeight: "800",

hackathon/spacecraft/src/components/Image.tsx

@@ -2,9 +2,9 @@ import React from "react";
 // import type { ImageProps } from "expo-image";
 import type { ImageProps } from "react-native";
 import { Image as RNImage } from "react-native";
-import { Image as ExpoImage } from "expo-image";
 import type { AnimatedProps } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
+import { Image as ExpoImage } from "expo-image";
 
 const AnimatedImage = Animated.createAnimatedComponent(RNImage);
 

hackathon/spacecraft/src/components/Offline.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
-import { ActivityIndicator } from "react-native-paper";
+import { StyleSheet, Text, View } from "react-native";
 import { useIsConnected } from "react-native-offline";
+import { ActivityIndicator } from "react-native-paper";
 
 export const Offline = () => {
   const isConnected = useIsConnected();
@@ -20,16 +20,16 @@ export const Offline = () => {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 20,
+    alignItems: "center",
+    backgroundColor: "#FEE2E2",
+    borderRadius: 10,
+    flexDirection: "row",
+    justifyContent: "space-between",
     marginHorizontal: 20,
+    padding: 20,
     position: "absolute",
     top: 55,
     width: "90%",
-    borderRadius: 10,
-    backgroundColor: "#FEE2E2",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
   },
   message: {
     color: "#991B1B",