Prettier is not working at React project

Question

I am migrating my airbnb eslint rules to prettier rules, but I'm having some issues.

Here is my .eslintrc:

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "browser": true,
    "node": true
  },
  parser: "babel-eslint",
  "plugins": ["prettier", "react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true
      }
    ]
  },
  "extends": ["eslint:recommended", "prettier", "prettier/react"]
}

With this setup I got these errors at my App.jsx file:

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

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

import React from 'react';
import style from './App.scss';
import Header from '../header/Header';

const App = () =>
  <div className={style.wrapper}>
    <Header />
  </div>;

export default App;

Answer 1

You'll need to add the esLint react plugin.

"extends: ["eslint:recommended", "plugin:react/recommended", ...]

This will add the react/jsx-uses-react rule which will prevent React from being incorrectly marked as unused when JSX is in use.