DoubleTian-tw
commented
8 months ago 已處理好eslint忽略react/prop-types及no-unused-vars rules
.eslint.cjs中加入新規則
rules: {
"react/prop-types": "off",
"no-unused-vars": "off",
},npm run lint後結果
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\ButtonGroups.jsx
131:45 error 'color' is not defined no-undef
131:55 error 'text' is not defined no-undef
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\CharacterGroups.jsx
23:27 error Component definition is missing display name react/display-name
126:27 error Component definition is missing display name react/display-name
176:25 error Component definition is missing display name react/display-name
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\CharacterShowInfo.jsx
9:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
9:30 error Component definition is missing display name
react/display-name
23:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
23:31 error Component definition is missing display name
react/display-name
37:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
37:35 error Component definition is missing display name
react/display-name
54:34 error Component definition is missing display name
react/display-name
69:35 error Component definition is missing display name
react/display-name
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\Dropdowns.jsx
8:7 warning Fast refresh only works when a file only exports components. Move your component(s) to a separate file react-refresh/only-export-components
30:7 warning Fast refresh only works when a file only exports components. Move your component(s) to a separate file react-refresh/only-export-components
60:16 warning Fast refresh can't handle anonymous components. Add a name to your export react-refresh/only-export-components
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\Hero.jsx
58:8 warning React Hook useEffect has missing dependencies: 'id' and 'scrollDown'. Either include them or remove the dependency
array react-hooks/exhaustive-deps
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\Heros.jsx
48:9 error 'process' is not defined no-undef
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\useDamageHook.js
41:8 warning React Hook useEffect has a missing dependency: 'handleBestDamage'. Either include it or remove the dependency array react-hooks/exhaustive-deps
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\useFetchFirebase.js
22:64 error React Hook "useHeroContext" is called in function "fetchTierPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
24:5 error React Hook "useEffect" is called in function "fetchTierPokemon" that is neither a React function component nor a
custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
56:8 warning React Hook useEffect has missing dependencies: 'handleTierPokemon' and 'storeAllPokemon'. Either include them or
remove the dependency array
react-hooks/exhaustive-deps
66:9 error React Hook "useHeroContext" is called in function "filterTierPokemon" that is neither a React function component
nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
67:5 error React Hook "useEffect" is called in function "filterTierPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
84:8 warning React Hook useEffect has a missing dependency: 'tierPokemon'. Either include it or remove the dependency array
react-hooks/exhaustive-deps
91:5 error Unnecessary try/catch wrapper
no-useless-catch
152:5 error Unnecessary try/catch wrapper
no-useless-catch
215:38 error React Hook "useHeroContext" is called in function "fetchPopularPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the
word "use" react-hooks/rules-of-hooks
216:5 error React Hook "useEffect" is called in function "fetchPopularPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word
"use" react-hooks/rules-of-hooks
228:8 warning React Hook useEffect has a missing dependency: 'handlePopularPokemon'. Either include it or remove the dependency array
react-hooks/exhaustive-deps
237:9 error React Hook "useHeroContext" is called in function "filterPopularPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
238:5 error React Hook "useEffect" is called in function "filterPopularPokemon" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
266:8 warning React Hook useEffect has missing dependencies: 'handleFilterBestPokemon', 'popularPokemon', and 'storeAllPokemon'. Either include them or remove the dependency array
react-hooks/exhaustive-deps
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\useHeroContext.jsx
92:21 error 'process' is not defined
no-undef
292:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\Hero\useQueryPokedex.js
23:27 error React Hook "useQuery" is called in function "queryTypesInfo" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
react-hooks/rules-of-hooks
28:12 error React Hook "useQueries" is called in function "queryTypesInfo" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
70:12 error React Hook "useQuery" is called in function "queryPokemonInfo" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "usese" react-hooks/rules-of-hooks
86:27 error React Hook "useQuery" is called in function "queryTypesDamageRelation" that is neither a React function componentnt nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with t whe word "use" react-hooks/rules-of-hooks
90:12 error React Hook "useQueries" is called in function "queryTypesDamageRelation" that is neither a React function componenent nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start withhe the word "use" react-hooks/rules-of-hooks
121:13 error Unsafe usage of optional chaining. If it short-circuits with 'undefined' the evaluation will throw TypeError
no-unsafe-optional-chaining
188:8 warning React Hook useEffect has missing dependencies: 'FetchDamageRelations', 'FetchPokemonInfo.data?.data?.data', 'handndleStoreAllPokemon', and 'handleStoreAllTypes'. Either include them or remove the dependency array
react-hooks/exhaustive-deps
338:8 warning React Hook useEffect has missing dependencies: 'handleIsLoadingPokemon', 'handleStoreAllTypes', 'handleStorePokememon', 'pokemonAllTypes', 'pokemonSpecies', and 'pokemonVarieties'. Either include them or remove the dependency array
react-hooks/exhaustive-deps
D:\vs_code\Github-pages\pokemon-go-gym-vite\src\components\contexts\useTheme.jsx
44:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions betweeeen components react-refresh/only-export-components
✖ 44 problems (28 errors, 16 warnings)
ESLint
ESLint 簡單來說是語法、寫法檢查工具，它可以幫助我們寫出更有規範的程式碼。vite 起的專案預設就有幫我們配置，可以試著去看錯誤訊息並解決
建議處理
React.memo包起來的 component 會沒有名字，所以要再另外給他一個名字。這個displayName主要是用在 React DevtoolsuseEffect,useMemo,useCallback很重要的概念，基本上是用以保證你的 react 的狀態有正確更新。一開始可能會沒那麼好理解，我可以再口述解釋關掉某些 error 或 warning
ESLint 比較偏輔助，也就是就算你不管它的訊息你的程式仍然能跑，所以有些設定可以依你的偏好關掉，像我就不想看到 no-unused-vars 的錯誤。 可以去研究一下 ESLint 怎麼把 react/prop-types, no-unused-vars 這幾項規則關掉。 提示: 可以先不用徹底去了解 ESLint，先在 .eslintrc.cjs 拼拼湊湊讓上述兩項規則不會再被 ESLint 報錯就好。
錯誤訊息
在 Terminal 跑
npm run lint(我是在 cc7176ce9 這個 commit 底下跑的) :