sublime JsFormat - React.js formatting

Question

I just started learning react development and I'm pretty new with react. I have created a react app with create-react-app tool and installed jsFormat plugin for sublime text 3 but it formats jsx files wrongly:

Before format:

App.js file:

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' />
          <h1 className='App-title'>Welcome to React</h1>
        </header>
        <p className='App-intro'>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

After jsFormat formats the App.js file:

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' / >
      <
      h1 className = 'App-title' > Welcome to React < /h1> <
      /header> <
      p className = 'App-intro' >
      To get started, edit < code > src / App.js < /code> and save to reload. <
      /p> <
      /div>
    );
  }
}

export default App;

What settings should I add/change in JsFormat settings to make it format jsx files properly?

Answer 1

将此添加到 JsFormat 设置修复了问题：

"e4x": true