eslintとprettier入れる

.eslintignore

@@ -0,0 +1,6 @@
+build/
+public/
+**/node_modules/
+*.config.js
+.*lintrc.js
+/*.*

.eslintrc.js

@@ -0,0 +1,75 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  plugins: ['react', '@typescript-eslint'],
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    'import/prefer-default-export': 'off',
+    'import/extensions': [
+      'error',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+        optionalDependencies: false,
+      },
+    ],
+    'react/jsx-filename-extension': [
+      'error',
+      {
+        extensions: ['.jsx', '.tsx'],
+      },
+    ],
+    'react/react-in-jsx-scope': 'off',
+    'no-void': [
+      'error',
+      {
+        allowAsStatement: true,
+      },
+    ],
+    'react/function-component-definition': [
+      2,
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+}

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  semi: false,
+};

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "javascript.format.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

package.json

@@ -7,10 +7,18 @@
     "build": "run-s build:posts build:next",
     "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/posts.ts",
     "build:next": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint --ext .ts,.tsx ./src",
+    "fix": "yarn format && yarn lint:fix",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
     "dayjs": "^1.9.3",
+    "eslint": "^8.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "next": "11.1.2",
     "next-themes": "^0.0.15",
     "react": "17.0.2",
@@ -20,15 +28,15 @@
     "@types/fs-extra": "^9.0.2",
     "@types/node": "^16.11.1",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.21.4",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "fs-extra": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.2",
+    "prettier": "^2.6.2",
     "rss-parser": "^3.9.0",
     "sass": "^1.27.0",
     "ts-node": "^10.3.0",

src/builder/posts.ts

@@ -1,82 +1,75 @@
-import fs from "fs-extra";
-import Parser from "rss-parser";
-import { members } from "../../members";
-import { PostItem, Member } from "../types";
-export default {};
+import fs from 'fs-extra'
+import Parser from 'rss-parser'
+import { members } from '../../members'
+import { PostItem, Member } from '../types'
+
+export default {}
 
 type FeedItem = {
-  title: string;
-  link: string;
-  contentSnippet?: string;
-  isoDate?: string;
-  dateMiliSeconds: number;
-};
+  title: string
+  link: string
+  contentSnippet?: string
+  isoDate?: string
+  dateMiliSeconds: number
+}
 
-const parser = new Parser();
-let allPostItems: PostItem[] = [];
+const parser = new Parser()
+let allPostItems: PostItem[] = []
 
 async function fetchFeedItems(url: string) {
-  const feed = await parser.parseURL(url);
-  if (!feed?.items?.length) return [];
+  const feed = await parser.parseURL(url)
+  if (!feed?.items?.length) return []
 
   // return item which has title and link
   return feed.items
-    .map(({ title, contentSnippet, link, isoDate }) => {
-      return {
-        title,
-        contentSnippet: contentSnippet?.replace(/\n/g, ""),
-        link,
-        isoDate,
-        dateMiliSeconds: isoDate ? new Date(isoDate).getTime() : 0,
-      };
-    })
-    .filter(({ title, link }) => title && link) as FeedItem[];
+    .map(({ title, contentSnippet, link, isoDate }) => ({
+      title,
+      contentSnippet: contentSnippet?.replace(/\n/g, ''),
+      link,
+      isoDate,
+      dateMiliSeconds: isoDate ? new Date(isoDate).getTime() : 0,
+    }))
+    .filter(({ title, link }) => title && link) as FeedItem[]
 }
 
 async function getFeedItemsFromSources(sources: undefined | string[]) {
-  if (!sources?.length) return [];
-  let feedItems: FeedItem[] = [];
+  if (!sources?.length) return []
+  let feedItems: FeedItem[] = []
   for (const url of sources) {
-    const items = await fetchFeedItems(url);
-    if (items) feedItems = [...feedItems, ...items];
+    const items = await fetchFeedItems(url)
+    if (items) feedItems = [...feedItems, ...items]
   }
-  return feedItems;
+  return feedItems
 }
 
 async function getMemberFeedItems(member: Member): Promise<PostItem[]> {
-  const { id, sources, name, includeUrlRegex, excludeUrlRegex } = member;
-  const feedItems = await getFeedItemsFromSources(sources);
-  if (!feedItems) return [];
+  const { id, sources, name, includeUrlRegex, excludeUrlRegex } = member
+  const feedItems = await getFeedItemsFromSources(sources)
+  if (!feedItems) return []
 
-  let postItems = feedItems.map((item) => {
-    return {
-      ...item,
-      authorName: name,
-      authorId: id,
-    };
-  });
+  let postItems = feedItems.map((item) => ({
+    ...item,
+    authorName: name,
+    authorId: id,
+  }))
   // remove items which not matches includeUrlRegex
   if (includeUrlRegex) {
-    postItems = postItems.filter((item) => {
-      return item.link.match(new RegExp(includeUrlRegex));
-    });
+    postItems = postItems.filter((item) => item.link.match(new RegExp(includeUrlRegex)))
   }
   // remove items which matches excludeUrlRegex
   if (excludeUrlRegex) {
-    postItems = postItems.filter((item) => {
-      return !item.link.match(new RegExp(excludeUrlRegex));
-    });
+    postItems = postItems.filter((item) => !item.link.match(new RegExp(excludeUrlRegex)))
   }
 
-  return postItems;
+  return postItems
 }
 
-(async function () {
+;(async function () {
   for (const member of members) {
-    const items = await getMemberFeedItems(member);
-    if (items) allPostItems = [...allPostItems, ...items];
+    const items = await getMemberFeedItems(member)
+    if (items) allPostItems = [...allPostItems, ...items]
   }
-  allPostItems.sort((a, b) => b.dateMiliSeconds - a.dateMiliSeconds);
-  fs.ensureDirSync(".contents");
-  fs.writeJsonSync(".contents/posts.json", allPostItems);
-})();
+  allPostItems.sort((a, b) => b.dateMiliSeconds - a.dateMiliSeconds)
+  fs.ensureDirSync('.contents')
+  fs.writeJsonSync('.contents/posts.json', allPostItems)
+})()

src/components/ContentWrapper.tsx

@@ -1,11 +1,9 @@
-export const ContentWrapper: React.FC<{ children: React.ReactNode }> = (
-  props
-) => {
-  return <div className="content-wrapper">{props.children}</div>;
-};
+export const ContentWrapper: React.FC<{ children: React.ReactNode }> = (props) => {
+  return <div className="content-wrapper">{props.children}</div>
+}
 
 export const UndoWrapForScroll: React.FC<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }> = (props) => {
-  return <div className="undo-wrap-for-scroll">{props.children}</div>;
-};
+  return <div className="undo-wrap-for-scroll">{props.children}</div>
+}

src/components/LinkBackHome.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
+import Link from 'next/link'
 
 export const LinkBackHome: React.FC = () => (
   <Link href="/" passHref>
     <a className="link-back-home">Back Home</a>
   </Link>
-);
+)

src/components/PageSEO.tsx

@@ -1,43 +1,29 @@
-import Head from "next/head";
+import Head from 'next/head'
 
-import { config } from "@site.config";
+import { config } from '@site.config'
 
 // types
 type Props = {
-  title: string;
-  path?: string;
-  description?: string;
-  ogImageUrl?: string;
-  noindex?: boolean;
-  removeSiteNameFromTitle?: boolean;
-};
+  title: string
+  path?: string
+  description?: string
+  ogImageUrl?: string
+  noindex?: boolean
+  removeSiteNameFromTitle?: boolean
+}
 
 export const PageSEO: React.FC<Props> = (props) => {
-  const {
-    path,
-    title,
-    description,
-    ogImageUrl,
-    noindex,
-    removeSiteNameFromTitle,
-  } = props;
+  const { path, title, description, ogImageUrl, noindex, removeSiteNameFromTitle } = props
 
-  const pageUrl = `${config.siteRoot}${path || ""}`;
+  const pageUrl = `${config.siteRoot}${path || ''}`
   return (
     <Head>
-      <title>
-        {removeSiteNameFromTitle
-          ? title
-          : `${title} | ${config.siteMeta.title}`}
-      </title>
+      <title>{removeSiteNameFromTitle ? title : `${title} | ${config.siteMeta.title}`}</title>
       <meta property="og:title" content={title} />
       <meta property="og:url" content={pageUrl} />
       <meta name="twitter:card" content="summary_large_image" />
       <meta property="og:site" content={config.siteMeta.title} />
-      <meta
-        property="og:image"
-        content={ogImageUrl || `${config.siteRoot}/og.png`}
-      />
+      <meta property="og:image" content={ogImageUrl || `${config.siteRoot}/og.png`} />
       {!!description && (
         <>
           <meta name="description" content={description} />
@@ -47,5 +33,5 @@ export const PageSEO: React.FC<Props> = (props) => {
       {path && <link rel="canonical" href={pageUrl} />}
       {noindex && <meta name="robots" content="noindex" />}
     </Head>
-  );
-};
+  )
+}