如何在 VSCode 中使用 Prettier 修复 JSX/React 格式问题

Question

This is how I want my code to format

render() {
  return (
    <div>
      {this.state}
    </div>
  )
}

But when I alt+shift+F to format with prettier, I get this (which is incredibly frustrating!!)

render() {
  return <div>{this.state}</div>;
}

It's not TOO bad in this particular situation, but I'd rather fix it now before I get into anything too complicated.

Does anyone know which settings I can can change to fix this? I've been looking around for a while and can't find anything helpful.

Answer 1

Prettier is an opinionated formatter so there isn't a lot of flexibility outside of these configuration settings .

I wouldn't worry though, the reason its formatted like that is because it can fit all of it on a single line without going outside of the column range of 100, if you try adding another div or something you'll notice that it will not do this, and so more complex scenarios is not going to be problematic.