👍 linterを導入

keyaki-fes · Jun 4, 2023 · f00e8b1 · f00e8b1
1 parent 51994e2
commit f00e8b1
Show file tree

Hide file tree

Showing 10 changed files with 488 additions and 35 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,42 @@
+module.exports = {
+  extends: [
+    'next/core-web-vitals',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'import', 'unused-imports'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    'unused-imports/no-unused-imports': 'error',
+    'import/order': [
+      'error',
+      {
+        pathGroups: [
+          {
+            pattern: 'react**',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '{next**,next/**}',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@chakra-ui/**',
+            group: 'external',
+            position: 'before',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['react', 'next', '@chakra-ui'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+          orderImportKind: 'asc',
+        },
+      },
+    ],
+  },
+}
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.husky/common.sh b/.husky/common.sh
@@ -0,0 +1,8 @@
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Workaround for Windows 10, Git Bash and Yarn
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn lint-staged
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -0,0 +1,16 @@
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
+const buildPrettierCommand = (filenames) =>
+  `prettier --write ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' ')}`
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+  '*.{js,jsx,ts,tsx,yml,json,css,md}': [buildPrettierCommand],
+}
diff --git a/package.json b/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint && prettier --check .",
+    "lint:fix": "next lint --fix && prettier --write .",
+    "postinstall": "husky install"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.7.0",
@@ -15,6 +17,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
     "axios": "^1.4.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.4",
@@ -23,5 +26,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3"
+  },
+  "devDependencies": {
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8"
   }
 }
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  bracketSpacing: true,
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang='en'>
       <Head />
       <body>
         <Main />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,6 +1,7 @@
+import { Inter } from 'next/font/google'
 import Head from 'next/head'
 import Image from 'next/image'
-import { Inter } from 'next/font/google'
+
 import styles from '@/styles/Home.module.css'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -10,9 +11,9 @@ export default function Home() {
     <>
       <Head>
         <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+        <meta name='description' content='Generated by create next app' />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+        <link rel='icon' href='/favicon.ico' />
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
         <div className={styles.description}>
@@ -22,14 +23,14 @@ export default function Home() {
           </p>
           <div>
             <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
+              href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
+              target='_blank'
+              rel='noopener noreferrer'
             >
               By{' '}
               <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
+                src='/vercel.svg'
+                alt='Vercel Logo'
                 className={styles.vercelLogo}
                 width={100}
                 height={24}
@@ -42,8 +43,8 @@ export default function Home() {
         <div className={styles.center}>
           <Image
             className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
+            src='/next.svg'
+            alt='Next.js Logo'
             width={180}
             height={37}
             priority
@@ -52,10 +53,10 @@ export default function Home() {
 
         <div className={styles.grid}>
           <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
             className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             <h2>
               Docs <span>-&gt;</span>
@@ -66,10 +67,10 @@ export default function Home() {
           </a>
 
           <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
             className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             <h2>
               Learn <span>-&gt;</span>
@@ -80,10 +81,10 @@ export default function Home() {
           </a>
 
           <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
             className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             <h2>
               Templates <span>-&gt;</span>
@@ -94,10 +95,10 @@ export default function Home() {
           </a>
 
           <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
             className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             <h2>
               Deploy <span>-&gt;</span>