如何配置Prettier避免行间距？解决格式化后行间距变更问题

Prettier的核心设计是统一代码风格，默认会将连续的多个空行合并为单个空行，本身没有直接配置项允许保留自定义多空行，但可以通过以下几种方式处理你的问题：

局部保留自定义行间距 #

如果你只想在特定代码块间保留自定义行间距，可以在目标位置添加// prettier-ignore注释，阻止Prettier格式化该区域的空行：

// prettier-ignore
function getUserInfo() {
  return fetch('/api/user');
}


// prettier-ignore
function updateUserInfo(data) {
  return post('/api/user', data);
}

全局统一行间距规则（结合ESLint） #

如果需要全局统一特定的行间距（比如函数、类之间固定2个空行），可以用ESLint补充Prettier的规则：

1. 先安装依赖：

npm install eslint eslint-plugin-prettier eslint-config-prettier --save-dev

2. 在项目根目录创建.eslintrc.js，配置行间距规则：

module.exports = {
  extends: ["plugin:prettier/recommended"],
  rules: {
    "padding-line-between-statements": [
      "error",
      // 函数声明之间保留2个空行
      { blankLine: "always", prev: "function", next: "function", count: 2 },
      // 类与函数之间保留2个空行
      { blankLine: "always", prev: "class", next: "function", count: 2 }
      // 可根据需求添加更多规则，比如变量声明和函数之间的空行
    ]
  }
};

3. 确保编辑器同时启用ESLint和Prettier格式化，ESLint会强制执行行间距规则，Prettier负责其他代码格式统一。

调整换行阈值减少行间距变化 #

如果你的行间距问题是因为Prettier强制换行导致的，可以在.prettierrc中增大printWidth值，减少不必要的换行：

{
  "printWidth": 120
}

这个配置会让Prettier在代码长度超过120字符时才换行，避免因强制换行打乱原有的行间距。

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