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.

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.

Answer 3

Just install Extension Prettier ESLint Prettier ESlint (make sure you already install Prettier Prettier )

After installing the extension change default formatter to Prettier ESlint

Steps for Changing default formatter setting in VSCode

1. ctrl+shift+p to open Preferences
2. Type Format Document with and press enter
3. Select Configure default formatter
4. Now select Prettier eslint

Now whenever you want to Formate the React document just save the file using ctrl+s

Answer 4

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 5

If you have multiple formatters working press Ctrl+Shift+P, Type Format Document and select the one you want.

Then, Go to settings (Vscode), Search Format, and toggle Format on Save(✔).