Ionic 7 React Typescript default eslint settings prevents VSCode from displaying missing dependancies for useEffect hooks

Issue

When i generate a new React Typescript application using the latest version 7 of the Ionic CLI, i am not seeing any eslint warnings for missing dependencies in any useEffect hooks that i add inside a component when viewing the project in VSCode.

I am using VSCode as my IDE with the ESLint extension installed.

I can confirm that older applications which were generated with version 6 or lower of the Ionic CLI do display warnings and offer a list of suggested dependencies to insert automatically.

Here is what i see in VSCode when viewing an older Ionic 6 application:

And below is what i see in a new Ionic 7 application for the same code, with no warnings:

My Ionic 6 app does not have an eslintrc configuration file, instead the only configuration i could find was in the package.json file:

...
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
...

In the Ionic 7 app, the Ionic CLI generated the following .eslintrc.js file:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:react/recommended',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}

I am not well versed in configuring eslint to understand how to change or update the configuration that Ionic 7 uses in-order to get VSCode to display the same warnings that i see for the version 6 app and could really use some help.

I did try running npx eslint --init from the terminal, followed the prompts and installed the additional packages it suggested i needed but this did not work.

Subsequently, in VSCode, i tried running the command "ESLint: Restart ESLint Server" which did not work to correct the issue.

I also tried running the command "ESLint: Show Output Channel", which shows that ESLint is running without any errors.

Lastly, i tried following this 2023 guide, albeit likely that it was not meant for use in an application that was generated by the Ionic CLI, and needless to say, it was not a perfect fit and i could not get it to work.

Has anyone else run into this problem yet and found a fix?

Solution

Ionic 7 uses Vite, and thus after doing some further digging around I was able to solve the problem with some help from this guide

First, since my app was generated using the Ionic CLI, I skipped the initial part of the guide which outlines installing and configuring vite-plugin-eslint and preserved the vite.config.ts as it was installed by the CLI.

If i had any issues after proceeding with the rest of the guide i was going to circle back to this and try it if i still had any problems getting ESLint to work.

Instead, first, i just installed the eslint-config-react-app package: npm install eslint-config-react-app --save-dev

Then, i executed the ESLint: Show Output Channel command in VSCode to see if i had any issues. Immediately it complained that i needed to specify the react version in settings in my .eslintrc.js configuration.

So i updated the .eslintrc.js configuration to include the needed settings as per the error from the Output Channel and then, as per the Vite guide noted above, i also updated the extends section to include react-app:

  'settings': { // <-- added settings and included react version detect
    'react': {
      'version':'detect',
      }
     },
     'extends': [
       'react-app', // <-- added react-app
       'plugin:react/recommended',
       'eslint:recommended',
     ],

Lastly, i restarted the ESLint Server in VSCode.

And, voilà 🔥, ESLint lit up like a Christmas tree 🎄 with one catch...

Upon doing so, i was seeing only one, new, issue inside vite.config.ts whereas TS was complaining that test was not a known property on the config. I was able to fix the problem via this solution

Note, i am still learning about how to correctly configure ESLint so i have yet to find out if i am still missing anything or if i should have done this differently, but with the updates noted, ESLint is working as expected.

I hope this is helpful for anyone that runs into this issue, but please also feel free to comment if anyone feels this approach is wrong or if there is a better way to go about solving the problem.

Answered By - DevMike