如何配置ESLint和Prettier实现函数间空一行格式化？

数据老陈

2026-8-4

解决React组件中Hooks、函数与return间空行的配置方案

Prettier本身没有细粒度控制这类空行的配置，需要结合ESLint规则实现需求，具体步骤如下：

1. 安装必要依赖

如果还没安装相关插件，执行以下命令：

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

2. 调整ESLint配置

在你的ESLint配置文件（如.eslintrc.js）中添加规则，控制语句间的空行：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended' // 整合Prettier与ESLint，避免规则冲突
  ],
  plugins: ['react'],
  rules: {
    // 核心空行控制规则
    'padding-line-between-statements': [
      'error',
      // 多个同类型变量声明（如const）属于一组，组内无需空行，组与其他语句间空一行
      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
      // 每个React Hooks（use开头的函数）前后空一行
      { blankLine: 'always', prev: (node) => node.type === 'CallExpression' && node.callee.name.startsWith('use'), next: '*' },
      { blankLine: 'always', prev: '*', next: (node) => node.type === 'CallExpression' && node.callee.name.startsWith('use') },
      // return语句前强制空一行
      { blankLine: 'always', prev: '*', next: 'return' }
    ],
    // 可选：启用React Hooks基础规则
    'react/hooks/rules-of-hooks': 'error',
    'react/hooks/exhaustive-deps': 'warn'
  },
  settings: {
    react: {
      version: 'detect' // 自动识别React版本
    }
  }
};