VSCode保存React代码时换行异常问题求助

保存前代码： #

const App = () => {
  return (
    <div className="App">
      <DiaryEditor />
      <DiaryList diaryList={dummyList} />
    </div>
  );
};
export default App;

保存后异常代码： #

const App = () => {
  return ( <
    div className = "App" >
    <
    DiaryEditor / >
    <
    DiaryList diaryList = {
      dummyList
    }
    /> <
    /div>
  );
};
export default App;

解决步骤： #

1. 设置Prettier为React代码默认格式化工具
   打开VSCode设置（快捷键Ctrl+,/Cmd+,），搜索Default Formatter，选择esbenp.prettier-vscode。

2. 开启保存自动格式化

   • 在设置中搜索Format On Save，勾选该选项。
   • 若可视化设置中找不到，直接编辑settings.json（通过Ctrl+Shift+P输入Open Settings (JSON)打开），添加以下配置：

     "editor.formatOnSave": true,
     "[javascriptreact]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
     

3. 排查插件冲突
   禁用其他可能干扰格式化的插件（如Beautify、非官方格式化工具），然后重新保存代码测试。

4. 添加Prettier项目配置文件
   在项目根目录创建.prettierrc文件，填入基础格式化规则，示例：

   {
     "singleQuote": true,
     "semi": true,
     "printWidth": 80,
     "tabWidth": 2
   }
   

完成以上步骤后，重新保存React代码，异常换行问题应该会得到解决。

内容的提问来源于stack exchange，提问作者yhc