run prettier

.prettierrc

@@ -1,7 +1,11 @@
 {
-  "endOfLine": "lf",
-  "semi": false,
-  "singleQuote": false,
+  "printWidth": 120,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "parser": "typescript"
 }

package.json

@@ -43,11 +43,11 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write src/**/*.{js,jsx}",
+    "format": "prettier --write src/**/*.{ts,tsx,js,jsx}",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
-    "lint": "eslint -c ./.eslintrc.js 'src/**/*.{ts,tsx}'"
+    "lint": "eslint -c ./.eslintrc.js 'src/**/*.{js,ts,tsx}'"
   },
   "repository": {
     "type": "git",

src/components/global-styles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "styled-components"
+import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyles = createGlobalStyle`
   html {
@@ -623,6 +623,6 @@ const GlobalStyles = createGlobalStyle`
       font-size: 100%;
     }
   }
-`
+`;
 
-export default GlobalStyles
+export default GlobalStyles;

src/components/header.tsx

@@ -1,13 +1,13 @@
-import { Link } from "gatsby"
-import React from "react"
-import styled from "styled-components"
+import { Link } from 'gatsby';
+import React from 'react';
+import styled from 'styled-components';
 
 const StyledHeader = styled.header`
   background: #000;
   margin-bottom: 1.45rem;
-`
+`;
 interface HeaderProps {
-  siteTitle: string
+  siteTitle: string;
 }
 
 const Header = ({ siteTitle }: HeaderProps) => (
@@ -32,10 +32,10 @@ const Header = ({ siteTitle }: HeaderProps) => (
       </h1>
     </div>
   </StyledHeader>
-)
+);
 
 Header.defaultProps = {
   siteTitle: ``,
-}
+};
 
-export default Header
+export default Header;

src/components/image.tsx

@@ -1,6 +1,6 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
 
 /*
  * This component is built using `gatsby-image` to automatically serve optimized
@@ -24,9 +24,9 @@ const Image = () => {
         }
       }
     }
-  `)
+  `);
 
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+};
 
-export default Image
+export default Image;

src/components/layout.tsx

@@ -5,14 +5,14 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import GlobalStyles from "./global-styles"
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import GlobalStyles from './global-styles';
 
-import Header from "./header"
+import Header from './header';
 
 interface LayoutProps {
-  children: any
+  children: any;
 }
 
 const Layout = ({ children }: LayoutProps) => {
@@ -24,7 +24,7 @@ const Layout = ({ children }: LayoutProps) => {
         }
       }
     }
-  `)
+  `);
 
   return (
     <>
@@ -46,7 +46,7 @@ const Layout = ({ children }: LayoutProps) => {
         </footer>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;

src/components/seo.tsx

@@ -5,15 +5,15 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from 'react';
+import Helmet from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
 
 interface SEOProps {
-  description: string
-  title: string
-  lang: string
-  meta: any[]
+  description: string;
+  title: string;
+  lang: string;
+  meta: any[];
 }
 
 function SEO({ description, lang, meta, title }: SEOProps) {
@@ -28,10 +28,10 @@ function SEO({ description, lang, meta, title }: SEOProps) {
           }
         }
       }
-    `
-  )
+    `,
+  );
 
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription = description || site.siteMetadata.description;
 
   return (
     <Helmet
@@ -75,13 +75,13 @@ function SEO({ description, lang, meta, title }: SEOProps) {
         },
       ].concat(meta)}
     />
-  )
+  );
 }
 
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
-}
+};
 
-export default SEO
+export default SEO;

src/pages/404.tsx

@@ -1,14 +1,14 @@
-import React from "react"
+import React from 'react';
 
-import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Layout from '../components/layout';
+import SEO from '../components/seo';
 
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;

src/pages/index.tsx

@@ -1,9 +1,9 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react';
+import { Link } from 'gatsby';
 
-import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
+import Layout from '../components/layout';
+import Image from '../components/image';
+import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
@@ -16,6 +16,6 @@ const IndexPage = () => (
     </div>
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
-)
+);
 
-export default IndexPage
+export default IndexPage;

src/pages/page-2.tsx

@@ -1,8 +1,8 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react';
+import { Link } from 'gatsby';
 
-import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Layout from '../components/layout';
+import SEO from '../components/seo';
 
 const SecondPage = () => (
   <Layout>
@@ -11,6 +11,6 @@ const SecondPage = () => (
     <p>Welcome to page 2</p>
     <Link to="/">Go back to the homepage</Link>
   </Layout>
-)
+);
 
-export default SecondPage
+export default SecondPage;