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

【问题标题】：How do I configure Prettier format usable React code?如何配置 Prettier 格式可用的 React 代码？
【发布时间】：2021-09-14 12:10:35
【问题描述】：

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

根据建议一个 jsx 文件：

根据建议 2：已经在 Javascript React 中：

根据解决方案中的建议：

【问题讨论】：

您可以尝试将扩展名更改为.jsx 并查看错误指示是否仍然存在？
是的，它看起来仍然存在
右下角，点击JavaScript，弹出菜单时选择JavaScript React。或者，使用 .tsx 会自动将语言设置为 TypeScript React，所以如果你知道 TypeScript，这是一个更简单的选择
尝试修复语法然后运行更漂亮，否则会失败
@LoganDevine 我假设格式是正确的，但在 JS 模式下更漂亮

【解决方案1】：

尝试进入设置 > 扩展 > 取消选中 - 启用/禁用复选框。 或全部删除。

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

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

export default App

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

【讨论】：

做得很好..（检查主线程格式化如何更改代码）
与教程相比，您的 React 版本是什么？你删除 Prettier 了吗？
目前在 React 17.0.2 上，卸载 prettier 并不能修复它。
使用纱线还是 npm？根据您使用的内容尝试 npm install 或 yarn install 可能是依赖问题。我只是按照视频中的相同过程创建了应用程序，并没有看到任何问题，但我从未添加过更漂亮的东西。检查 npm 和 yarn 的版本
修复了！所以事实证明我不需要 .jsx 文件，但底部的格式需要设置为 javascript react。（对于 .js 文件）这是我搞砸的部分！

【解决方案2】：

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

【讨论】：