Prettier is not working at React project

user_4197747 0
Viewed 9235

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;
prettier eslint reactjs
6 Answers

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.

user_138842810

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!

user_163268860

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

user_105910560

choose Default Formatter Prettier

enter image description here

user_32405830

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(✔).

user_155761100
Related