Bug: eslint react-hooks/exhaustive-deps should not quote nor localize the dependency list in the output

[trajano]

React version: 18

Steps To Reproduce

1. Create a useCallback or useEffect hook with missing deps
2. enable react-hooks/exhaustive-deps eslint rule

The current behavior

161:6 error React Hook useCallback has missing dependencies: 'isTablet', 't', and 'theme.sizes.spacing'. Either include them or remove the dependency array react-hooks/exhaustive-deps

The expected behavior

161:6 error React Hook useCallback has missing dependencies: [ isTablet, t, theme.sizes.spacing ]. Either include them or remove the dependency array react-hooks/exhaustive-deps

By rendering it that way we can simply copy and paste the list into our code rather than changing the copied list after the fact.

[eps1lon]

The idea is that the error message is human-readable. Instead of c&p you can use the "apply fix" option from ESLint either via editor integration or CLI (eslint --fix).

[trajano]

I wish that were the case @eps1lon but --fix does not work for that rule.

[eps1lon]

The auto-fixer does not run on suggestions by default since it really needs manual verification if that's ok. You can use --fix-type at your own risk though.

Your editor integration should applying suggestions as well.

[trajano]

No luck... tried every single fix type none of them worked.

spring-docker/expo-app   rework [$!] via  v16.18.1  ❯ yarn eslint --quiet --fix-type problem --fix screens/OneViewScreen.tsx yarn run v1.22.19 $ C:\p\spring-docker\expo-app\node_modules.bin\eslint --quiet --fix-type problem --fix screens/OneViewScreen.tsx

C:\p\spring-docker\expo-app\screens\OneViewScreen.tsx 122:6 error React Hook useCallback has a missing dependency: 'fill.length'. Either include it or remove the dependency array react-hooks/exhaustive-deps

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

spring-docker/expo-app   rework [$!] via  v16.18.1  took 7s ❯ yarn eslint --quiet --fix-type directive --fix screens/OneViewScreen.tsx yarn run v1.22.19 $ C:\p\spring-docker\expo-app\node_modules.bin\eslint --quiet --fix-type directive --fix screens/OneViewScreen.tsx

C:\p\spring-docker\expo-app\screens\OneViewScreen.tsx 122:6 error React Hook useCallback has a missing dependency: 'fill.length'. Either include it or remove the dependency array react-hooks/exhaustive-deps

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

spring-docker/expo-app   rework [$!] via  v16.18.1  took 7s ❯ yarn eslint --quiet --fix-type suggestion --fix screens/OneViewScreen.tsx yarn run v1.22.19 $ C:\p\spring-docker\expo-app\node_modules.bin\eslint --quiet --fix-type suggestion --fix screens/OneViewScreen.tsx

C:\p\spring-docker\expo-app\screens\OneViewScreen.tsx 122:6 error React Hook useCallback has a missing dependency: 'fill.length'. Either include it or remove the dependency array react-hooks/exhaustive-deps

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

spring-docker/expo-app   rework [$!] via  v16.18.1  took 7s ❯ yarn eslint --quiet --fix-type layout --fix screens/OneViewScreen.tsx yarn run v1.22.19 $ C:\p\spring-docker\expo-app\node_modules.bin\eslint --quiet --fix-type layout --fix screens/OneViewScreen.tsx

C:\p\spring-docker\expo-app\screens\OneViewScreen.tsx 122:6 error React Hook useCallback has a missing dependency: 'fill.length'. Either include it or remove the dependency array react-hooks/exhaustive-deps