upate

Author: flexbox

challenges/ecosystem/02.md

@@ -42,32 +42,31 @@ 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 
 
-### Setup ESLint in your expo project
+- [ ] Setup ESLint in your project with the following command:
 
 ```console
 npx expo lint
 ```
 
-You can lint your code manually by rerunning `npx expo lint` in your terminal.
+- [ ] Answer **yes** to the following question:
 
-- [ ] Setup ESLint in your project.
-- [ ] Run `npx expo lint` in your terminal.
+```console
+✔ 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.
 
 ### Prettier
 
-For other packages managers
-```console
-npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
-```
+- [ ] Install the following dependencies
 
-For yarn
 ```console
-yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
+npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
+# or `yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier`
 ```
 
-- [ ] add the dependencies to your project.
-
 - [ ] Update your `eslintrc.js` file to add the following rules:
 
 ```javascript
@@ -87,11 +86,8 @@ module.exports = {
 - [ ] Update your scripts on `package.json` to check errors.
 
 ```json
-<<<<<<< Updated upstream
 // package.json
 
-=======
->>>>>>> Stashed changes
   "scripts": {
     ...
     "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
@@ -130,9 +126,7 @@ 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
-```
-```console
-yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react 
+# or `yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react` 
 ```
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
@@ -190,9 +184,7 @@ 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
+# or `yarn add --dev eslint-plugin-react-native`
 ```
 
 - [ ] Update your `.eslintrc.js` file to add the following react-native rules:
@@ -218,9 +210,7 @@ We now want to sort our imports automatically. We can use the `simple-import-sor
 
 ```console
 npm install --dev eslint-plugin-simple-import-sort
-```
-```console
-yarn add -D 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:
@@ -249,28 +239,8 @@ yarn add -D eslint-plugin-simple-import-sort
           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
         ]
       }
-<<<<<<< Updated upstream
     ],
   },
-=======
-    ]
-  }
-};
-```
-
-- Create a `.prettierrc` file at the root of your project with the following content:
-
-```json
-// .prettierrc
-
-{
-  "$schema": "http://json.schemastore.org/prettierrc",
-  "semi": true,
-  "singleAttributePerLine": true,
-  "trailingComma": "none",
-  "tabWidth": 2, 
-  "singleQuote": false
->>>>>>> Stashed changes
 }
 ```
 
@@ -298,6 +268,12 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 
 ## 👽 Bonus
 
+### Avoid data layer issues
+
+- [ ] Install [TanStack Query ESLint plugin](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query).
+
+### Share your settings with your team
+
 You can share your VSCode settings with your team by adding a `.vscode` folder at the root of your project with the following content:
 
 ```json
@@ -314,6 +290,4 @@ You can share your VSCode settings with your team by adding a `.vscode` folder a
 
 This will make sure everyone in your team is using the same settings.
 
-- [ ] create a ``.vscode` folder and paste the previous `settings.json` files.
-
-- [ ] Install [TanStack Query ESLint plugin](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query).
+- [ ] create a ``.vscode` folder and paste the previous `settings.json` files.