VSCode中如何保留手动换行并自动清除其他冗余空行？

核心逻辑 #

通过格式化工具的规则配置，区分手动添加的分隔空行（连续2个及以上）和删除代码遗留的冗余空行（单个）：保留前者，清理后者。

方案1：使用Prettier（推荐，支持多语言） #

Prettier是主流的代码格式化工具，通过以下配置实现需求：

1. 项目级Prettier配置
   在项目根目录创建/修改 .prettierrc 文件，添加规则：

{
  "maxBlankLines": 3, // 允许最多3个连续空行，手动添加的多空行会被保留（超过3个的会被截断为3个）
  "minBlankLines": 0, // 代码块之间不需要强制保留空行，删除代码遗留的单个空行会被自动清理
  // 其他常规配置可根据需求添加
  "printWidth": 80,
  "singleQuote": true
}

2. VSCode全局/工作区配置
   打开VSCode的 settings.json（快捷键Ctrl+, → 点击右上角打开JSON），添加以下设置确保保存时触发格式化：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定使用Prettier作为默认格式化工具
}

方案2：使用ESLint（适合JS/TS/Vue等项目） #

如果项目依赖ESLint做代码检查，可以通过规则实现空行控制：

1. ESLint规则配置
   在项目根目录的 .eslintrc.js（或其他ESLint配置文件）中添加规则：

module.exports = {
  // 其他配置...
  rules: {
    "no-multiple-empty-lines": ["error", {
      "max": 3, // 最多允许3个连续空行，手动添加的多空行保留
      "maxEOF": 1, // 文件末尾最多保留1个空行
      "maxBOF": 0 // 文件开头不允许空行
    }]
  }
}

2. VSCode开启自动修复
   在 settings.json 中开启ESLint保存自动修复：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue"] // 根据你的开发语言调整
}

方案3：VSCode自带格式化工具（针对HTML/CSS等原生语言） #

如果使用VSCode内置的语言格式化工具，可直接在 settings.json 中配置：

{
  // HTML配置
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.html-language-features",
    "html.format.maxPreserveNewLines": 3,
    "html.format.preserveNewLines": true
  },
  // CSS配置
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.css-language-features",
    "css.format.maxPreserveNewLines": 3,
    "css.format.preserveNewLines": true
  }
}

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