fix lint

Author: ryota-murakami

.eslintrc.json

@@ -1,101 +1,7 @@
 {
-  "root": true,
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "jsx-a11y",
-    "import",
-    "sort-keys-fix",
-    "react-hooks",
-    "@typescript-eslint",
-    "prettier",
-    "cypress"
-  ],
+  "extends": "typescript-react-pro",
+  "plugins": ["cypress"],
   "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true,
     "cypress/globals": true
-  },
-  "globals": {
-    "JSX": "readonly"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    },
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      },
-      "typescript": {
-        "alwaysTryTypes": true,
-        // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
-        "project": ["tsconfig.json"]
-      }
-    }
-  },
-  "rules": {
-    "no-alert": "error",
-    "no-console": "error",
-    "react-hooks/rules-of-hooks": "error",
-    "prettier/prettier": [
-      "warn",
-      {},
-      {
-        "properties": {
-          "usePrettierrc": true
-        }
-      }
-    ],
-    "import/order": [
-      "warn",
-      {
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "object"
-        ],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ],
-    "import/named": "error",
-    "import/default": "error",
-    "import/export": "error",
-    "import/no-named-as-default": "warn",
-    "import/no-named-as-default-member": "off",
-    "import/no-duplicates": "error",
-    "import/no-unresolved": "error",
-    "sort-keys-fix/sort-keys-fix": "warn",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/consistent-type-imports": "warn",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-empty-function": "off"
-  },
-  "overrides": [
-    {
-      "files": ["*.js"],
-      "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": ["off"],
-        "@typescript-eslint/no-var-requires": ["off"]
-      }
-    }
-  ]
+  }
 }

README.md

@@ -25,10 +25,6 @@ So this project aming new React learner and who have not written React for a lon
 
 I'm glad to even the repo could be useful for your learning. 🤗3
 
-
-
-
-
 [![Edit react-typescript-todomvc-2022](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/quizzical-blackwell-bvfc5?fontsize=14&hidenavigation=1&theme=dark)
 
 ---

package.json

@@ -34,27 +34,18 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
     "@vitejs/plugin-react": "^1.3.2",
     "all-contributors-cli": "^6.19.0",
     "cypress": "9.7.0",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-typescript": "^3.0.0",
+    "eslint-config-typescript-react-pro": "^1.2.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "serve": "^13.0.2",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.4",
     "vite": "^2.9.12"
   },
   "scripts": {

src/App/TodoMVC.tsx

@@ -9,10 +9,6 @@ import NewTodoInput from './NewTodoInput'
 import { Layout } from './style'
 import TodoList from './TodoList'
 import UnderBar from './UnderBar'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { RecoilRoot } from 'recoil'
-import { NotFound } from '../NotFound'
-
 
 const TodoMVC: React.FC = () => {
   const appState = useRecoilValue<AppState>(recoilState)
@@ -31,8 +27,8 @@ const TodoMVC: React.FC = () => {
         <NewTodoInput />
         {appState.todoList.length ? (
           <>
-            <TodoList  />
-            <UnderBar  />
+            <TodoList />
+            <UnderBar />
           </>
         ) : null}
       </section>
@@ -41,4 +37,4 @@ const TodoMVC: React.FC = () => {
   )
 }
 
-export default TodoMVC
+export default TodoMVC

src/App/index.tsx

@@ -1,19 +1,22 @@
-import ErrorBoundary from '../ErrorBoundary'
-import { RecoilRoot } from 'recoil'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import TodoMVC from './TodoMVC'
+import { RecoilRoot } from 'recoil'
+
+import ErrorBoundary from '../ErrorBoundary'
 import { NotFound } from '../NotFound'
 
-const App: React.FC = () => (<ErrorBoundary>
-    <BrowserRouter>
-    <RecoilRoot>
-      <Routes>
-        <Route path="/" element={<TodoMVC />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </RecoilRoot>
-          </BrowserRouter>
-  </ErrorBoundary>)
+import TodoMVC from './TodoMVC'
 
+const App: React.FC = () => (
+  <ErrorBoundary>
+    <BrowserRouter>
+      <RecoilRoot>
+        <Routes>
+          <Route path="/" element={<TodoMVC />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </RecoilRoot>
+    </BrowserRouter>
+  </ErrorBoundary>
+)
 
 export default App

src/main.tsx

@@ -1,14 +1,9 @@
-
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { RecoilRoot } from 'recoil'
 
 import './index.css'
 import App from './App'
-import ErrorBoundary from './ErrorBoundary'
-import { NotFound } from './NotFound'
 
 const root = ReactDOM.createRoot(document.getElementById('root')!)
 
 root.render(<App />)
-

yarn.lock

@@ -1234,7 +1234,7 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^5.29.0":
+"@typescript-eslint/eslint-plugin@^5.28.0":
   version "5.29.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.29.0.tgz#c67794d2b0fd0b4a47f50266088acdc52a08aab6"
   integrity sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==
@@ -1249,7 +1249,7 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.29.0":
+"@typescript-eslint/parser@^5.28.0":
   version "5.29.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.29.0.tgz#41314b195b34d44ff38220caa55f3f93cfca43cf"
   integrity sha512-ruKWTv+x0OOxbzIw9nW5oWlUopvP/IQDjB5ZqmTglLIoDTctLlAJpAQFpNPJP/ZI7hTT9sARBosEfaKbcFuECw==
@@ -2593,10 +2593,22 @@ eslint-config-prettier@^8.5.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-config-typescript@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-typescript/-/eslint-config-typescript-3.0.0.tgz#13e0627f8c5aa8d58b5a01eeddd0a726a259c4b5"
-  integrity sha512-CwC2cQ29OLE1OUw0k+Twpc6wpCdenG8rrErl89sWrzmMpWfkulyeQS1HJhhjU0B3Tb4k41zdei4LtX26x5m60Q==
+eslint-config-typescript-react-pro@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-typescript-react-pro/-/eslint-config-typescript-react-pro-1.2.1.tgz#4727b7ddfcace358b111c7e7483f1d9f5c477735"
+  integrity sha512-mEp4dRyIGXBDiURmCK9z4kJ/33sZBpnLE5wxjyrEqh63UFR8gYkg2XAKwgrmclhTfamM+MpXbZkN3ptFxtcrnA==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^5.28.0"
+    "@typescript-eslint/parser" "^5.28.0"
+    eslint "^8.18.0"
+    eslint-config-prettier "^8.5.0"
+    eslint-import-resolver-typescript "^2.7.1"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-prettier "^4.0.0"
+    eslint-plugin-react-hooks "^4.6.0"
+    eslint-plugin-sort-keys-fix "^1.1.2"
+    prettier "^2.7.1"
 
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -2606,6 +2618,17 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
+eslint-import-resolver-typescript@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
+  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+  dependencies:
+    debug "^4.3.4"
+    glob "^7.2.0"
+    is-glob "^4.0.3"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
 eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
@@ -3177,7 +3200,7 @@ glob-parent@^6.0.1:
   dependencies:
     is-glob "^4.0.3"
 
-glob@^7.1.3, glob@^7.1.4:
+glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -5602,7 +5625,7 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-typescript@^4.6.4:
+typescript@^4.7.4:
   version "4.7.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==