use my own @dowdiness/eslint-config eslint config

Author: dowdiness

.eslintrc

@@ -1,3 +1,18 @@
 {
-  "extends": "@dowdiness"
+  "extends": "@dowdiness",
+  "rules": {
+    "@typescript-eslint/member-delimiter-style": [
+      "error",
+      {
+        "multiline": {
+          "delimiter": "none",
+          "requireLast": false
+        },
+        "singleline": {
+          "delimiter": "comma",
+          "requireLast": false
+        }
+      }
+    ]
+  }
 }

.prettierrc

@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "semi": false
+  "semi": false,
+  "singleQuote": true
 }

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

package.json

@@ -47,10 +47,12 @@
     "react-helmet-async": "^1.0.7"
   },
   "devDependencies": {
-    "@dowdiness/eslint-config": "^0.0.9",
+    "@dowdiness/eslint-config": "^0.1.3",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet-async": "^1.0.3",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "gatsby-plugin-root-import": "^2.0.5",
     "prettier": "2.1.2",
     "tailwindcss": "^1.9.5",

src/__generated__/gatsby-types.ts

@@ -1,8 +1,8 @@
-import React from "react"
-import { graphql, StaticQuery } from "gatsby"
+import React from 'react'
+import { graphql, StaticQuery } from 'gatsby'
 
-import Image from "gatsby-image"
-import BackgroundImage from "gatsby-background-image"
+import Image from 'gatsby-image'
+import BackgroundImage from 'gatsby-background-image'
 
 type ImageProps = {
   filename: string

src/components/Image/index.tsx

@@ -1,7 +1,8 @@
-import AniLink from "gatsby-plugin-transition-link/AniLink"
-import Image from "src/components/Image"
+import React from 'react'
+import AniLink from 'gatsby-plugin-transition-link/AniLink'
+import Image from 'src/components/Image'
 
-export type FooterProps = {}
+export type FooterProps = unknown
 
 export const Footer: React.FCX<FooterProps> = ({ className }) => {
   return (

src/components/Layout/Footer.tsx

@@ -1,11 +1,12 @@
-import AniLink from "gatsby-plugin-transition-link/AniLink"
-import Image from "src/components/Image"
+import React from 'react'
+import AniLink from 'gatsby-plugin-transition-link/AniLink'
+import Image from 'src/components/Image'
 
 // hooks
-import useWindowScroll from "src/hooks/useWindowScroll"
+import useWindowScroll from 'src/hooks/useWindowScroll'
 
-export type HeaderProps = {}
-export const Header: React.FCX<HeaderProps> = ({className}) => {
+export type HeaderProps = unknown
+export const Header: React.FCX<HeaderProps> = ({ className }) => {
   const { y } = useWindowScroll()
 
   return (
@@ -28,21 +29,19 @@ export const Header: React.FCX<HeaderProps> = ({className}) => {
               weakness.
             </h3>
           </div>
-          <h1
-            className="flex justify-center text-6xl italic font-black text-white neumorphism"
-          >
+          <h1 className="flex justify-center text-6xl italic font-black text-white neumorphism">
             弱いzine
-        </h1>
+          </h1>
         </AniLink>
       </section>
       <header
-        className={`fixed top-0 flex items-center justify-center w-full h-16 transition duration-300 ease-in-out transform bg-white shadow-sm z-20 ${y > 580 ? "translate-y-0 opacity-100" : "-translate-y-16 opacity-0"}`}
+        className={`fixed top-0 flex items-center justify-center w-full h-16 transition duration-300 ease-in-out transform bg-white shadow-sm z-20 ${
+          y > 580 ? 'translate-y-0 opacity-100' : '-translate-y-16 opacity-0'
+        }`}
       >
         <div className={className}>
           <AniLink fade to="/">
-            <h1
-              className="flex justify-center text-4xl italic font-black text-white neumorphism"
-            >
+            <h1 className="flex justify-center text-4xl italic font-black text-white neumorphism">
               弱いzine
             </h1>
           </AniLink>

src/components/Layout/Header.tsx

@@ -1,5 +1,6 @@
-import Header from "./Header"
-import Footer from "./Footer"
+import React from 'react'
+import Header from './Header'
+import Footer from './Footer'
 
 type LayoutProps = {
   location?: Location
@@ -12,11 +13,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="">
       <Header className="" />
-      <main
-        className="container w-auto"
-      >
-        {children}
-      </main>
+      <main className="container w-auto">{children}</main>
       <Footer className="" />
     </div>
   )

src/components/Layout/index.tsx

@@ -4,9 +4,10 @@
  *
  * See: https://www.gatsbyjs.com/docs/use-static-query/
  */
+import React from 'react'
 
-import { useStaticQuery, graphql } from "gatsby"
-import Image from "gatsby-image"
+import { useStaticQuery, graphql } from 'gatsby'
+import Image from 'gatsby-image'
 
 const Bio = () => {
   const data = useStaticQuery<GatsbyTypes.BioQueryQuery>(graphql`

src/components/bio.tsx

@@ -1,6 +1,6 @@
 import { EffectCallback, useEffect } from 'react'
 
-const useEffectOnce = (effect: EffectCallback) => {
+const useEffectOnce = (effect: EffectCallback): void => {
   useEffect(effect, [])
 }
 

src/hooks/useEffectOnce.ts

@@ -1,24 +1,21 @@
-import { useRef, useState, useCallback, Dispatch, SetStateAction } from 'react';
-
-import useUnmount from './useUnmount';
-
-const useRafState = <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] => {
-  const frame = useRef(0);
-  const [state, setState] = useState(initialState);
+import { useRef, useState, useCallback, Dispatch, SetStateAction } from 'react'
+import useUnmount from './useUnmount'
 
+const useRafState = <S>(
+  initialState: S | (() => S)
+): [S, Dispatch<SetStateAction<S>>] => {
+  const frame = useRef(0)
+  const [state, setState] = useState(initialState)
   const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
-    cancelAnimationFrame(frame.current);
-
+    cancelAnimationFrame(frame.current)
     frame.current = requestAnimationFrame(() => {
-      setState(value);
-    });
-  }, []);
-
+      setState(value)
+    })
+  }, [])
   useUnmount(() => {
-    cancelAnimationFrame(frame.current);
-  });
-
-  return [state, setRafState];
-};
+    cancelAnimationFrame(frame.current)
+  })
+  return [state, setRafState]
+}
 
-export default useRafState;
+export default useRafState

src/hooks/useRafState.ts

@@ -7,6 +7,7 @@ export interface Tategaki {
 }
 
 const useTategaki = (): Tategaki => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const tategakiRef = useRef<HTMLElement>(null!)
 
   const adjustSize = () => {
@@ -23,16 +24,22 @@ const useTategaki = (): Tategaki => {
           tategakiRef.current.style.height = ''
           tategakiRef.current.style.paddingBottom = ''
           const fullHeight = tategakiRef.current.scrollHeight
-          const defaultHeight = Number(getComputedStyle(tategakiRef.current).height.replace('px', ''))
-          tategakiRef.current.style.paddingBottom = `${fullHeight - defaultHeight}px`
+          const defaultHeight = Number(
+            getComputedStyle(tategakiRef.current).height.replace('px', '')
+          )
+          tategakiRef.current.style.paddingBottom = `${
+            fullHeight - defaultHeight
+          }px`
         })
       })
       return
     }
 
     tategakiRef.current.style.paddingBottom = ''
     const fullHeight = tategakiRef.current.scrollHeight
-    const defaultHeight = Number(getComputedStyle(tategakiRef.current).height.replace('px', ''))
+    const defaultHeight = Number(
+      getComputedStyle(tategakiRef.current).height.replace('px', '')
+    )
     console.log(fullHeight, defaultHeight)
     tategakiRef.current.style.paddingBottom = `${fullHeight - defaultHeight}px`
   }

src/hooks/useTategaki.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useRef } from 'react'
 import useEffectOnce from './useEffectOnce'
 
@@ -8,6 +9,5 @@ const useUnmount = (fn: () => any): void => {
   fnRef.current = fn
 
   useEffectOnce(() => () => fnRef.current())
-};
-
+}
 export default useUnmount

src/hooks/useUnmount.ts

@@ -1,38 +1,31 @@
-import { useEffect } from 'react';
-import { isClient } from './util';
-
-import useRafState from './useRafState';
-
+import { useEffect } from 'react'
+import { isClient } from './util'
+import useRafState from './useRafState'
 export interface State {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
 
 const useWindowScroll = (): State => {
   const [state, setState] = useRafState<State>({
     x: isClient ? window.pageXOffset : 0,
     y: isClient ? window.pageYOffset : 0,
-  });
-
+  })
   useEffect(() => {
     const handler = () => {
       setState({
         x: window.pageXOffset,
         y: window.pageYOffset,
-      });
-    };
-
+      })
+    }
     window.addEventListener('scroll', handler, {
       capture: false,
       passive: true,
-    });
-
+    })
     return () => {
-      window.removeEventListener('scroll', handler);
-    };
-  }, []);
-
-  return state;
-};
-
-export default useWindowScroll;
+      window.removeEventListener('scroll', handler)
+    }
+  }, [])
+  return state
+}
+export default useWindowScroll

src/hooks/useWindowScroll.tsx

@@ -1,15 +1,20 @@
-import isDeepEqualReact from 'fast-deep-equal/react';
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import isDeepEqualReact from 'fast-deep-equal/react'
 
-export const isClient = typeof window === 'object';
+export const isClient = typeof window === 'object'
 
 export const isFirefox = isClient && navigator.userAgent.includes('Firefox')
 
-export const on = (obj: any, ...args: any[]) => obj.addEventListener(...args);
+export const on = (obj: any, ...args: any[]) => obj.addEventListener(...args)
 
-export const off = (obj: any, ...args: any[]) => obj.removeEventListener(...args);
+export const off = (obj: any, ...args: any[]) =>
+  obj.removeEventListener(...args)
 
-export type FnReturningPromise = (...args: any[]) => Promise<any>;
+export type FnReturningPromise = (...args: any[]) => Promise<any>
 
-export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+export type PromiseType<P extends Promise<any>> = P extends Promise<infer T>
+  ? T
+  : never
 
-export const isDeepEqual: (a: any, b: any) => boolean = isDeepEqualReact;
+export const isDeepEqual: (a: any, b: any) => boolean = isDeepEqualReact

src/hooks/util.ts

@@ -1,6 +1,7 @@
-import { PageProps } from "gatsby"
+import React from 'react'
+import { PageProps } from 'gatsby'
 
-import { GatsbySeo } from "gatsby-plugin-next-seo"
+import { GatsbySeo } from 'gatsby-plugin-next-seo'
 
 const NotFoundPage: React.FC<PageProps> = ({}) => {
   return (

src/pages/404.tsx

@@ -1,10 +1,10 @@
-import { graphql } from "gatsby"
-import { PageProps } from "gatsby"
+import React from 'react'
+import { graphql, PageProps } from 'gatsby'
 
-import AniLink from "gatsby-plugin-transition-link/AniLink"
+import AniLink from 'gatsby-plugin-transition-link/AniLink'
 
-import Bio from "src/components/bio"
-import { GatsbySeo } from "gatsby-plugin-next-seo"
+import Bio from 'src/components/bio'
+import { GatsbySeo } from 'gatsby-plugin-next-seo'
 
 const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
   data,
@@ -28,7 +28,7 @@ const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
   return (
     <>
       <GatsbySeo title="弱いZINE" titleTemplate="%s" />
-      <ol style={{ listStyle: `none` }}>
+      <ol style={{ listStyle: 'none' }}>
         {posts.map(post => {
           const title = post.frontmatter?.title || post.fields?.slug
 
@@ -42,7 +42,10 @@ const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
                 <header>
                   <h2>
                     <AniLink
-                      to={`/vol${post.frontmatter?.vol}${post.fields?.slug}` || `/`}
+                      to={
+                        `/vol${post.frontmatter?.vol}${post.fields?.slug}` ||
+                        '/'
+                      }
                       fade
                     >
                       <span itemProp="headline">{title}</span>
@@ -54,9 +57,9 @@ const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
                   <p
                     dangerouslySetInnerHTML={{
                       __html:
-                        post.frontmatter?.description ||
-                        post.excerpt ||
-                        `見つかりません`,
+                        post.frontmatter?.description ??
+                        post.excerpt ??
+                        '見つかりません',
                     }}
                     itemProp="description"
                   />