如何在ESLint-Prettier中配置允许左大括号后保留一行空行？

1. Prettier 侧没有对应原生配置 #

Prettier的设计原则是尽量减少可选的风格类配置，目前没有内置参数可以直接开启「函数左大括号后强制保留一行空行」的效果，该需求需要通过ESLint规则配合实现。

2. ESLint 配置方法 #

你可以通过ESLint的padding-line-between-statements规则实现目标效果，具体配置如下：

前置依赖确认 #

确保你的TypeScript项目已经安装了以下依赖：

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier（用于处理ESLint和Prettier的规则冲突）

规则配置 #

在你的ESLint配置文件（如.eslintrc.js、.eslintrc.json）的rules字段中添加如下内容：

module.exports = {
  // 其余原有配置保持不变
  extends: [
    // 其余原有extends配置保持不变，确保prettier相关配置放在最后
    "prettier"
  ],
  rules: {
    // 其余原有规则保持不变
    "padding-line-between-statements": [
      "error",
      // 所有块级开括号后强制加一行空行
      { blankLine: "always", prev: "block-open", next: "*" },
      // 如果你只需要函数块生效，不需要其他块（如if/for）加空行，可以用下面这组配置替换上面的
      // { blankLine: "always", prev: ["function", "arrow-function", "class-method"], next: "*" }
    ]
  }
}

3. 生效说明 #

• 配置完成后执行eslint --fix即可批量格式化现有代码，符合你要求的空行格式
• 若使用编辑器保存自动格式化功能，需保证ESLint自动修复的执行顺序在Prettier格式化之前，避免规则冲突

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