add eslint quotes rule

2021-06-13 23:00:19 -07:00 · 2021-06-13 23:00:19 -07:00 · 45e4a0a4d3
commit 45e4a0a4d3
parent 9a7c8c415f
6 changed files with 137 additions and 42 deletions
--- a/gatsby/.eslintrc.js
+++ b/gatsby/.eslintrc.js
@ -2,12 +2,22 @@ module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
-  plugins: [
-    "react"
+  'parser': 'babel-eslint', // uses babel-eslint transforms
+  'settings': {
+    'react': {
+      'version': 'detect' // detect react version
+    }
+  },
+  'env': {
+    'node': true // defines things like process.env when generating through node
+  },
+  'extends': [
+    'eslint:recommended', // use recommended configs
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended'
  ],
-  extends: [
-    `react-app`,
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ]
+  'rules': {
+    'react/prop-types': 0,
+    'quotes': ['warn', 'single']
+  }
 }
--- a/gatsby/gatsby-config.js
+++ b/gatsby/gatsby-config.js
@ -1,44 +1,53 @@
 module.exports = {
  siteMetadata: {
-    title: "Chuck Dries",
+    title: 'Chuck Dries',
  },
  plugins: [
-    "gatsby-plugin-sass",
-    "gatsby-plugin-image",
-    "gatsby-plugin-react-helmet",
+    'gatsby-plugin-sass',
+    'gatsby-plugin-image',
+    'gatsby-plugin-react-helmet',
    {
-      resolve: "gatsby-plugin-manifest",
+      resolve: 'gatsby-plugin-manifest',
      options: {
-        icon: "src/images/icon.png",
+        icon: 'src/images/icon.png',
      },
    },
-    "gatsby-plugin-mdx",
-    "gatsby-plugin-sharp",
-    "gatsby-transformer-sharp",
-    "gatsby-plugin-postcss",
+    'gatsby-plugin-mdx',
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-postcss',
    {
-      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: "gallery",
-        path: "./data/gallery/",
+        name: 'gallery',
+        path: './data/gallery/',
      },
-      __key: "gallery",
+      __key: 'gallery',
    },
    {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
      options: {
-        name: "pages",
-        path: "./src/pages/",
+        name: 'pages',
+        path: './src/pages/',
      },
-      __key: "pages",
+      __key: 'pages',
+    },
+    {
+      resolve: 'gatsby-plugin-eslint',
+      options: {
+        stages: ['develop'],
+        extensions: ['js', 'jsx'],
+        exclude: ['node_modules', '.cache', 'public'],
+        // Any eslint-webpack-plugin options below
+      }
    }
  ],
 };
--- a/gatsby/package-lock.json
+++ b/gatsby/package-lock.json
@ -35,8 +35,13 @@
        "tailwindcss": "^2.1.2"
      },
      "devDependencies": {
+        "babel-eslint": "^10.1.0",
        "eslint": "^7.28.0",
-        "eslint-config-react-app": "^6.0.0"
+        "eslint-config-react-app": "^6.0.0",
+        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-webpack-plugin": "^2.5.4",
+        "gatsby-plugin-eslint": "^3.0.0"
      }
    },
    "node_modules/@ardatan/aggregate-error": {
@ -4190,6 +4195,34 @@
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
    },
+    "node_modules/babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "eslint": ">= 4.12.1"
+      }
+    },
+    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/babel-jsx-utils": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz",
@ -11092,6 +11125,17 @@
        "node": ">=12.13.0"
      }
    },
+    "node_modules/gatsby-plugin-eslint": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-eslint/-/gatsby-plugin-eslint-3.0.0.tgz",
+      "integrity": "sha512-nvyLz067k8lmhWIalhgFCzlNIjHIabYPZXpARM0k4AGRJWOPgOxc5P0T+G/TjCvtSg4+jtKotbE5ranMbxIBiw==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": "^7.18.0",
+        "eslint-webpack-plugin": "^2.4.3",
+        "gatsby": ">=2"
+      }
+    },
    "node_modules/gatsby-plugin-image": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.6.0.tgz",
@ -28315,6 +28359,26 @@
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
    },
+    "babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+        }
+      }
+    },
    "babel-jsx-utils": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz",
@ -33684,6 +33748,13 @@
        "micromatch": "^4.0.2"
      }
    },
+    "gatsby-plugin-eslint": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-eslint/-/gatsby-plugin-eslint-3.0.0.tgz",
+      "integrity": "sha512-nvyLz067k8lmhWIalhgFCzlNIjHIabYPZXpARM0k4AGRJWOPgOxc5P0T+G/TjCvtSg4+jtKotbE5ranMbxIBiw==",
+      "dev": true,
+      "requires": {}
+    },
    "gatsby-plugin-image": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.6.0.tgz",
--- a/gatsby/package.json
+++ b/gatsby/package.json
@ -42,7 +42,12 @@
    "tailwindcss": "^2.1.2"
  },
  "devDependencies": {
+    "babel-eslint": "^10.1.0",
    "eslint": "^7.28.0",
-    "eslint-config-react-app": "^6.0.0"
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-webpack-plugin": "^2.5.4",
+    "gatsby-plugin-eslint": "^3.0.0"
  }
 }
--- a/gatsby/src/pages/gallery.js
+++ b/gatsby/src/pages/gallery.js
@ -1,10 +1,10 @@
-import * as React from "react"
+import * as React from 'react'
 import { graphql, Link } from 'gatsby'
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { Helmet } from "react-helmet"
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { Helmet } from 'react-helmet'
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'

-import { getMeta } from "../utils"
+import { getMeta } from '../utils'

 const GalleryPage = ({ data }) => {
  const images = React.useMemo(() =>
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@ -1,11 +1,11 @@
-import React from "react"
+import React from 'react'
 import { graphql } from 'gatsby'
-import { getMeta, getName } from "../utils";
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { Helmet } from "react-helmet";
+import { getMeta, getName } from '../utils';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { Helmet } from 'react-helmet';
 import classnames from 'classnames'

-const GalleryImage = ({ pageContext, data }) => {
+const GalleryImage = ({ data }) => {
  const image = data.allFile.edges[0].node
  const ar = image.childImageSharp.fluid.aspectRatio;
  console.log(ar);
@ -26,7 +26,7 @@ const GalleryImage = ({ pageContext, data }) => {
    </Helmet>
    <div className="min-h-screen flex flex-col justify-center">
      {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
-      <div style={{ margin: '0 5vw' }} className={classnames("flex mx-auto", ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
+      <div style={{ margin: '0 5vw' }} className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
        <div className='flex-grow-0'>
          <h1 className="text-2xl mt-2">{name}</h1>
          <GatsbyImage