Add eslint + prettier

Author: jakebellacera

Diff for: .eslintignore

@@ -1,3 +1,4 @@
-node_modules
-public
-coverage
+/.cache
+/node_modules
+/public
+/coverage

Diff for: .eslintrc.js

@@ -3,20 +3,14 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
+  extends: ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: [
-    'react',
-  ],
-  rules: {
+    sourceType: "module",
   },
+  plugins: ["react"],
+  rules: {},
 };

Diff for: .github/workflows/build-checks.yml

@@ -35,4 +35,4 @@ jobs:
           key: ${{ runner.os }}-cache-gatsby
           restore-keys: |
             ${{ runner.os }}-cache-gatsby
-      - run: npm run build
+      - run: npm run build

Diff for: .prettierignore

@@ -0,0 +1,5 @@
+/.cache
+/node_modules
+/public
+/coverage
+/package-lock.json

Diff for: .prettierrc.json

@@ -0,0 +1 @@
+{}

Diff for: .vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

Diff for: .vscode/settings.json

@@ -1,6 +1,4 @@
 {
-  "eslint.format.enable": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-  },
-}
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

Diff for: gatsby-config.js

@@ -1,37 +1,45 @@
 module.exports = {
   siteMetadata: {
-    siteUrl: 'https://www.yourdomain.tld',
-    title: 'Delta Lake',
+    siteUrl: "https://www.yourdomain.tld",
+    title: "Delta Lake",
   },
   plugins: [
-    'gatsby-plugin-styled-components',
-    'gatsby-plugin-image',
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sitemap',
+    "gatsby-plugin-styled-components",
+    "gatsby-plugin-image",
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sitemap",
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: "gatsby-plugin-manifest",
       options: {
-        icon: 'src/images/icon.png',
+        name: "Delta Lake",
+        short_name: "Delta Lake",
+        start_url: "/",
+        background_color: "#042436",
+        theme_color: "#00ADD4",
+        icon: "src/images/icon.png",
+        icon_options: {
+          purpose: "maskable",
+        },
       },
     },
-    'gatsby-plugin-mdx',
-    'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
+    "gatsby-plugin-mdx",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'images',
-        path: './src/images/',
+        name: "images",
+        path: "./src/images/",
       },
-      __key: 'images',
+      __key: "images",
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'pages',
-        path: './src/pages/',
+        name: "pages",
+        path: "./src/pages/",
       },
-      __key: 'pages',
+      __key: "pages",
     },
   ],
 };

Diff for: package-lock.json

@@ -17,8 +17,8 @@
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "lint": "eslint \"**/*.{js,jsx}\"",
-    "lint:fix": "eslint \"**/*.{js,jsx}\" --fix"
+    "lint": "eslint \"**/*.{js,jsx}\" && prettier --check .",
+    "lint:fix": "eslint \"**/*.{js,jsx}\" --fix && prettier --write ."
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
@@ -42,9 +42,11 @@
   "devDependencies": {
     "eslint": "^7.31.0",
     "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.3.2"
   }
 }

Diff for: package.json

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { Link } from 'gatsby';
+import * as React from "react";
+import { Link } from "gatsby";
 
 // styles
 const pageStyles = {
-  color: '#232129',
-  padding: '96px',
-  fontFamily: '-apple-system, Roboto, sans-serif, serif',
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
 };
 const headingStyles = {
   marginTop: 0,
@@ -17,10 +17,10 @@ const paragraphStyles = {
   marginBottom: 48,
 };
 const codeStyles = {
-  color: '#8A6534',
+  color: "#8A6534",
   padding: 4,
-  backgroundColor: '#FFF4DB',
-  fontSize: '1.25rem',
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
   borderRadius: 4,
 };
 
@@ -30,27 +30,22 @@ const NotFoundPage = () => (
     <title>Not found</title>
     <h1 style={headingStyles}>Page not found</h1>
     <p style={paragraphStyles}>
-      Sorry
-      {' '}
+      Sorry{" "}
       <span role="img" aria-label="Pensive emoji">
         😔
-      </span>
-      {' '}
+      </span>{" "}
       we couldn’t find what you were looking for.
       <br />
-      {process.env.NODE_ENV === 'development' ? (
+      {process.env.NODE_ENV === "development" ? (
         <>
           <br />
-          Try creating a page in
-          {' '}
-          <code style={codeStyles}>src/pages/</code>
+          Try creating a page in <code style={codeStyles}>src/pages/</code>
           .
           <br />
         </>
       ) : null}
       <br />
-      <Link to="/">Go home</Link>
-      .
+      <Link to="/">Go home</Link>.
     </p>
   </main>
 );