React Visual Studio Code Wrong Formatting

Refresh

March 2019

Views

3 time

0

Many of the code formatters are formatting my code in wrong way. For example, code is below:

<Fade {...TransitionProps} timeout={350}>
  <Paper className={classes.appsUIBox}>
    <AccountBalanceIcon className={classes.icon} />
    <AccountCircleIcon className={classes.icon} />
  </Paper>
</Fade>

I want it to be like below:

<Fade 
    {...TransitionProps} 
    timeout={350}
>
  <Paper 
    className={classes.appsUIBox}
  >
    <AccountBalanceIcon 
        className={classes.icon}
    />
    <AccountCircleIcon
        className={classes.icon}
    />
  </Paper>
</Fade>

But when I use Beautify I get

< Fade {
  ...TransitionProps
}
timeout = {
    350
  } >
  <
  Paper className = {
    classes.appsUIBox
  } >
  <
  AccountBalanceIcon className = {
    classes.icon
  }
/> <
AccountCircleIcon className = {
  classes.icon
}
/> <
/Paper> <
/Fade>

Is there a certain setting or some code formatter that does a great job? I tried Prettier too, it didn't do well for me. I have checked other questions within Stackoverflow and didn't find anyone having this difficulty, and no good recommendation for people using Visual Studio Code. Some answers for questions recommended other IDEs like JetBrains, I'd rather stick with Visual Studio Code.

0 answers