Adding Linting and Formatting (#77)

Addresses #11 item "Linting/formatting (eg eslnt, prettier)":
* Adding eslint, prettier, and config targeting Google, typescript, and both nodejs and client builds
* Addressing linter-found issues
* Adding lint and lint:fix commands
* Adding documentation
* Renaming workflow and adding lint check
* Adding documentation about VSCode linting/formatting, ran formatting on a few files, set up exclude list for gatsby develop, setup build to fail on error

client/src/components/J40Footer.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { Footer } from '@trussworks/react-uswds';
+import {Footer} from '@trussworks/react-uswds';
 import {Link} from 'gatsby-plugin-intl';
 
 const footerLinks = [
-    <Link to="/">Home</Link>
+  <Link to="/" key="/">Home</Link>,
 ];
 
 const J40Footer = () => {
-    return (
-        <>
-        <Footer primary={[]} secondary={footerLinks} />
-        </>
-    );
+  return (
+    <>
+      <Footer primary={[]} secondary={footerLinks} />
+    </>
+  );
 };
 
-export default J40Footer;
+export default J40Footer;

client/src/components/J40Header.tsx

@@ -1,25 +1,27 @@
 import React from 'react';
-import { GovBanner, Header, Title, PrimaryNav } from '@trussworks/react-uswds';
-import { useIntl, Link } from "gatsby-plugin-intl"
+import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
+import {useIntl, Link} from 'gatsby-plugin-intl';
 
 const headerLinks = [
-    <Link to="/">Home</Link>
+  <Link to="/" key="/">Home</Link>,
 ];
 
 const J40Header = () => {
-    const intl = useIntl()
-    const title = intl.formatMessage({ id: "71L0pp", defaultMessage:"Justice40", description:"Title of the project" });
-    return (
-        <>
-        <GovBanner />
-        <Header>
-            <Title>
-                {title}
-            </Title>
-            <PrimaryNav items={headerLinks}/>
-        </Header>
-        </>
-    );
+  const intl = useIntl();
+  const title = intl.formatMessage({id: '71L0pp',
+    defaultMessage: 'Justice40',
+    description: 'Title of the project'});
+  return (
+    <>
+      <GovBanner />
+      <Header>
+        <Title>
+          {title}
+        </Title>
+        <PrimaryNav items={headerLinks}/>
+      </Header>
+    </>
+  );
 };
 
-export default J40Header;
+export default J40Header;

client/src/components/layout.tsx

@@ -1,19 +1,19 @@
-import React, { ReactNode } from "react";
+import React, {ReactNode} from 'react';
 import * as styles from './layout.module.scss';
 import J40Header from './J40Header';
-import J40Footer from "./J40Footer";
+import J40Footer from './J40Footer';
 interface ILayoutProps {
   children: ReactNode
 }
 
-const Layout = ({ children }: ILayoutProps) => {
+const Layout = ({children}: ILayoutProps) => {
   return (
-      <div className={styles.site}>
-        <J40Header />
-        <div className={styles.siteContent}>{children}</div>
-        <J40Footer />
-      </div>
+    <div className={styles.site}>
+      <J40Header />
+      <div className={styles.siteContent}>{children}</div>
+      <J40Footer />
+    </div>
   );
 };
 
-export default Layout;
+export default Layout;

client/src/pages/404.tsx

@@ -1,28 +1,28 @@
-import * as React from "react";
-import { Link } from "gatsby-plugin-intl";
+import * as React from 'react';
+import {Link} from 'gatsby-plugin-intl';
 
 // 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,
   marginBottom: 64,
   maxWidth: 320,
-}
+};
 
 const paragraphStyles = {
   marginBottom: 48,
-}
+};
 const codeStyles = {
-  color: "#8A6534",
+  color: '#8A6534',
   padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
+  backgroundColor: '#FFF4DB',
+  fontSize: '1.25rem',
   borderRadius: 4,
-}
+};
 
 // markup
 const NotFoundPage = () => {
@@ -31,13 +31,13 @@ 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>.
@@ -48,7 +48,7 @@ const NotFoundPage = () => {
         <Link to="/">Go home</Link>.
       </p>
     </main>
-  )
-}
+  );
+};
 
-export default NotFoundPage
+export default NotFoundPage;

client/src/pages/index.tsx

@@ -1,15 +1,14 @@
-import * as React from "react"
+import * as React from 'react';
 import Layout from '../components/layout';
 // markup
 const IndexPage = () => {
-  
   return (
     <Layout>
       <main>
         <h2>Subheader</h2>
       </main>
     </Layout>
-  )
-}
+  );
+};
 
 export default IndexPage;