Weird formatting and syntax highlighting in my react app

Trying to get into react. Setup react project using `npx create-react-app`. Project JavaScript Language is set to `React JSX`. When looking at some js files, I see a lot of syntax warnings, when I try to format, I get the following:

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

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>
)
;
}
}

export default App;

What do I have to do now? Can't find much infos on the web.

2 comments

>What do I have to do now?

- Hit Undo to restore previous formatting

- in Settings (Preferences) | Languages & Frameworks | JavaScript, make sure to set JavaScript language version to React JSX to get rid of syntax errors, press OK

 

Never try to format the code with syntax errors - formatting is based on a syntax tree built by parser, if your code can't be parsed, attempt to format it will ruin your code

 

0

My problem was that I formatted before switching to React JSX. Thanks.

0

Please sign in to leave a comment.