Feature/support for react in eslint (#3)

* refactor: add support for react in ESLint

* refactor: fix warnings of ESLint rules

Co-authored-by: username <[email protected]>

Author: treetips

.eslintrc.js

@@ -3,13 +3,18 @@ module.exports = {
   parserOptions: {
     project: "tsconfig.json",
     sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+    useJSXTextNode: true,
   },
-  plugins: ["@typescript-eslint/eslint-plugin"],
+  plugins: ["@typescript-eslint/eslint-plugin", "react"],
   extends: [
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
     "prettier/@typescript-eslint",
+    "plugin:react/recommended",
+    "prettier/react",
   ],
   root: true,
   env: {
@@ -20,5 +25,11 @@ module.exports = {
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+      },
+    ],
   },
 }

components/atoms/SpacingPaper.tsx

@@ -1,5 +1,6 @@
 import { Paper } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import React from "react"
 
 const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
   createStyles({

components/organisms/HeaderArticleContainer.tsx

@@ -1,4 +1,5 @@
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import React from "react"
 import { PageHeader } from "../molecules"
 
 const useStyles = makeStyles((theme: Theme) =>

components/organisms/Sidenavi.tsx

@@ -1,6 +1,7 @@
 import { List } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
+import React from "react"
 import { Page, SiteInfo } from "../../constants"
 import { usePage } from "../../hooks"
 import { NextListItem } from "../molecules"

components/templates/Layout.tsx

@@ -1,6 +1,6 @@
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Head from "next/head"
-import * as React from "react"
+import React from "react"
 import { usePage } from "../../hooks"
 import { ResponsiveDrawer } from "../organisms"
 

package-lock.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "NODE_ENV=production node server.js",
     "format": "prettier --write \"{components,constants,hooks,model,pages,store,types}/**/*.{ts,tsx}\"",
-    "lint": "eslint \"{components,constants,hooks,model,pages,store,types}/**/*.ts\" --fix"
+    "lint": "eslint \"{components,constants,hooks,model,pages,store,types}/**/*.{ts,tsx}\" --fix"
   },
   "keywords": [],
   "author": "",
@@ -44,6 +44,8 @@
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
     "prettier": "^2.0.5",
     "typescript": "^3.8.3"
   }

package.json

@@ -1,5 +1,6 @@
 import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import React from "react"
 import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"

pages/index.tsx

@@ -18,4 +18,4 @@ const store = configureStore({
   devTools: Env.NODE_ENV === "development",
 })
 
-export const makeStore: MakeStore = (): EnhancedStore => store
+export const makeStore: MakeStore = (_?: RootState): EnhancedStore => store