我之前也踩过这个坑！Github上显示的多余空白，大概率是换行符格式不统一或者工具链/编辑器的格式设置冲突导致的，结合你用了Prettier和ESLint的情况，给你一步步排查的方案：

1. 先搞定Git的换行符配置 #

Windows和macOS/Linux的换行符（CRLF vs LF）差异是重灾区，Git的自动转换经常会让代码在Github上看起来有多余空白。

• 先设置全局Git换行符规则：
  • Windows用户执行：git config --global core.autocrlf true（提交时转LF，拉取时转回CRLF）
  • macOS/Linux用户执行：git config --global core.autocrlf input（提交时转LF，拉取时保持LF）
• 再在项目根目录创建.gitattributes文件，强制统一所有文件的换行符：

  * text=auto eol=lf
  

  这样不管本地编辑器用什么换行符，提交到Github的都会是LF，避免换行符差异导致的空白显示。

2. 确保Prettier真正生效且配置统一 #

很多时候问题出在Prettier没在提交前自动格式化，导致手动上传或推送的代码没被规范处理：

• 检查你的Prettier配置文件（比如.prettierrc），明确设置换行和空格规则：

  {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "endOfLine": "lf", // 和Git配置统一用LF
    "trailingComma": "es5",
    "semi": true
  }
  

• 用husky+lint-staged做提交前自动格式化，这样每次推送前都会自动把代码按Prettier规则处理，从源头避免格式问题：
  1. 安装依赖：npm install husky lint-staged --save-dev
  2. 在package.json里添加配置：

     "scripts": {
       "prepare": "husky install"
     },
     "lint-staged": {
       "*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"]
     }
     

  3. 添加pre-commit钩子：npx husky add .husky/pre-commit "npx lint-staged"
     这样每次提交代码前，Prettier都会自动格式化你修改的文件，再也不用担心手动上传的格式问题。

3. 解决ESLint和Prettier的规则冲突 #

如果同时开了ESLint和Prettier，两者的规则很可能打架，导致代码被重复修改出现多余空白：

• 安装eslint-config-prettier禁用ESLint中与Prettier冲突的规则：npm install eslint-config-prettier --save-dev
• 在ESLint配置文件（比如.eslintrc.json）里把prettier放在extends的最后，覆盖冲突规则：

  {
    "extends": [
      "eslint:recommended",
      // 你的其他ESLint扩展
      "prettier" // 必须放在最后
    ]
  }
  

4. 检查编辑器的本地设置 #

有时候编辑器的自动保存设置会偷偷篡改格式，比如VS Code：

• 打开设置（Ctrl+,），确保editor.formatOnSave设为true，并且defaultFormatter选esbenp.prettier-vscode
• 检查editor.insertSpaces和editor.tabSize是否和Prettier配置的tabWidth一致（比如都是2）
• 关闭那些可能自动添加空白行或修改空格的第三方插件，比如某些代码补全类插件

按上面的步骤排查一遍，应该就能解决Github上显示多余空白的问题了！

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