upate

Author: flexbox

challenges/ecosystem/02.md

@@ -58,29 +58,6 @@ npx expo lint
 
 You will have a `.eslintrc.js` file created at the root of your project.
 
-### Prettier
-
-- [ ] Install the following dependencies
-
-```console
-npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
-# or `yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier`
-```
-
-- [ ] Update your `eslintrc.js` file to add the following rules:
-
-```javascript
-// .eslintrc.js
-
-module.exports = {
-  extends: ["expo", "prettier"],
-  plugins: ["prettier"],
-  rules: {
-    "prettier/prettier": "warn",
-  },
-};
-```
-
 ### Run ESLint from the terminal
 
 - [ ] Update your scripts on `package.json` to check errors.
@@ -118,6 +95,29 @@ npm run lint -- --fix
 - [ ] Push your project to GitHub to have a backup.
 - [ ] if you encounter a difference between errors on your terminal and VSCode, reload VSCode with `⌘ + ⇧ + P` "Developer: Reload Window".
 
+### Prettier
+
+- [ ] Install the following dependencies
+
+```console
+npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
+# or `yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier`
+```
+
+- [ ] Update your `eslintrc.js` file to add the following rules:
+
+```javascript
+// .eslintrc.js
+
+module.exports = {
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
+  rules: {
+    "prettier/prettier": "warn",
+  },
+};
+```
+
 ### ESLint and prettier rules for React Native
 
 We are making progress, but we are not done yet. We need to add rules for React Native. In the meantime, let's install some plugins to format our code with prettier and sort imports automatically.
@@ -162,7 +162,7 @@ module.exports = {
 
 - Create a `.prettierrc` file at the root of your project with the following content:
 
-```json
+```javascript
 // .prettierrc
 
 {
@@ -189,7 +189,7 @@ npm install --dev eslint-plugin-react-native
 
 - [ ] Update your `.eslintrc.js` file to add the following react-native rules:
 
-```json
+```javascript
 // .eslintrc.js
 
 {
@@ -215,7 +215,7 @@ npm install --dev eslint-plugin-simple-import-sort
 
 - [ ] Update your `.eslintrc.js` file to add the following import rules:
 
-```json
+```javascript
 // .eslintrc.js
 
 {
@@ -252,7 +252,7 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
 
-```json
+```javascript
 // .eslintrc.js
 
 {
@@ -274,11 +274,11 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 
 ### 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:
+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
-// .vscode/settings.json
+This will make sure everyone in your team is using the same settings.
 
+```json
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
@@ -288,6 +288,6 @@ 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.
+- [ ] create a `.vscode` folder.
+- [ ] create a `settings.json` file.
+- [ ] Add the content above.