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

steps to follow (using prettierenter image description here):

1. Click on the right corner text 'JavaScript React'
2. select configure 'JavaScript React' language based settings
3. add this snippet in the file

    "[javascriptreact]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true

All set to run perfect!

Answer 2

Go to settings and type default formatter which is null at the beginning. Change it to esbenp.prettier-vscode. This is what is working for me. Hope it does for you.