chore: add eslint-plugin-react

Semibold · Dec 25, 2023 · 85f14c5 · 85f14c5
1 parent 854d47b
commit 85f14c5
Show file tree

Hide file tree

Showing 6 changed files with 536 additions and 18 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,7 +11,14 @@ module.exports = {
         ecmaVersion: 'latest',
         sourceType: 'module',
     },
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:vue/vue3-recommended',
+        'prettier',
+    ],
     plugins: ['@typescript-eslint'],
     rules: {
         'no-undef': 'off',

diff --git a/apps/react-demo/src/component/atom/Heading.tsx b/apps/react-demo/src/component/atom/Heading.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
  * @desc Pure React Component (Can reuse in other project)
  * @desc React memo example
  */
-export const Heading = memo(() => {
+export const Heading = memo(function InHeading() {
     // Check console message in devtool
     console.log('[debug] Every component should be memoized and log once');
     return <h2>Hello world! (Static Content)</h2>;

diff --git a/apps/react-demo/src/component/mobx/MobxSubmit.tsx b/apps/react-demo/src/component/mobx/MobxSubmit.tsx
@@ -6,7 +6,7 @@ import { useSubmitStore } from '../../store/app/submit.store';
 /**
  * @desc View with Store (Cannot reuse without same store)
  */
-export const MobxSubmit = observer(() => {
+export const MobxSubmit = observer(function InMobxSubmit() {
     // App store (Mobx)
     const submitStore = useSubmitStore();
     const onClick = useCallback(() => {

diff --git a/apps/react-demo/src/component/mobx/MobxThemeSwitch.tsx b/apps/react-demo/src/component/mobx/MobxThemeSwitch.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import { useThemeStore } from '../../store/global/theme.store';
 
-export const MobxThemeSwitch = observer(() => {
+export const MobxThemeSwitch = observer(function InMobxThemeSwitch() {
     const themeStore = useThemeStore();
 
     useEffect(() => {

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "dotenv": "16.3.1",
     "eslint": "8.53.0",
     "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-vue": "9.19.2",
     "husky": "8.0.3",
     "lint-staged": "15.0.2",