如何配置Prettier移除不必要空白及尾随空白？

你的代码里存在连续空行和尾随空白，当前配置缺少明确控制这些行为的项，调整Prettier配置即可解决：

修改后的完整配置 #

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 80,
  "trimTrailingWhitespace": true,
  "singleAttributePerLine": false
}

关键配置说明 #

• trimTrailingWhitespace: 强制移除所有行末尾的尾随空白，这是处理尾随空格的核心项（虽然Prettier默认值为true，但明确写入配置可以避免环境变量或编辑器设置覆盖）
• singleAttributePerLine: 设为false时，Prettier会将JSX元素的属性尽量放在同一行，减少不必要的换行；如果你的组件属性较多需要换行，可保留默认的true

另外需要确认：

1. 编辑器已开启保存时自动触发Prettier格式化（比如VS Code中需开启editor.formatOnSave）
2. 项目中已正确安装Prettier依赖（可通过npm install prettier --save-dev确保）

调整后重新格式化代码，多余的连续空行和尾随空白都会被自动清理，你的代码会被整理成：

import React from 'react';
import { Provider } from 'mobx-react-lite';
import appStore from './store';
import HomeScreen from './HomeScreen';

export default function App() {
  return (
    <Provider store={appStore}>
      <HomeScreen />
    </Provider>
  );
}

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