How to get React warnings in Parcel React extension

Question

I have a Chrome Extension built with Parcel and React, but I'm not getting warnings (e.g. missing useEffect dependencies) when I inspect the popup. How do I get these warnings?

Answer 1

Missing useEffect dependencies warnings are provided by eslint through this plugin. Parcel won't run eslint for you unless you set it up through the @parcel/validator-eslint plugin. I provided instructions on how to do that in this answer.

Another option is to use eslint-watch (npm) from the command line separately from parcel, so you'd have two separate scripts in your package.json that might look like this:

{
   "scripts": {
      "start": "parcel src/index.html"
      "lint": "esw --watch src/**/*.js"
   }
}

To get react hooks warnings, you'll need to use eslint-plugin-react-hooks by first installing it (e.g. yarn add eslint-plugin-react-hooks --dev), and then adding this to your .eslintrc.json:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}