(ci) configure Prettier

.eslintrc.js

@@ -22,44 +22,28 @@ module.exports = {
             },
         },
     },
+    
+    'extends': [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'prettier'
+    ],
     'env': {
         'browser': true,
         'es6': true
     },
-    'extends': [
-        'eslint:recommended',
-        'plugin:react/recommended'
-    ],
+    "rules": {
+        "prettier/prettier": "error"
+      },  
     'globals': {
         'Atomics': 'readonly',
         'SharedArrayBuffer': 'readonly'
     },
     'parserOptions': {
-        'ecmaFeatures': {
-            'jsx': true
-        },
         'ecmaVersion': 2018,
         'sourceType': 'module'
     },
     'plugins': [
-        'react'
+        'react', 'prettier'
     ],
-    'rules': {
-        'indent': [
-            'error',
-            2
-        ],
-        'linebreak-style': [
-            'error',
-            'unix'
-        ],
-        'quotes': [
-            'error',
-            'double'
-        ],
-        'semi': [
-            'error',
-            'never'
-        ]
-    }
 } 

.gitlab-ci.yml

@@ -3,32 +3,33 @@ image: node:10.14.2
 stages:
   - test
   - build
-  
+
 lint:
   stage: test
   script:
     - npm install
     - npm run lint
+
   cache:
     key:
       files:
-        - package.json   
+        - package.json
     paths:
       - node_modules
-     
+
 pages:
   stage: build
   script:
-  - npm install gatsby-cli
-  - npm run build --prefix-paths
+    - npm install gatsby-cli
+    - npm run build --prefix-paths
   artifacts:
     paths:
-    - public
+      - public
   cache:
     key:
       files:
-        - package.json   
+        - package.json
     paths:
       - node_modules
   only:
-  - master 
+    - master

.prettierrc

 {
   "arrowParens": "avoid",
-  "semi": false
+  "semi": false,
+  "tabWidth": 2
 }

README.md

-# Froggit page's URL: 
+# Froggit page's URL:
 
 https://froggit.gitlab.io/froggit.fr/
 
@@ -8,16 +8,15 @@ Navigate into your new site’s directory and start it up.
 
 ## gatsby develop
 
-
 Open the source code and start editing!
 Your site is now running at http://localhost:8000!
 Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
 Open the my-hello-world-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!
 
-
-
 ### 🧐 What's inside?
+
 A quick look at the top-level files and directories you'll see in a Gatsby project.
+
 ```
 .
 ├── node_modules
@@ -69,9 +68,9 @@ Looking for more guidance? Full documentation for Gatsby lives on the website. H
 ## Linter Gatsby
 
 `.eslintrc.js`: ESLint is an open source JavaScript linting utility.
-Gatsby ships with a built-in ESLint setup. 
+Gatsby ships with a built-in ESLint setup.
 .eslintrc is the file that is create to use Eslint after run script:
-node_modules/.bin/eslint -init 
+node_modules/.bin/eslint -init
 This file will determinate a few rules and configurations to your project.
 The command to run ESLint in this project is: npm run lint
 
@@ -79,6 +78,62 @@ You can also create your own ESLint's configuration with NPM packages.
 
 More informations on https://www.gatsbyjs.org/docs/eslint/
 
+## Why ESLint and Prettier ?
+
+ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.
+
+Prettier, while similar to ESLint by formatting your code, does not check your code quality. It just serves as a code formatter. It does this job pretty well though by natively supporting JavaScript but also JSX, Flow, TypeScript, HTML, JSON, CSS and many more languages.
+Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules.
+
+Even if they all have a similar purpose, they each excel in their own field.
+
+All have similar objectives:
+make code more consistent in itself and across team members and detect problematic code patterns that could lead to potential bugs.
+
+1. commands in terminal:
+
+eslint commands:
+
+- to see errors: `npx eslint (file-name)`
+  Warning: you can make this command, to target just files into src folder,
+  (find this command in scripts of .gitlab-ci.yml)
+- to fix errors: `npx eslint (file-name) --fix`
+  Warning: like the last command, you can target files into src folder and fix
+  linting errors with: `npm run fix`
+
+prettier command to fix errors:
+`npx prettier (file-name) --write`
+
+2. install extention:
+
+you can install and configue extentions for eslint and prettier in your main editor.
+
+3. For us Eslint and Prettier together without conflicts:
+
+First, we need to let Prettier do is job
+
+In order to be able to use ESLint alongside Prettier, the idea is to deactivate all ESLint rules that might conflict with Prettier (code formatting rules).
+Fortunately for us, the eslint-config-prettier package already does that.
+
+We will rewrite our `.eslintrc` file by adding prettier to the extends array and removing any code formatting rules we had.
+
+The prettier configuration will override any prior configuration in the extends array disabling all ESLint code formatting rules. With this configuration,
+Prettier and ESLint can be run separately without any issues.
+
+Next, we need to integrate Prettier with ESLint
+
+The process of having to run two commands to lint and format our file is not very convenient. To fix this, we will integrate Prettier with ESLint by adding
+the eslint-plugin-prettier package.
+
+We will now rewrite our `.eslintrc` file by adding the prettier plugin in the plugins array and setting the newly established prettier rule to error so
+that any prettier formatting error is considered as an ESLint error.
+
+We can take an unlinted file and apply ESLint on it. They are marked by prettier/prettier as errors within our ESLint error output
+
+Now let's use the fix option of ESLint.
+
+Our file gets formatted the same way Prettier did.
+
 ## Gatsby Starter Catalyst
 
 Basic starter that could be used as a barebones starting point for building a finished website. Implements `gatsby-theme-catalyst-core`, `gatsby-theme-catalyst-header-top`, and `gatsby-theme-catalyst-footer`.

package.json

@@ -5,7 +5,9 @@
   "private": true,
   "author": "Eric Howey <eric@erichowey.dev>",
   "dependencies": {
+    "eslint-plugin-prettier": "^3.1.4",
     "gatsby": "^2.21.21",
+    "gatsby-plugin-prettier-eslint": "^1.0.4",
     "gatsby-theme-catalyst-core": "^1.2.3",
     "gatsby-theme-catalyst-footer": "^1.1.0",
     "gatsby-theme-catalyst-header-side": "^1.1.1",
@@ -15,6 +17,7 @@
     "typeface-raleway": "0.0.75"
   },
   "devDependencies": {
+    "eslint-config-prettier": "^6.11.0",
     "prettier": "^2.0.5"
   },
   "keywords": [
@@ -26,6 +29,7 @@
   "scripts": {
     "build": "gatsby build",
     "lint": "node_modules/.bin/eslint src/",
+    "fix": "npx eslint src/gatsby-plugin-theme-ui/index.js --fix",
     "develop": "gatsby develop",
     "clean": "gatsby clean",
     "format": "prettier --write src/**/*.{js,jsx}",

src/gatsby-plugin-theme-ui/index.js

@@ -12,13 +12,13 @@ export default {
   fonts: {
     ...tailwind.fonts,
     body: "Raleway, sans-serif",
-    siteTitle: "Raleway, sans-serif", 
-    navLinks: "inherit", 
-    alt: "inherit", 
+    siteTitle: "Raleway, sans-serif",
+    navLinks: "inherit",
+    alt: "inherit",
   },
   colors: {
     ...tailwind.colors,
-    
+
     primary: baseColors.orange[7],
     primaryHover: baseColors.orange[8],
     secondary: baseColors.orange[6],
@@ -31,14 +31,14 @@ export default {
       backgroundOpen: "#2e7da4",
       text: "#577018",
       textOpen: baseColors.gray[1],
-      icons:"#E07931",
-      iconsHover:"#59344F",
-      iconsOpen:"#59344F",
+      icons: "#E07931",
+      iconsHover: "#59344F",
+      iconsOpen: "#59344F",
     },
 
     main: {
       my: 0,
-      color: "black",//ATTENTION: use until in lightMode!!! 
+      color: "black", //ATTENTION: use until in lightMode!!!
     },
 
     footer: {
@@ -48,11 +48,8 @@ export default {
       links: baseColors.gray[8],
       //icons: baseColors.gray[8],
       color: "#87A54F",
-      icons:"#E07931",
-      iconsHover: "#8EA34E",//moss green
-      
-
-
+      icons: "#E07931",
+      iconsHover: "#8EA34E", //moss green
     },
     modes: {
       dark: {
@@ -68,35 +65,34 @@ export default {
         header: {
           backgroundOpen: "#324b50",
           //text: baseColors.gray[1],
-          text: "#577018",//vert olive
+          text: "#577018", //vert olive
           textOpen: baseColors.gray[1],
           //icons: baseColors.gray[5],
-          icons:"#E07931",//princetone orange
-          iconsHover: "#8EA34E",//moss green
+          icons: "#E07931", //princetone orange
+          iconsHover: "#8EA34E", //moss green
           iconsOpen: baseColors.gray[5],
           navLi: "#577018",
-          
         },
 
         main: {
           my: 0,
           //color: "#56823A",
-          color: "white",//ATTENTION: use until in darkMode!!!
-        }, 
+          color: "white", //ATTENTION: use until in darkMode!!!
+        },
         gradients: {
           blue: {
-            backgroundImage: t => `linear-gradient(45deg, ${t.colors.orange[3]}, ${t.colors.orange[5]})`,
+            backgroundImage: t =>
+              `linear-gradient(45deg, ${t.colors.orange[3]}, ${t.colors.orange[5]})`,
           },
         },
         footer: {
           background: "white",
           //text: baseColors.gray[1],
-          text: "#577018",//vert olive
-          icons: "#E07931",//princetone orange
+          text: "#577018", //vert olive
+          icons: "#E07931", //princetone orange
           //icons: baseColors.gray[1],
           textAlign: "center",
           links: baseColors.gray[1],
-          
         },
       },
     },
@@ -132,7 +128,7 @@ export default {
     },
     a: {
       //color: "primary",
-      color:"#orange",
+      color: "#orange",
       textDecoration: "none",
       ":hover": {
         textDecoration: "underline",
@@ -227,7 +223,6 @@ export default {
       },
       ":hover": {
         bg: "primaryHover",
-
       },
     },
     secondary: {
@@ -265,9 +260,8 @@ export default {
     },
   },
   variants: {
-  
     siteHeader: {
-      padding:"0 20px 0 20px",
+      padding: "0 20px 0 20px",
     },
     header: {
       //border: "1px black solid",
@@ -277,12 +271,12 @@ export default {
     },
 
     siteTitle: {
-      color: "#577018",//green olive
+      color: "#577018", //green olive
       //fontSize: [1, 15, null, 2, null],
       //fontSize: [1, 15, null, 4, null],
       fontSize: [1, 19, null, 3, null],
     },
-    
+
     footer: {
       textAlign: "center",
       color: "#577018",
@@ -292,7 +286,7 @@ export default {
       my: 5,
     },
 
-    navUl:{
+    navUl: {
       color: "#B3433B",
     },
 
@@ -308,13 +302,13 @@ export default {
     navLink: {
       "::after": {
         position: "absolute",
-        color: "#9C6341",//color grenerate by gardiant
+        color: "#9C6341", //color grenerate by gardiant
         top: "100%",
         left: "0",
         width: "100%",
         height: "1px",
         backgroundColor: "primary",
-        content: "\"\"",
+        content: '""',
         opacity: "0",
         transition: "height 0.3s, opacity 0.3s, transform 0.3s",
         transform: "translateY(-6px)",
@@ -322,7 +316,6 @@ export default {
       ":hover, :focus, :active": {
         textDecoration: "none",
         color: "#8EA34E",
-        
       },
       ":hover::after, :active::after, :focus::after": {
         height: "2px",
@@ -339,7 +332,7 @@ export default {
         width: "100%",
         height: "4px",
         backgroundColor: "primary",
-        content: "\"\"",
+        content: '""',
         opacity: "1",
         transform: "translateY(0px)",
       },