Support for react in ESLint (#30)

* refactor: add support for react in ESLint

* refactor: fix warnings of ESLint rules

Co-authored-by: username <username@users.noreply.github.com>

.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: "^_",
+      },
+    ],
   },
 }

.vscode/settings.json

@@ -9,8 +9,10 @@
   },
   "files.insertFinalNewline": true,
   "javascript.format.enable": false,
+  "eslint.enable": true,
+  "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.tslint": true
+    "source.fixAll.eslint": true
   },
   "[javascript]": {
     "editor.formatOnSave": true,

README.md

@@ -2,11 +2,11 @@
 
 This using typescript, next.js, redux, material-ui is simple, and is a sample corresponding to the server side rendering.
 
-By VSCode and prettier and TSLint, realtime code format and realtime sentence structure check and rearranging of unused import are carried out in real time.
+By VSCode and prettier and ESLint, realtime code format and realtime sentence structure check and rearranging of unused import are carried out in real time.
 
 これは、typescript, next.js, redux, material-ui を使った、シンプルでサーバーサイドレンダリングに対応したサンプルです。
 
-VSCode と prettier と TSLint によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
+VSCode と prettier と ESLint によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
 
 ## Live demo
 
@@ -34,7 +34,7 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 - [redux-saga](https://redux-saga.js.org/)
 - [typescript-fsa](https://github.com/aikoven/typescript-fsa)
 - [typescript-fsa-reducer](https://github.com/dphilipson/typescript-fsa-reducers)
-- [TSLint](https://palantir.github.io/tslint/)
+- [ESLint](https://eslint.org/)
 
 ## Requirement
 
@@ -50,7 +50,7 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 
 - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
 - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
 
 ## Usage

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"

package.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": "",
@@ -46,6 +46,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",
     "redux-devtools-extension": "^2.13.8",
     "typescript": "^3.8.3"