如何配置 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 的問題。 像這樣：