如何配置 Prettier 格式可用的 React 代码？

Question

所以我开始从这个 ( https://youtu.be/Dorf8i6lCuk?t=1946 ) 教程中学习 React，但在尝试保存文件时遇到了困难。 该视频建议变得更漂亮，我做到了，然后当我保存文件时，它会自动将代码格式化为不起作用的内容。 例如：

根据建议 jsx 文件：

根据建议 2：已经在 J​​avascript React 中：

根据解决方案中的建议：

Answer 1

尝试转到设置 > 扩展 > 取消选中 - 启用/禁用复选框。 或一起删除。

将代码更改为：（注意我的代码与你的不同，你的div标签是打开的， return的divs没有包含在() 。

function App() {
  return (
    <div>
      Hello!
    </div> //this was giving you the error before 
  )
}

export default App

我还会仔细检查您正在运行的 react 版本。 如果版本与教程不同，这可能会导致问题。

这可能会有所帮助： Prettier 的保存格式会弄乱 .jsx 文件

Answer 2

按照@AlexB801 的建议，我已经解决了这个问题。 事实证明，您不能将扩展名更改为 .jsx，而只能更改格式化程序。 附上一张图片。 这里要注意的另一件事是，这不是 Prettier 的问题。 像这样：