VS Code Formatting JSX with new lines

Question

I've recently started coding with React, and I noticed immediately that VS Code is formatting my react files as follows, which is causing all kinds of warnings from the linter.

Index.js

class App extends Component {
  render() {
    return ( <
      div className = "App" >
      <
      header className = "App-header" >
      <
      img src = {
        logo
      }
      className = "App-logo"
      alt = "logo" / >
      <
      p >
      Edit < code > src / App.js < /code> and save to reload. < /
      p > <
      a className = "App-link"
      href = "https://reactjs.org"
      target = "_blank"
      rel = "noopener noreferrer" >
      Learn React <
      /a> < /
      header > <
      /div>
    );
  }
}

I'm having trouble finding the Prettier setting or whatever other setting is causing this in the app, any suggestions?

Extensions (Note WSL Ubuntu Windows)

• Bracket Pair Colorizer
• Debugger for Chrome
• Javascript (ES6) Code Snippets
• React Nitro Snippets
• Reactjs code snippets
• Remote - WSL
• Vue Theme
• Autoprefixer
• Beautify
• City Lights Icon Package
• EditorConfig for VS Code
• ESLint
• Github Pull Requests and Issues
• GitLens - Git Supercharged
• Import Cost
• Live Server
• npm
• npm IntelliSense
• Path IntelliSense
• Prettier - Code Formatter
• React Extension Pack
• React Nitro Essentials
• Search node_modules
• SonarLint
• Vetur
• vue-beautify

VS Code About Block:

• Version: 1.48.0-insider (user setup)
• Commit: 459610f3ef11b956968afadff704bad3bc1a0de2
• Date: 2020-08-04T12:40:10.231Z
• Electron: 7.3.2
• Chrome: 78.0.3904.130
• Node.js: 12.8.1 V8: 7.8.279.23-electron.0
• OS: Windows_NT x64 10.0.18363

Answer 1

You need to choose the default formatter.

1. Press Ctrl+Shift+P(Win) or Cmd+Shift+P(Mac)
2. Type Format Document With...
3. Then click Configure Default Formatter... and choose it from the list.

Answer 2

Just Install Preitter Extensions On VS CODE it will reformat all your file