CODEWITHSUNDEEP
reactjsvisual-studio-codecreate-react-appprettier
Emir Mustafoski
Emir Mustafoski

Reputation: 3

How to configure the settings in visual studio code for prettier to work for react.js

When I press save the code goes like below.
I don't want prettierrc.json to act neither do I want ESLINT.

I have installed visual code extension Prettier Code Formatter and changed editor.formatonSave to true

       "editor.formatOnSave": true,
      "[javascript]": {
        "editor.formatOnSave": false,
      },
      "[javascriptreact]": {
        "editor.formatOnSave": false,
      },
      "[typescript]": {
        "editor.formatOnSave": false,
      },
      "[typescriptreact]": {
        "editor.formatOnSave": true,
      }
    }

Example

    import React from "react";
    import "./App.css";

    import Ball from "./Ball";
    import Lottery from "./Lottery";

    function App() {
      return ( <
        div className = "App" >
        <
        Lottery / >
        <
        Lottery title = "Mini Daily"
        maxNum = {
          10
        }
        maxBalls = {
          4
        }
        /> <
        /div>
      );
    }

    export default App;

Upvotes: 0

Views: 1011

Answers (1)

David Ayres
David Ayres

Reputation: 105

Here's what I did, with the Prettier extension installed I added this to my settings.json:

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

I actually have mine set to true because I do want it to format my .jsx files (notice I use the extension .jsx not .js). But if you set it to false you should be good to go in your situation.

Upvotes: 1

Related Questions