如何配置ESLint规则，在Playwright测试的test与钩子函数间添加空行？

需求：在Playwright编写的测试代码中，test.beforeAll、test.beforeEach、test（测试用例）、test.afterAll、test.afterEach这些语句之间必须添加空行。

测试代码示例 #

// test-login.test.js

const { test, expect } = require('@playwright/test');
let context;

test.describe('test login', () => {
  test.beforeAll(async ({ browser }) => {
    context = await browser.newContext({ storageState: 'user1.json' });
  });
  test.beforeEach(async ({ browser }) => {
    page = await context.newPage();
  });
  test.afterAll(async () => {
    await context.close();
  });
  test.afterEach(async () => {
    await context.close();
  });
  test('test login with valid account', async () => {
  // test code...
  });
  test('test login with invalid account', async () => {
  // test code...
  });
  test('test login with invalid password', async () => {
  // test code...
  });
});

现有无效配置 #

// .eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'google',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:playwright/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  root: true,
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'padding-line-between-statements': [
      'warn',
      { blankLine: 'always', prev: '*', next: 'function' },
      { blankLine: 'always', prev: '*', next: 'block-like' },
      { blankLine: 'always', prev: '*', next: 'block' },
      { blankLine: 'always', prev: 'function', next: 'function' }
    ],
    '@typescript-eslint/no-var-requires': 'off',
    'playwright/no-wait-for-timeout': 'off',
    'camelcase': 'off',
    '@typescript-eslint/naming-convention': [
      'warn',
      {
        selector: 'variable',
        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
      },
    ],
    'prettier/prettier': [
      'warn',
      {
        endOfLine: 'auto',
        singleQuote: true,
        parser: 'flow',
        printWidth: 140
      }
    ],
    'new-cap': 'warn',
    'max-len': 'off',
    'valid-jsdoc': 'warn',
    'require-jsdoc': 'off',
    'linebreak-style': 'off',
    'no-unused-vars': 'warn',
    'spaced-comment': 'warn'
  }
};

解决方案 #

原配置无效的核心原因是：padding-line-between-statements规则中设置的function、block-like等类型无法匹配test.beforeAll这类函数调用表达式。需要针对Playwright的特定调用添加精准匹配规则。

修改.eslintrc.js中的padding-line-between-statements规则，替换为如下配置：

'padding-line-between-statements': [
  'warn',
  // 保留原有业务需要的规则
  { blankLine: 'always', prev: '*', next: 'function' },
  { blankLine: 'always', prev: '*', next: 'block-like' },
  { blankLine: 'always', prev: '*', next: 'block' },
  { blankLine: 'always', prev: 'function', next: 'function' },
  // 新增Playwright测试语句之间的空行强制规则
  {
    blankLine: 'always',
    prev: {
      call: true,
      callee: {
        object: { name: 'test' },
        property: { name: ['beforeAll', 'beforeEach', 'test', 'afterAll', 'afterEach'] }
      }
    },
    next: {
      call: true,
      callee: {
        object: { name: 'test' },
        property: { name: ['beforeAll', 'beforeEach', 'test', 'afterAll', 'afterEach'] }
      }
    }
  }
],

规则说明 #

新增的规则会精准匹配所有test.beforeAll、test.beforeEach、test()测试用例、test.afterAll、test.afterEach的调用语句，强制要求任意两个这类语句之间必须有一个空行，完全符合需求。

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