How to make create-react-app check for unused imports

Question

I mostly use create-react-app to spin up a new React project. A few days ago, I tried Vue for the first time and it has this feature where it basically prevents the app from running if you have unused imports in your code. Is it possible to give the same functionality to create-react-app?

Answer 1

It already enabled by default (in CRA) by eslint rule no-unused-vars

'value' is defined but never used. (no-unused-vars)eslint

Which works for unused imports, for example this simple code yields a warning:

// 'useState' is defined but never used. (no-unused-vars)eslint
import React, {useState} from "react";

export default function App() {
  return <>...</>;
}

If you want to prevent the app from running, change the config to yield an error instead.

{
...
    "rules": {
        "no-unused-vars": ["error"]
    }
}

• See How is ESLint integrated into Create React App?