WebStorm中Prettier保存时将JSX折叠为单行如何阻止？

一、阻止JSX被压缩为单行 #

你遇到的是Prettier默认的短代码压缩行为，可通过两种方式解决：

全局配置方式 #

在项目根目录创建.prettierrc配置文件，添加规则自定义格式化行为：

{
  "printWidth": 40, // 降低代码换行阈值，让短内容也触发换行
  "jsxBracketSameLine": false, // 强制JSX闭合标签单独占一行
  "bracketSpacing": true // 保持JSX标签内的空格
}

单代码块忽略方式 #

如果只想针对当前组件跳过格式化，在代码上方添加注释：

// prettier-ignore
export default function RaisedContainer({ children }: IProps) {
  return (
    <div>
      {children}
    </div>
  );
}

二、配置保存时自动运行Prettier #

以VS Code为例：

• 打开设置面板（快捷键Ctrl+,）
• 搜索Format On Save，勾选Editor: Format On Save选项
• 搜索Default Formatter，选择Prettier - Code formatter作为默认格式化工具

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